注意安全！XSS 和 XSRF

最近在看一些关于网络安全的问题，跟前端相关的包括且不局限于xss和xsrf 了，那么一休哥（四爷在此）就结合最近的学习谈一些粗浅的了解和实验。（\(^o^)/，我是一个喜欢做实验的家伙）

XSS （Cross site script）攻击！

XSS 意思就是跨站脚本攻击。这里面也涉及到跨域的问题，特别是在后面谈到XSRF防御的时候。简单来说XSS就是来自外部输入的脚本被注入到了受害网站（~ o ~, 被公鸡了），如果该网站没有对临时加入DOM 结构的 JS 脚本进行过滤，那么这段脚本可能被之后访问该网站的用户浏览器执行。 

举个栗子：

假如 网站有评论功能且没有针对XSS 的过滤，那么一休哥在@英俊熊的某文章下评论了一下内容：

那么这段字符串POST给了 稚嫩的服务器，没有Encode，啥都没做。原封不动加入了原本的HTML页面，那么当其他用户查看该文章的时候浏览器就会自动执行DOM Tree中的这句 JS 语句，弹出来 吓人+_+... 

这还不算啥，顶多就是烦人。但如果评论里面写的是： 

我擦。。当你访问小熊哥博文时，你在当前域名下的cookie被一休哥设置的什么鬼网站给get到了。。www.yixiuge.com 这个网站的后台程序会拿到你的cookie，然后借此cookie登陆你的，乱发段子。

---

其实，有个非常棒的图展示了整个XSS攻击的过程。

how-xss-works

所以作为一个合格的WebApp，不能相信任何用户输入内容， 更不能未加处理就直接Print到HTML DOM 结构里。当今主流的一些前端框架（Angular 2.1，都已经2.1了。。。）都实现了对XSS的防御，结合服务器端程序更是可以防御XSRF（Cross site request forgery 跨站伪造请求）

防御

那么到底如何防御这种简单的公鸡呢？

我简单说一下，因为我也没有完全实现过HTML Encoder什么鬼的，只是做了一些实验来验证。核心思想就是：不相信用户输入，对任何输入都进行过滤，如果非要显示，那么Encode之后再显示在HTML中。

大家想一下，除了这样的标签在DOM结构中会自动执行，还有哪些？？

对的：   等等都能实现GET请求外部脚本，或者向非法网站发送POST请求。可能会修改你正在访问的网站的密码。。很危险，所以在将用户评论POST 到服务器之前就可以做HTML Encode 操作（或者叫做Escape操作），原理就是把 < , > , " 等等不安全字符换成无害字符，这样浏览器就不会把这段字符串作为代码来执行了。

举个栗子：

用户输入评论是：

无害处理后字符串是：

转换后的字符串

转换背后的机制是一套特殊符号 和 安全字符的映射表， 而且这个跟浏览器对HTML的渲染机制有关。各大浏览器中的JS引擎碰到这样的标签，会解析其中的代码，并且执行。但碰到 <> 这样的字符就不会当做JS 执行，而是作为普通字符串打印。大家可以试试看Encode 前后这个例子在浏览器中的表现。

映射表参考链接： 映射表

那么除了大型框架，有木有自动Encode 的工具呢？发现一个，可以用用看。附上链接：HTML entities。 好吧，这次说了XSS，下一篇再说一下XSRF的危害和防御机制。看了文章，赔钱！！

参考文章

---

XSS 参考文章

全面学习XSS