前端安全性问题——XSS跨域脚本攻击

XSS跨域脚本攻击

安全圈内有一句非常有名的话：所有的输入都是有害的！这句话把XSS漏洞的本质体现的淋漓尽致。

原理
无需登录认证，核心原理就是向你的页面注入脚本。

• 反射型：发出请求时，XSS代码出现在URL中，作为输入提交到服务器端，服务器端解析后响应，XSS代码随响应内容一起传回给浏览器，最后浏览器解析执行XSS代码。
• 存储型：存储型XSS和反射型XSS的差别仅在于，提交的代码会存储在服务端（数据库，内存，文件系统等），下次请求目标页面时不用再提交XSS代码。（例如：常见的评论，在文本框中输入一段代码，那么就会存放在数据库当中，当再次加载的时候便会执行这样的代码）。

常见的场景
留言、评论、注册、登录等

攻击示例

1.CSS攻击
用户上传的style节点、script节点、iframe节点等，场景：比如用户在上传的过程中构建了一个style节点，里面写着body display:none !important，大家知道!important在CSS中的优先级最高，如果用户上传的里面真有这样的CSS的话，后果是什么，后果就是任何包含这个CSS文件的页面，用户看到的都是空白页面，因为body是隐藏的，攻击完成！

2.JavaScript攻击
新浪博客写一篇文章，同时偷偷插入一段script，然后发布，发布完成以后如果有人看了，那么我们插入的script就会执行，攻击代码中获取cookie（现在不常有了，个人信息一般会有手机号，邮箱等），接下来就会把查看着的cookie发送的攻击者的服务器。

alert(document.cookie) // 这段代码意思就是获取cookie，那么cookie中可能存在用户的敏感信息

防御

• 编码，我们对用户的输入不能保持原样，要进一步处理，对用户输入的数据进行HTML Entity编码（十进制或转义字符）；
• 正则过滤，要把不安全或不合理的内容过滤掉，比如移除用户上传的DOM属性，如onerror、onclick、onmousdown、替换script为’'等，除了在你的业务中有特殊需求的其它事件都要过滤掉；我们只需要把script的<>尖括号转换了就可以了， 让它形成不了JS的代码块，无法执行就可以了。
• 后端也可以替换；前端替换会影响性能；

// 安装一个插件，我们自己写的话可能考虑的不够全
cnpm i xss -D
// 使用，在需要的地方引入
const xss = require('xss')
// xss其实是一个函数，我们只需要把创建博客时候的title及content包起来就可以了
const title = xss(blogData.title)
// 这样的话title里面的JS就被我们转义了

// 转义过后先显示在前端页面上就是转义后的了，需要前端再次转回去，这个交给前端来做，合格的后端不可能在数据库存储具有攻击可能性的代码。