网络安全 XSS 介绍和防范

Question

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

比如，一个网站的评论区，用户可以输入 <script> 标签，如图：

点击 Submit 发送内容，如果前端后端都没有做任何处理的话，这段评论在提交以后就会原封不动地展示在 html 上。而这个时候，script里的代码执行了，导致所有访问这个页面的用户的 Cookie 都发送到了黑客指定的 API。

解决思路

前端

提交过程

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

渲染过程

前端倒是在渲染的时候可以做相应的处理，比如可以用以下方法处理：

processedContent(comment) {
    return comment
        .replace(/&/g, "&")
	.replace(/</g, "<")
        .replace(/>/g, ">")
	.replace(/"/g, """)
	.replace(/'/g, "'")
}

这样就能处理掉非法符号了（代码仅列举了部分符号）。

& < >这些字符叫做字符实体因为比如< >这样的字符游览器会认为是标签，所以，如果想正常显示< >，那么就得转成字符实体，而游览器默认也认识这些字符，在展示的时候，还是展示成字符实体对应的符号。

对于渲染阶段，像react，vue这样的库，又或者是juicer，ejs这样的前端模板，都会默认处理非法符号为字符实体。

字符实体详解可以看这里>>

后端

提交过程

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

渲染过程

这里的渲染指的是后端模板渲染，渲染模板可能是smarty，可能是laravel的blade，可能是node做中间层用的ejs，亦可能是vue或react的SSR。这些后端模板都自己内部会做转义。
转义的实现方法也无非是通过正则匹配，然后进行替换。

例外

在遇到富文本编辑器的时候，处理方法就不同了。因为，在前端展示的时候，我们自然是有什么标签就展示什么标签，而不是转为字符实体，不然得到的不都是文本了嘛。
这种情况的话，就需要后端进行非法字符过滤了，把比如script这种标签给过滤掉，或者转义掉。当然，其实富文本还有很多过滤条件，比如，非本站的网页地址过滤，非法字符过滤等。

总结

总之，无论是后端模板还是前端模板，其实都是前端的范畴。
上面也说了，现在的前端库、前端模板、后端模板，都已经内部做了转译了，开发者愉快的使用就好了。
所以，其实除了遇到富文本编辑器的情况（工作量在后端），我们几乎不用做任何额外的工作。但是，还是理解内部机制比较好。