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

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中注入的恶意代码，到达进犯结果。

2. 反射型xss

反射型XSS也被称为非持久性XSS，是现在最轻易出现的一种XSS缝隙。XSS代码出现在URL中，经过勾引用户点击一个链接到方针网站的恶意链接来实施进犯。以下恶意链接，其中，xxx是恶意代码。传到办事器的参数data，被办事器接收以后，响应的页面包括data这个变量的，会将恶意代码注入到页面上面，停止进犯。

3. 存储型xss

存储型XSS又被称为持久性XSS，它是最危险的一种跨站剧本，相比反射型XSS和DOM型XSS具有更高的隐藏性，所以风险更大，它不需要用户手动触发。当进犯者提交一段XSS代码后，被办事器端接收并存储，当一切阅读者拜候某个页面时城市被XSS，其中最典型的例子就是留言板。

处理计划

1.过滤。

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

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停止屡次加密然后再屡次解码。