由“最近访客”引起的xss血案

最近在首页粗糙地做了一个“最近访客”功能。

然后我的首页就出现了各种有趣的家伙：

还有：

作为一名专业的前端，我居然被xss攻击了。 
在首页弹这个框，我真是：

原因

在拼接“最近访客”的时候，我没有对多说返回的字段进行处理。

不是不知道会有XSS问题，而是没有重视起来； 我可不想经受惨痛的教训，才去牢记于心。

解决办法

对特别有存在安全隐患的地方，写了个函数进行过滤。 
这里，我用的是js-xss。里面有太多我没有见过的xss情况，比我自己考虑的肯定要多。

遇见过的常见出现XSS场景

1. 接口返回的数据

   就像我这次遇见的xss，是多说接口返回的，数值是可以用户自己定义。以后在接口返回的数据我应该多做一层xss处理。这是最最常见的场景了。比如弹幕里面用户的留言，比如评论展示等等，太多地方了。

2. 外部链接

   特别是引用外部网站的库，比如js文件等。外部恶意用户可以对其更改。

第一个是我最最常见的，一定要留心起来。

举个特例的XSS

本来是想自己写一个函数，简单的对<\>/<script></script>&!|等过滤下。但突然想起一个比较特殊的例子：

几年前，很流行用- []()!+这几个符号就组成javascript语句，叫jsfuck。它就可以避免这个简单的过滤。就像我在console里这样输出：

想必黑客们一定会有更多牛逼的方法。 
特别是在JS越来越牛逼的今日。 
最保险的还是createElement然后append，对于有XSS隐患的重要页面一定要这么做。