XSS攻击：
描述：
Cross-Site Scripting（跨站脚本攻击）简称 XSS，是一种代码注入攻击。攻击者通过在目标网站上注入恶意脚本，使之在用户的浏览器上运行。利用这些恶意脚本，攻击者可获取用户的敏感信息如 Cookie、SessionID 等，进而危害数据安全；
注入点：
1.HTML的内容或属性（因为属性包含一些事件）
2.富文本
3.javascript代码
存储型（持久）：（常见于带有用户保存数据的网站功能，如论坛发帖、商品评论、用户私信等。）
1. 恶意代码提交到目标网站的数据库；
2. 服务端将恶意代码从数据库取出，拼接在 HTML 中，浏览器执行恶意代码；
3. 恶意代码窃取用户数据并发送到攻击者的网站，或者冒充用户的行为，调用目标网站接口执行攻击者指定的操作；
反射型（非持久）：（常见于通过 URL 传递参数的功能，如网站搜索、跳转等）
1. 构造出特殊的 URL，其中包含恶意代码；
2. 网站服务端将恶意代码从 URL 中取出，拼接在 HTML 中返回给浏览器；
3. 恶意代码窃取用户数据并发送到攻击者的网站，或者冒充用户的行为，调用目标网站接口执行攻击者指定的操作；
CSRF攻击：
描述：
CSRF（Cross-site request forgery）跨站请求伪造: 诱导受害者进入第三方网站，获取用户的注册凭证，在第三方网站中，向被攻击网站发送跨站请求，因为已经获取了凭证，所以达到冒充用户对被攻击的网站执行目的。
流程：
1. 受害者登陆 a.com ,并且保留了登陆凭证（Cookie）；
2. 攻击者引诱受害者访问第三方网站 b.com ，第三方网站获得受害者的cookie;
3. b.com 向 a.com 发送请求，浏览器会默认携带Cookie,
4. a.com 收到请求并获得Cookie, 确认是受害者的，误以为受害者自己发送请求，执行了某些操作；
5. 攻击完成，在受害者不知情的情况下，让 a.com 执行了自己定义的操作；
方式：
1. get请求；例如图片地址，受害者访问了一个有 img 标签的页面，浏览器会自动向src地址发送请求，请求地址的服务器就会收到受害者的Cookie信息；
2. post请求；通常使用一个自动提交的表单；访问页面，表单自动提交；
3. 链接方式；用户点击链接，向第三方发送请求，获取受害者登陆凭证；通常在论坛中嵌入恶意链接，或者以夸张的广告方式诱导用户点击；
用不受同源影响的 script，img 或者 iframe 之类的标签加载地址，浏览器会附带上 a 站此登录用户的授权 cookie 信息
防御XSSCSRF：
1. 同源检测；服务器可通过request headers里origin和referer两个字段确定请求的来源域，攻击者设置Referrer Policy隐藏了referer，可以直接阻止；
2. 使用token; 要求所有的用户请求都携带一个攻击者无法获取到的 Token。服务器通过校验请求是否携带正确的Token防范CSRF的攻击；
3. 使用验证码；请求时要求再次输入验证码和密码之类的，打断 csrf 的进程，简单粗暴且有效；
4. 输入过滤，输入内容长度控制；(不可靠。因为一旦攻击者绕过前端过滤，直接构造请求，就可以提交恶意代码了)
5. 转义 HTML（HTML 转义是非常复杂，应当尽量避免自己写转义库，而应当采用成熟的、业界通用的转义库）
6. cookie设置 HttpOnly 和 Secure；cookie中设置了 HttpOnly 属性，禁止 JavaScript 读取敏感 Cookie；cookie中设置了Secure属性,规定只能在https协议下才能够发送到服务器；
7. csp 内容安全策略
DNS劫持:
描述：
dns: 计算机域名的英文缩写，它是由解析器和域名服务器组成的。
域名服务器: 域名转换为IP地址功能的服务器;
域名解析: 域名与IP地址之间是一对一(或者多对一)的，域名虽然便于人们记忆，但机器之间只能互相认识IP地址，它们之间的转换工作称为域名解析，域名解析需要由专门的域名解析服务器来完成，DNS就是进行域名解析的服务器；
DNS劫持: 是一种恶意攻击，DNS劫持也称为DNS重定向，通过覆盖计算机的TCP / IP设置，将个人查询重定向到域名服务器DNS。这可以通过使用恶意软件或修改服务器的设置来实现，一旦执行DNS劫持的个人控制了DNS，他们就可以使用它来将流量引导到不同的网站。
DNS劫持的四种基本类型：
1.本地DNS劫持 ：攻击者在用户的计算机上安装木马恶意软件，并更改本地DNS设置以将用户重定向到恶意站点。
2.路由器DNS劫持：许多路由器都有默认密码或固件漏洞，攻击者可以接管路由器并覆盖DNS设置，从而影响连接到该路由器的所有用户。
3.中间 DNS攻击的人：攻击者拦截用户和DNS服务器之间的通信，并提供指向恶意站点的不同目标IP地址。
4.流氓DNS服务器：攻击者攻击DNS服务器，并更改DNS记录以将DNS请求重定向到恶意站点。
DNS劫持有恶意的同时也有善意的: 善意DNS劫持:
CDN，全称为Content Delivery Network，翻译成中文便是“内容分发网络”，它的作用是接管由我们发出的请求，并将此请求分配给最通畅的缓存服务器，缓存服务器中缓存了我们要访问的网站的数据，我们的浏览器会优先下载缓存服务器中的这些数据，若此时缓存服务器中没有我们要访问的网站的数据，它便会向父层询问，直到回到源服务器访问，等到我们下一次访问这个网站时，我们就可以直接访问缓存服务器中的数据了，因为缓存服务器在将源服务器中的数据原路送到我们的手中时，它还会自己保存一份。
CDN服务本身并不提供DNS解析功能，但它依托于DNS解析，这里可以把CDN看成是对我们的请求的接管看作是一种善意的DNS“劫持”。
CDN善意劫持目的：当我们在访问互联网时，由于地理原因或者其他原因，难免会遇到一些不稳定的、访问速度慢的服务器，CDN可以让用户更加快速地浏览互联网上的内容。
CDN劫持：
描述：
出于性能考虑，前端应用通常会把一些静态资源存放到 CDN上面，例如 js 脚本和 style 文件，但是隐含了一个新的安全风险，如果攻击者劫持了 CDN，或者对 CDN 中的资源进行了污染，攻击者可以肆意篡改我们的前端页面，对用户实施攻击；
解决：
SRI：子资源完整性(SRI)是允许浏览器检查其获得的资源（例如从 CDN 获得的）是否被篡改的一项安全特性。它通过验证获取文件的哈希值是否和你提供的哈希值一样来判断资源是否被篡改;
具体原理：
给 link 标签或者 script 标签增加 integrity 属性即可开启 SRI 功能：<script type="text/javascript" src="/xxxx/aaa.js" integrity="sha256-xxx sha384-yyy" crossorigin="anonymous"></script>;
integrity 值分成两个部分，第一部分指定哈希值的生成算法（sha256、sha384 及 sha512），第二部分是经过 base64 编码的实际哈希值，两者之间通过一个短横（-）分割。integrity 值可以包含多个由空格分隔的哈希值，只要文件匹配其中任意一个哈希值，就可以通过校验并加载该资源;
crossorigin="anonymous" 的作用是引入跨域脚本，使用SRI要保证资源同域或开启跨域。如果不加此属性则表示不开启 CORS 策略;
如何使用：
通过使用webpack的html-webpack-plugin和webpack-subresource-integrity可以生成包含integrity属性script标签；
然后通过插件script-ext-html-webpack-plugin在script里注入onerror事件和onsuccess事件。onerror事件里再次请求一次数据，比较两次数据是否一致来判断是否被CDN劫持。
参考：https://juejin.im/post/5e8fe74251882573744c5fbe#heading-25