前端网络安全——前端XSS

XSS攻击：Cross Site Scripting（跨站脚本攻击）

XSS攻击原理：程序+数据=结果，如果数据中包含了一部分程序，那么结果就会执行不属于站点的程序。

XSS攻击能干什么？能注入Script标签注入程序，那么所有JS能干的事情攻击者都能干，比如如下一些操作：

1、获取页面数据，偷取网站任意数据

2、获取Cookies，偷取用户资料、偷取用户密码和登录态

3、劫持前端逻辑，欺骗用户

4、发送请求

XSS分类：

1、反射型：url参数直接注入

反射型需要将url发给别人进行传播，别人点开url才能进行攻击，如果要迷惑别人一般会转换成短链，让别人看不出时进行了XSS攻击的url。

2、存储型：存储到数据库后读取时注入

存储型危害更大，因为可以做到用户无感知，而且只要访问过页面的用户都会受到攻击，传播方式更广。

XSS攻击注入点：

1、HTML节点内容

2、HTML属性

3、Javascript代码

4、富文本

XSS防御：

（一）转义手段防御

1、浏览器自带防御机制，将url一些简单的输入进行拦截。只拦截反射型攻击，以及注入在节点和属性中的攻击。

2、HTML节点内容防御：将<和>两个符号转义成&lt;和&gt;。转义时机有在存入数据库和读取后显示两个时间点进行。

3、HTML属性防御："引号转义成&quto;，'单引号转义成'，空格转义成 ，因为HTML属性可以不加引号，如果不对空格转义，那写代码必须带上引号写属性值。

HTML内容和属性的防御可以合并成一个方法，因为转义的字符都互不影响对应结果。

HTML5之后就没有对&符号进行转义，如果要更加安全就将&符号转义成&amp;

4、Javascript代码防御：\\转义成\\\\，”引号转义成\\“，JS需要转义的字符有很多，可以用JSON.stringify()方法来进行字符串转义。

5、富文本防御：

　　（1）按黑名单过滤不能写入的标签属性，实现简单只需正则表达式进行过滤，弊端是因为html太庞大，容易疏忽造成漏洞。

　　（2）按白名单保留部分标签和属性，优势是过滤比较彻底，但是实现难度比较大，需要先解析成dom树，然后过滤生成新的内容。而且白名单过滤的属性标签可能会对业务造成一定的影响，需要进行平衡。

　　　　npm install xss，这个包是别人写好的xss白名单库。

（二）CSP，Content Security Policy内容安全策略

用于指定哪些内容可执行，通过http-header进行配置可信任的内容。

Content-Security-Policy配置以下属性加对应属性的策略值。

child-src，connect-src，default-src

font-src，frame-src，img-src

manifest-src，media-src，object-src

script-src，style-src，worker-src