网络安全-XSS

XSS介绍

原文地址：github.com/CodeLittleP…

维基百科： 跨站脚本（英语：Cross-site scripting，一般简称为：XSS）是一种网站应用程序的安全漏洞攻击，是代码注入的一种。它容许恶意用户将代码注入到网页上，其余用户在观看网页时就会受到影响。

好比，一个网站的评论区，用户能够输入<script>标签，如图： 点击submit发送内容，若是前端后端都没有作任何处理的话，这段评论在提交之后就会原封不动地展现在html上。而这个时候，script里的代码执行了，致使全部访问这个页面的用户的cookie都发送到了黑客指定的API。

解决思路

前端

提交过程

前端对于这种状况好像在发送到后端的过程当中无能为力，即便在流程中加上前端转译，黑客也能够经过直接在控制台执行js的方式来提交评论。

渲染过程

前端却是在渲染的时候能够作相应的处理，好比能够用如下方法处理：

processedContent(comment) {
    return comment
        .replace(/&/g, "&")
	.replace(/</g, "&lt;")
        .replace(/>/g, "&gt;")
	.replace(/"/g, "&quot;")
	.replace(/'/g, "&#039;")
}
复制代码

这样就能处理掉非法符号了（代码仅列举了部分符号）。 & < >这些字符叫作字符实体由于好比< >这样的字符游览器会认为是标签，因此，若是想正常显示< >，那么就得转成字符实体，而游览器默认也认识这些字符，在展现的时候，仍是展现成字符实体对应的符号。 对于渲染阶段，像react，vue这样的库，又或者是juicer，ejs这样的前端模板，都会默认处理非法符号为字符实体。 字符实体详解能够看这里>>

后端

提交过程

后端在收到前端的提交之后，直接存起来就好。

渲染过程

这里的渲染指的是后端模板渲染，渲染模板多是smarty，多是laravel的blade，多是node作中间层用的ejs，亦多是vue或react的SSR。这些后端模板都本身内部会作转义。 转义的实现方法也无非是经过正则匹配，而后进行替换。

例外

在遇到富文本编辑器的时候，处理方法就不一样了。由于，在前端展现的时候，咱们天然是有什么标签就展现什么标签，而不是转为字符实体，否则获得的不都是文本了嘛。 这种状况的话，就须要后端进行非法字符过滤了，把好比script这种标签给过滤掉，或者转义掉。固然，其实富文本还有不少过滤条件，好比，非本站的网页地址过滤，非法字符过滤等。

总结

总之，不管是后端模板仍是前端模板，其实都是前端的范畴。 上面也说了，如今的前端库、前端模板、后端模板，都已经内部作了转译了，开发者愉快的使用就行了。 因此，其实除了遇到富文本编辑器的状况（工做量在后端），咱们几乎不用作任何额外的工做。可是，仍是理解内部机制比较好。