常见前端安全问题及解决方案

1.XSS

XSS全称(Cross Site Scripting)跨站脚本攻击，是前端最多见的安全问题。XSS是一种在web应用中的计算机安全漏洞，它容许恶意web用户将代码植入到提供给其它用户使用的页面中，攻击者经过注入非法的html标签或者javascript代码，从而当用户浏览该网页时，控制用户浏览器。

类别

1. DOM型xss

利用DOM自己存在的缺陷进行攻击。
以下代码，页面中某个图片获取路径。其中，返回的{{img.src}}='/xxx' onerror='/xxx'，img标签就变成了<img src="/xxx" onerror=xxx">。src确定会加载失败，而后会执行onerror中注入的恶意代码，达到攻击效果。

<img src="{{img.src}}">
复制代码

2. 反射型xss

反射型XSS也被称为非持久性XSS，是如今最容易出现的一种XSS漏洞。XSS代码出如今URL中，经过引诱用户点击一个连接到目标网站的恶意连接来实施攻击。
以下恶意连接，其中，xxx是恶意代码。传到服务器的参数data，被服务器接收以后，响应的页面包含data这个变量的，会将恶意代码注入到页面上面，进行攻击。

http://www.abc.com?data=xxx
复制代码

3. 存储型xss

存储型XSS又被称为持久性XSS，它是最危险的一种跨站脚本，相比反射型XSS和DOM型XSS具备更高的隐蔽性，因此危害更大，它不须要用户手动触发。
当攻击者提交一段XSS代码后，被服务器端接收并存储，当全部浏览者访问某个页面时都会被XSS，其中最典型的例子就是留言板。

解决方案

1.过滤。

对用户的输入进行过滤，经过将<> '' ""等字符进行转义，移除用户输入的Style节点、Script节点、Iframe节点。

function filterXss(str){
    var s = "";
    if(str.length == 0) return "";
    s = str.replace(/&/g,"&");
    s = s.replace(/</g,"&lt;");
    s = s.replace(/>/g,"&gt;");
    s = s.replace(/ /g,"&nbsp;");
    s = s.replace(/\'/g,"&#39;"); s = s.replace(/\"/g,"&quot;"); return s; } 复制代码

2.编码

根据输出数据所在的上下文来进行相应的编码。数据放置于HTML元素中，需进行HTML编码，放置于URL中，须要进行URL编码。此外，还有JavaScript编码、CSS编码、HTML属性编码、JSON编码等等。

3.httpOnly

在cookie中设置HttpOnly属性，使js脚本没法读取到cookie信息。

2.CSRF

CSRF全称(Cross-Site Request Forgeries)跨站请求伪造。指攻击者冒充用户发起请求（在用户不知情的状况下），完成一些违背用户意愿的事情。攻击过程以下图所示：

解决方案

1.使用token

服务器产生一个token存到session中，同时将token发送给客户端，客户端提交表单时带上该token，服务器验证token与session是否一致，一致就容许访问，不然拒绝访问。

2.Referer 验证

Referer 指的是页面请求来源，意思是，只接受本站的请求，服务器才作响应；若是不是，就拦截。

3.使用验证码

对于重要请求，要求用户输入验证码，强制用户必须与应用进行交互，才能完成最终请求。

3.点击劫持

点击劫持就是将一个危险网站设置透明，而后在其上方设置一个按钮，当你点击这个按钮的时候，就会触发底部恶意网站的某些事件。

解决方案

1.设置http响应头 X-Frame-Options

X-Frame-Options HTTP 响应头是用来给浏览器指示容许一个页面能否在<frame>, <iframe>或者 <object> 中展示的标记。网站可使用此功能，来确保本身网站的内容没有被嵌到别人的网站中去。

2.使用CSP(Content Security Policy)内容安全策略

4.不安全的第三方依赖

现现在进行应用开发，不管是后端服务器应用仍是前端应用开发，绝大多数时候咱们都是在借助开发框架和各类类库进行快速开发。然而，一些第三方的依赖或者插件存在不少安全性问题，也会存在这样那样的漏洞，因此使用起来得谨慎。

解决方案

1.尽可能减小第三方依赖，选用相对成熟的依赖包。

2.使用自动化工具检查这些第三方代码有没有安全问题，好比NSP(Node Security Platform)，Snyk等等。

5.本地存储数据泄露

不少开发者为了方便，把一些我的信息不经加密直接存到本地或者cookie，这样是很是不安全的，黑客们能够很容易就拿到用户的信息。

解决方案

1.不在本地存储重要数据

敏感、机密信息不要存储在本地。

2.加密

全部在放到cookie中的信息或者localStorage里的信息要进行加密，加密能够本身定义一些加密方法或者网上寻找一些加密的插件，或者用base64进行屡次加密而后再屡次解码。