定义:

后果

比如黑客可以通过恶意代码,拿到用户的cookie就可以去登陆了

分类

存储型

攻击者把恶意脚本存储在目标网站的数据库中(没有过滤直接保存)，当用户访问这个页面时，恶意脚本会从数据库中被读取并在用户浏览器中执行。比如在那些允许用户评论的网站, 用户越多,中招的越多

流程

反射型

攻击者通过构造恶意链接，诱使用户点击，恶意脚本随请求发送到目标网站服务器，服务器查看了链接以后以为用户要检索某些信息，并没有进行额外的过滤,服务器的数据库也不需要保存什么信息,就只是返回了对应的结果,浏览器只是把结果呈现在页面.

例子

反射型一般是利用网页的检索功能, 你输入的检索信息会显示在页面中
如果url加一个script标签, 也就注入网页成为内容的一部分,浏览器就会去执行这个js代码

DOM型

攻击者在url中插入恶意代码,前端直接从url中获取恶意代码并且输出到页面,导致恶码被执行, 跟反射型很像,但浏览器并未把恶意代码发送给服务器, 是前端直接执行的. 比如url中的hash部分是不会发送给服务器的,即url前面的部分服务器照常请求,也就是浏览器的渲染分了两步走,给黑客留下可以攻击的漏洞
“#”部分的更改不会重新发送请求, 此页面将hash注入到了页面,黑客就可以利用这个点往页面注入内容, 比如获取cookie并发送等

三者区别

DOM 型取出和执⾏恶意代码由浏览器端完成，不涉及将恶意脚本发送到服务器,属于前端JavaScript 自身的安全漏洞，而其他两种属于服务端的安全漏洞。

应对策略

1. 对用户输入进行严格的验证和过滤

• 前端验证

1. 通过h5表单属性,如pattern正则表达式模式,type字段的属性进行限制等;
2. js中的动态验证: 通过对表单输入变化或者提交事件添加addevenlistener监听,如限制用户输入的长度

• 服务端验证
  无论客户端是否验证，都必须在服务器端再次验证输入。
  可以使用后端语言的内置函数或正则表达式进行验证。

2. 输入过滤

1. 用户输入显示在网页上之前,将其中的特殊字符（如 <, >, &, ', "）转义，防止其被解释为脚本, 防止 XSS 攻击。
2. URL 编码: 将 URL 中的特殊字符转换为 % 加上两位十六进制数的形式，以确保 URL 安全解析

let userInput = 'hello world';
let encodedInput = encodeURIComponent(userInput);
console.log(encodedInput);  // hello%20world

3. 内容安全策略CSP

在网关通过HTTP 响应头设Content-Security-Policy或者HTML 标签设置，本质是建立一个白名单，告诉浏览器哪些外部资源可以加载和执行，从而防止恶意代码的注入攻击。
CSP 通过指定允许的资源来源，阻止了恶意脚本、样式表、图像等资源的加载。例如，通过配置 script-src，可以只允许从可信任的域名加载脚本，任何来自其他域名的脚本都会被阻止

4. http-only

黑客本质是想获取cookie拿到客人信息, 而Cookie有一个http-only属性，表示只能被http请求携带,不能通过客户端js脚本访问cookie,

5. textContent代替innerHTML(反射型)

所以前端应该避免使用innerHTML、document.write, v-html、dangerouslySetInnerHTML 把不可信的数据作为 HTML 插到页面上，而应尽量使用 textContent 等。
textContent 属性用于设置或获取一个元素的文本内容。与 innerHTML 不同，textContent 仅处理文本，不会解析 HTML 标签。

参考视频:
https://www.bilibili.com/video/BV1rg411v7B8/?spm_id_from=333.788&vd_source=bb7c78c7981f6b653a3daf2f416312cb
https://www.bilibili.com/video/BV1ww411p7DG/?spm_id_from=pageDriver&vd_source=bb7c78c7981f6b653a3daf2f416312cb