前端安全之XSS与CSRF攻击

在前端，最常见的攻击就是XSS和CSRF了，下面最两种攻击进行总结以下。

XSS（Cross-Site Scripting）：跨站脚本攻击，是一种代码注入攻击。

• 攻击者通过在目标网站上注入恶意脚本，使之在用户的浏览器上运行。利用这些恶意脚本，攻击者可获取用户的敏感信息，如cookie，sessionId等，危害数据安全。
• 为了和CSS区分开，所以将第一个字母变为X，所以叫做XSS。
• XSS的类型（三类）：

1）存储型XSS：攻击者将恶意代码提交到目标网站的数据库中，当用户发出请求时，服务端将恶意代码从数据库取出，返回给用户，用户浏览器接收到响应后解析执行，混在其中的恶意代码也被执行。这种攻击常见于存储数据的网站功能，如论坛发帖，商品评论，用户私信等。

2）反射型XSS：攻击者构造出特殊的包含恶意代码的URL，用户打开URL时，网站服务器将恶意代码从URL中取出，拼接在HTML中返回，浏览器执行包含了恶意代码。这种攻击常见于通过URL传递参数的功能，如网站搜索，跳转等。

3）DOM型XSS：攻击者构造出特殊的包含恶意代码的URL，用户打开URL时，恶意代码执行，攻击者窃取用户数据并发送到攻击者的网站，或者冒充用户行为。

• 三种类型的区别：

1）存储型和反射型的区别：存储型XSS的恶意代码保存在数据库中；反射型XSS的恶意代码保存在URL中；

2）DOM型跟前两中类型的区别：DOM型XSS取出和执行恶意代码都由浏览器端完成，属于前端JS自身的安全漏洞，其他两种属于服务端的安全漏洞。

•  XSS攻击的防范

1）输入过滤，不要相信用户的输入；

2）对HTML（特殊字符：如& < > " ' /等）进行充分转义；

3） 在使用.innerHTML、.outerHTML、document.write() 时要特别小心，不要把不可信的数据作为 HTML 插到页面上，而应尽量使用 .textContent、.setAttribute() 等；

4）开启CSP（Content-Security-Policy）:CSP是网页安全政策的缩写，CSP网页的开发者可以控制整个页面的外部资源的内容来源。

<meta http-equiv="Content-Security-Policy" content="">

 

CSRF（Cross Site Request Forge）:跨站请求伪造

• 攻击者诱导受害者进入第三方网站，在第三方网站中，向被攻击者发送跨站请求。利用受害者在被攻击网站已经获取的注册凭证，绕过用户后台的验证，达到冒充用户的目的。
• 攻击一般发生在第三方网站，而不是被攻击的网站。被攻击的网站无法防止攻击发生。
• 整个过程攻击者不能获取到用户登录的凭证，而是“冒用”。
• CSRF通常是跨域的，因为外域通常更容易被攻击者掌控。
• CSRF的防范：

1）阻止不明外域的访问：同源检测，refer检查；

2）服务端就进行CSRF验证，可以在客户端页面增加随机数，比如输入验证码等或者token验证；

3）在HTTP头中自己定义属性并验证

 

参考文档：前端安全系列（一）：如何防止XSS攻击？

                  前端安全系列（二）：如何防止CSRF攻击？