血淋淋的事实告诉你：你为什么不应该在JS文件中保存敏感信息

在JavaScript文件中存储敏感数据，不仅是一种错误的实践方式，而且还是一种非常危险的行为，长期以来大家都知道这一点。

创新互联，专注为中小企业提供官网建设、营销型网站制作、成都响应式网站建设、展示型成都网站设计、网站制作、外贸营销网站建设等服务，帮助中小企业通过网站体现价值、有效益。帮助企业快速建站、解决网站建设与网站营销推广问题。

而原因也非常简单，我们可以假设你为你的用户动态生成了一个包含API密钥的JavaScript文件：

 
 
 
    
  
  
  
  1. apiCall= function(type, api_key, data) { ... }  
    2.   
  
  
  2. var api_key = '1391f6bd2f6fe8dcafb847e0615e5b29' 
    3.   
  
  
  3. var profileInfo = apiCall('getProfile', api_key, 'all') 
    4.

跟上述例子一样，每当你在全局范围创建一个变量，意味着网站中任何一部分代码都可以访问到这个变量，包括你托管的其他脚本在内。

一、为什么这样做很明显是不安全的?

为什么开发人员不应该在JavaScript文件中嵌入敏感信息呢?原因有很多，对于经验不丰富的开发人员来说，通过JavaScript文件来传递数据是一种非常简单的方法，因为你可以将数据在服务器端生成和存储，然后将它们传递给客户端代码，而且这样还可以节省一部分发送给服务器端的请求。但是，这种时候我们通常会忽略的一个因素就是浏览器的扩展插件，有的时候为了使用相同的窗口对象，它们有的时候需要直接在DOM中注入script标签，因为仅仅依靠内容脚本可能无法实现预期的功能。

二、有没有办法保护变量的安全?

我们之前已经讨论了全局范围了，对于浏览器中的JavaScript来说，一个全局变量对于窗口对象来说是非常有用的。但是在ECMA Script5中，还有一种额外的范围，也就是函数范围。这也就意味着，如果我们使用var关键字在一个函数内部声明了一个变量，它就不是全局变量了。而在ECMA Script 6中又引入了另一种范围，即块范围，这个范围内的变量使用const和let关键字来声明。

这两种关键字可以用来声明块范围中的变量，但是我们无法修改const变量的值、如果我们没有用这些关键词来声明变量，或者说我们在函数外部使用了var变量，我们就相当于创建了一个全局变量，而这种情况并不是我们经常想要出现的。

“use strict”

为了防止你不小心创建了全局变量，其中一种有效方法就是激活限制模式，大家可以在一个文件或函数的起始位置添加字符串“use strict”来实现这个功能。接下来，如果你之前没有声明这个变量的话，你将无法使用这个变量。

 
 
 
    
  
  
  
  1. "use strict"; 
    2.   
  
  
  2. var test1 = 'arka' // 有效 
    3.   
  
  
  3. test2= 'kapı' // 引用错误 
    4.

我们可以在IIFE(立即调用的函数表达式)中使用这种技术，IIFE可以用来创建一个函数范围，但是它们会立即执行函数主体，比如说：

 
 
 
    
  
  
  
  1. (function(){ 
    2.   
  
  
  2.     "use strict"; 
    3.   
  
  
  3.     //在函数范围内声明变量 
    4.   
  
  
  4.     var privateVar = 'Secret value';  
    5.   
  
  
  5. })() 
    6.   
  
  
  6. console.log(privateVar) // 引用错误 
    7.

可能乍看过去这会是一种创建变量的有效方式(其内容无法在范围外读取)，但其实不然。虽然IIFE是一种防止全局命名空间被干扰的有效方式，但是它们并不能真正保护你的数据内容。

三、从私有变量中读取敏感数据

实际上，我们几乎无法保证私有变量中的内容真正的是“私有”的。原因有非常多，我们接下来会对其中的部分进行测试，虽然不够完整，但也足够证明给大家看，为什么我们不能在JavaScript文件中存储敏感数据。

1. 重写原生函数

在下面的例子中，我们将使用一个api密钥来向服务器端发送请求。因此，我们需要通过网络并以明文数据的形式发送这个密钥，而且现在在JavaScript中也没有多少其他可选择的方法。假设我们的代码使用了fetch()函数：

 
 
 
    
  
  
  
  1. window.fetch= (url, options) => {  
    2.   
  
  
  2.     console.log(`URL: ${url}, data:${options.body}`); 
    3.   
  
  
  3. };  
    4.   
  
  
  4. //EXTERNAL SCRIPT START  
    5.   
  
  
  5. (function(){  
    6.   
  
  
  6.     "use strict";  
    7.   
  
  
  7.     var api_key ="1391f6bd2f6fe8dcafb847e0615e5b29"  
    8.   
  
  
  8.     fetch('/api/v1/getusers', {  
    9.   
  
  
  9.         method: "POST",  
    10.   
  
  
  10.         body: "api_key=" + api_key  
    11.   
  
  
  11.     });  
    12.   
  
  
  12. })()  
    13.   
  
  
  13. //EXTERNAL SCRIPT END 
    14.

