持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第2天，点击查看活动详情

XSS(cross site scripting)跨站脚本攻击，就是攻击者想尽一切办法将可以执行的代码注入到网页中。

为什么不叫 CSS 攻击?

因为在 XSS 出现的时候，CSS 在前端领域已经被广泛指定为层叠样式表（Cascading Style Sheets），所以将 Cross（意为“交叉”） 改以交叉形的 X 做为缩写,这就是我们熟知的 XSS（作为前端三大件之一的 CSS 肯定要比 cross site scripting 要出名一些）

格林公式，你（跨站脚本攻击）来之前我（层叠样式表）就已经叫 CSS 了！

XSS 攻击主要可以分为三类

1. 存储型（持久型）（server端）
2. 反射型（server 端）
3. Dom 型(浏览器端）

存储型（持久型）（server端）

1. 场景：常见于用户需要保存数据的网站功能，如论坛发帖、商品评论、用户私信等。
2. 攻击步骤：
   1. 攻击者将恶意代码提交到目标网站的数据库中
   2. 用户打开目标网站时，服务端将恶意代码从数据库中取出来，拼接在 HTML 中返回给浏览器
   3. 用户浏览器在收到响应后解析执行，混在其中的恶意代码也同时被执行
   4. 恶意代码窃取用户数据，并发送到指定攻击者的网站，或者冒充用户行为，调用目标网站的接口，执行恶意操作

反射型（Server端）

与存储型的区别在于，存储型的恶意代码存储在数据库中，反射型的恶意代码在 URL 上

1. 场景：常见于通过 URL 传递参数的功能，如网站搜索、跳转等。
2. 攻击步骤：
   1. 攻击者构造出特殊的 URL，其中包含恶意代码。
   2. 用户打开带有恶意代码的 URL 时，网站服务端将恶意代码从 URL 中取出，拼接在 HTML 中返回给浏览器。
   3. 用户浏览器接收到响应后解析执行，混在其中的恶意代码也被执行。
   4. 恶意代码窃取用户数据并发送到攻击者的网站，或者冒充用户的行为，调用目标网站接口执行攻击者指定的操作。

Dom 型(浏览器端）

DOM 型的 XSS 攻击，属于前端 JavaScript 自身的安全漏洞

1. 场景：常见与前端需要通过 URL 的一些参数执行某些功能
2. 攻击步骤：
   1. 攻击者构造出特殊的 URL，其中包含恶意代码。
   2. 用户打开带有恶意代码的 URL。
   3. 用户浏览器接收到响应后解析执行，前端 JavaScript 取出 URL 中的恶意代码并执行。
   4. 恶意代码窃取用户数据并发送到攻击者的网站，或者冒充用户的行为，调用目标网站接口执行攻击者指定的操作。

预防方案：（防止攻击者提交恶意代码，防止浏览器执行恶意代码）

1. 对数据进行严格的输出编码：如 HTML 元素的编码，JS 编码，CSS 编码，URL 编码等等避免拼接 HTML；像 vue 的技术栈需要避免使用 v-html 指令
2. 输入验证：比如一些常见的数字、URL、电话号码、邮箱地址等等做校验判断
3. 配置 CSP，本质是建立白名单，由浏览器进行拦截，通过在 HTTP Header，即 Content-Security-Policy 字段，在服务端或者网页的 <meta> 标签中设置
   1. 比如可以设置 Content-Security-Policy: default-src 'self'; 只允许同源下的资源，不包括子域名
   2. 或者设置 Content-Security-Policy: default-src 'self' *.xxx，允许内容来自信任的域名及其子域名，加上 self 指信任的原域名的子域名
   3. Content-Security-Policy: default-src https://test.com
      该服务器仅允许通过 HTTPS 方式并仅从 test.com 域名来访问文档
4. 设置响应头中的 set-cookie 字段为 httpOnly，禁止 JavaScript 读取某些敏感 Cookie，无法通过 document.cookie 获得 cookie 内容，攻击者完成 XSS 注入后也无法窃取此 Cookie，无法获得会话 ID，sessionId。（注：有的网站会使用 Cookie 做为登录态认定，攻击者拿到后可以登录）

参考资料

1. XSS攻击-总结 - 掘金 - Tz