一、什么是XSS攻击

**XSS 即（Cross Site Scripting）中文名称为：跨站脚本攻击。**XSS的重点不在于跨站点，而在于脚本的执行。那么XSS的原理是：
恶意攻击者在web页面中会插入一些恶意的script代码。当用户浏览该页面的时候，那么嵌入到web页面中script代码会执行，因此会达到恶意攻击用户的目的。

二、防止XSS攻击

1、X-XSS-Protection设置

目前该属性被所有的主流浏览器默认开启XSS保护。该参数是设置在响应头中目的是用来防范XSS攻击的。它有如下几种配置：
值有如下几种：默认为1.
0：禁用XSS保护。
1：启用XSS保护。
1;mode=block; 启用xss保护，并且在检查到XSS攻击是，停止渲染页面。

2、XSS防御HTML编码、HTML Attribute编码

我们为什么要防御HTML编码、HTML Attribute编码呢？比如如下html代码：


content

,在div标签中存在一个输出变量content,在div标签中存在一个输出变量{content}. 那么浏览器在解析的过程中，首先是html解析，当解析到div标签时，再解析 content的内容，然后会将页面显示出来。那假如该content的内容，然后会将页面显示出来。那假如该{content} 的值是 这样的呢？因此该script脚本就会解析并且执行了，从而达到XSS的攻击目标。


因此我们需要将不可信数据放入到html标签内(比如div、span等)的时候需要进行html编码。


编码规则：将 & < > " ’ / 转义为实体字符。

3、XSS防御之javascript编码

在上面的 XSS 防御HTML Attribute编码中我们是可以防御XSS攻击，但是它只能防御的是HTML通用属性，并不是全部属性，在html中还存在很多支持协议解析的html属性，比如 onclick, onerror, href, src 等这些，类似这些属性我们是无法通过HTML编码来防范XSS攻击的。因为浏览器会先解析html编码的字符，将其转换为该属性的值，但是该属性本身支持JS代码执行，因此游览器在HTML解码后，对该属性的值进行JS解析，因此会执行响应的代码。

4、XSS 防御之 URL 编码

作用范围：将不可信数据作为 URL 参数值时需要对参数进行 URL 编码
编码规则：将参数值进行 encodeURIComponent 编码

5、XSS 防御之 CSS 编码

作用范围：将不可信数据作为 CSS 时进行 CSS 编码
比如：通过css构造（background-img:url\expression\link-href@import）

6、开启CSP网页安全政策防止XSS攻击

Content-Security-Policy 中文的意思是网页安全政策。

CSP是网页安全政策(Content Security Policy)的缩写。主要用来防止XSS攻击。是一种由开发者定义的安全性政策申明，通过CSP所约束的责任指定可信的内容来源，通过 Content-Security-Policy 网页的开发者可以控制整个页面中 外部资源 的加载和执行。

我们只需要在meta属性中设置下即可使用：如下代码：

<meta http-equiv="Content-Security-Policy" content="">