你可以看到，我们可以直接重写fetch()函数，然后窃取API密钥。唯一的前提就是我们需要在我们的脚本块后include一个外部脚本。在这个例子中，我们只是在控制台console.log出来了这个API密钥，但实际操作中我们还需要将其发送到我们的服务器中。

2. 定义Setter和Getter

私有变量中可能不仅包含字符串，还有可能包含对象或数组。对象可以有不同的属性，在多数情况下，你可以直接设置和读取它们的值，但是JavaScript还支持很多其他有意思的功能。比如说，你可以在一个对象的属性被设置或被访问的时候执行另一个函数，这里可以使用__defineSetter__和__defineGetter__函数来实现。如果我们在对象构造函数的原型中使用__defineSetter__函数，我们就可以输出分配给目标对象属性的所有值。

 
 
 
    
  
  
  
  1. Object.prototype.__defineSetter__('api_key',function(value){  
    2.   
  
  
  2.     console.log(value);  
    3.   
  
  
  3.     return this._api_key = value;  
    4.   
  
  
  4. });  
    5.   
  
  
  5. Object.prototype.__defineGetter__('api_key',function(){  
    6.   
  
  
  6.     return this._api_key;  
    7.   
  
  
  7. });  
    8.   
  
  
  8. //EXTERNAL SCRIPT START  
    9.   
  
  
  9. (function(){  
    10.   
  
  
  10.     "use strict"  
    11.   
  
  
  11.     let options = {}  
    12.   
  
  
  12.     options.api_key ="1391f6bd2f6fe8dcafb847e0615e5b29"  
    13.   
  
  
  13.     options.name = "Alice"  
    14.   
  
  
  14.     options.endpoint ="get_user_data"  
    15.   
  
  
  15.     anotherAPICall(options);  
    16.   
  
  
  16. })()  
    17.   
  
  
  17. //EXTERNAL SCRIPT END 
    18.

如果分配给对象属性的是一个API密钥，那我们就可以直接在setter中访问它了。另一方面，getter也可以确保我们的后续代码能够正确执行。

3. 自定义枚举器

数组肯定是不能忽略的一个因素，如果代码中使用了for循环来遍历数组值，我们就可以在数组构造器原型中定义一个自定义的枚举器，这样不仅可以允许我们访问数组中的内容，而且也不会影响原生函数的功能。

 
 
 
    
  
  
  
  1. Array.prototype[Symbol.iterator]= function() {  
    2.   
  
  
  2.     let arr = this;  
    3.   
  
  
  3.     let index = 0;  
    4.   
  
  
  4.     console.log(arr)  
    5.   
  
  
  5.     return {  
    6.   
  
  
  6.         next: function() {  
    7.   
  
  
  7.             return {  
    8.   
  
  
  8.                 value: arr[index++],  
    9.   
  
  
  9.                 done: index > arr.length  
    10.   
  
  
  10.             }  
    11.   
  
  
  11.         }  
    12.   
  
  
  12.     }  
    13.   
  
  
  13. };  
    14.   
  
  
  14. //EXTERNAL SCRIPT START  
    15.   
  
  
  15. (function(){  
    16.   
  
  
  16.     let secretArray = ["this","contains", "an", "API", "key"];  
    17.   
  
  
  17.     for (let element of secretArray) {  
    18.   
  
  
  18.         doSomething(element);  
    19.   
  
  
  19.     }  
    20.   
  
  
  20. })()  
    21.   
  
  
  21. //EXTERNAL SCRIPT END 
    22.

四、后话

除了本文所介绍的方法之外，攻击者还有很多从JavaScript文件中窃取敏感信息的方法。有的情况下，使用IIFE、限制模式和在函数/块范围声明变量都不一定能保证你的安全。因此，我建议大家可以从服务器端动态获取敏感数据，而不是直接在JavaScript文件中存储敏感数据。这样不仅更加安全，而且还易于维护，何乐而不为?

网站栏目：血淋淋的事实告诉你：你为什么不应该在JS文件中保存敏感信息
分享地址：http://www.shufengxianlan.com/qtweb/news3/188503.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

全网营销推广知识

分类信息网站

ssl证书申请　　 　四川审计公司　　 　成都网站设计公司　　 　电商网店　　 　恒温恒湿空调机组　　 　微信小程序开发　　 　企业网站设计　　 　四川服务器托管　　 　高端定制网站设计　　 　400电话办理　　 　郫都区消防器材　　 　网上商城管理系统　　 　微信公众号二次开发　　 　三台网站建设　　 　乐山服务器托管　　 　成都网站制作　　 　成都展柜定制　　 　成都网络公司　　 　企业网站建设公司　　 　腾讯云虚拟主机