前端代码常见的安全缺陷（一）

目录

1、使用不安全的target blank

问题描述：

修复建议：

2、Javascript 代码劫持

问题描述：

修复建议：

示例：

3、跨站请求伪造

问题描述：

修复建议：

4、遗留的调试代码

问题描述：

修复建议：

5、HTML页面中包含硬编码域名

问题描述：

修复建议：

6、密码管理：null 密码

问题描述：

修复建议

7、易受攻击的框架

问题描述：

修复建议：

8、请求头部未设置httpOnly属性

问题描述：

修复建议：

1、使用不安全的target blank

问题描述：

在使用标签中使用target属性，当值设置为“_blank”攻击者会针对`window.opener`API进行恶意行为的攻击，有可能导致钓鱼安全漏洞问题。

例如，以下示例使用的`target`属性，但是没有设置`rel`属性。

    test

修复建议：

建议使用`target="_blank"`时，配合使用`rel="noopener noreferrer"`

例如，配置rel属性如下所示：

test

2、Javascript 代码劫持

问题描述：

使用JavaScript传送敏感数据的应用程序可能会存在JavaScript劫持的漏洞，该漏洞允许未经授权的攻击者从一个易受攻击的应用程序中读取机密数据。

JavaScript劫持可以简单的理解为模拟授权的用户，窃取用户在服务器上的信息。Web浏览器使用同源策略(Same Origin Policy)，以保护用户免受恶意网站的攻击。同源策略规定：如果要使用JavaScript来访问某个网页的内容的话，则JavaScript和网页必须都来源于相同的域。若不采取同源策略，恶意网站便可以使用受害者的客户端凭证来运行 JavaScript，从其他网站加载的敏感信息，并对这些信息进行处理，然后将其返回给攻击者。

使用JSON传输数据的JavaScript应用更容易受到JavaScript劫持攻击。由于JSON使用JavaScript语法的子集表示对象、数组、简单值，JSON本身可以被当做JavaScript执行，且使用eval()函数对JSON数据结构求值早被认为是存在风险的，其可能执行恶意代码。

修复建议：

尽量避免跨域的数据传输，对于同域的数据传输使用xmlhttp的方式作为数据获取的方式。如果是跨域的数据传输，必须要对敏感的数据获取做权限认证，具体的方式可以包括：

1. referer的来源限制，利用前端referer的不可伪造性来保障请求数据的应用来源于可信的地方，此种方式力度较稀，完全依赖于referer，某些情况下(如存在XSS)可能导致被绕过。
2. 加入Token。利用Token对调用者的身份进行认证，这种方式对于调用者的身份会要求力度较细，但是一旦出现XSS也可能导致前端Token的泄露，从而导致保护失效。
3. 避免直接执行JavaScript响应：在响应中加入一些额外的字符。这些响应只有经过了修改，才能成功地转到JavaScript解释器进行处理。这样可以防止攻击者使用标签来进行劫持。比如，可以给响应加上注释符号，使其无法直接执行；或者是在真实的响应前面，添加死循环语句，使其无法正常的直接运行。

示例：

function postXHR () {
        var xhr = new XMLHttpRequest();
        xhr.open('GET', './test.config', true)
        xhr.onreadystatechange = function () {
            if(xhr.readyState == 4) {
                if(xhr.status == 200 || xhr.status == 0) {
                    console.log(xhr.responseText)
                }
            }
        }
        try {
            xhr.send(null)
        } catch (error) {
            console.log('error', error)
        }
      }

以上代码示例，在代码扫描中，一直提示第三行关键词`open`有问题，然后根据建议，在请求头部添加token，或者Referer，或者在回调的时候，对返回值做xss过滤了，还是提示报错。

在这里可以换一种方式来实现，例如通过fetch API，或者支持异步请求的框架Axios等。

3、跨站请求伪造

问题描述：

跨站请求伪造(CSRF)是伪造客户端请求的一种攻击。应用程序允许用户提交不包含任何nonce（与用户Session关联的加密随机值）的请求，将可能导致CSRF攻击。
例如：以下代码片段用于银行转账功能，对于该重要敏感的操作没有进行相应防护，将易于导致跨站请求伪造攻击。

var req = new XMLHttpRequest();  
req.open("POST", "/transferFunds", true);  
body = "to_account=Bill&amount=10000";  
req.send(body);  

例2：下面是通过表单发送请求。

    cash:    
    to: