复习前端：前端安全

随着 Web 的发展，现代 Web 应用程序也在迅速变化。现在，前端代码与后端代码承担几乎相同的责任，甚至更多。为了安全地完成所有事情，需要一个更好的客户端代码安全模型。本文将复习常见安全问题、攻击类型和针对它们的预防措施。

什么是 CSRF 攻击？

CSRF 攻击旨在诱骗用户提交表单，最终执行与用户希望执行的操作不同的操作。

CSRF 代表跨站请求伪造（Cross-site request forgery），如果黑客在网站上放置了指向另一个网站的外部链接，例如 www.xxx.com/api，默认情况下，如果用户已登录该网站，浏览器将使用 xxx.com 的 cookie 访问该网站。而如果网站没有防御 CSRF 攻击，服务器就会认为是用户自己调用了这个接口并进行了相关操作，从而导致账号被劫持。

如何防御 CSRF 攻击

• 验证 Token：浏览器请求服务器时，服务器返回一个 Token，每次请求都需要带上 Token 和 cookie 才算合法请求

• 验证 Referer：通过验证请求头的 Referer 来验证源站，但是请求头容易伪造

• 验证同源网站： 为cookie设置SameSite，这样cookie就不会随着跨域请求一起发送，但是浏览器兼容性不同

什么是 XSS 攻击

XSS 攻击是最大和最危险的攻击形式之一。它们的制作方式是将代码注入 Web 应用程序，最终在最终用户访问时执行恶意操作。

XSS 全称（Cross Site Scripting），是指利用网页开发过程中留下的漏洞，向网页中注入恶意指令代码，使用户加载并执行攻击者恶意创建的网页程序。比如在评论区植入 JS 代码。该代码在用户进入评论页面时执行，导致页面被植入广告，账号信息被盗。

XSS 攻击的类型有哪些

存储型：即攻击存储在服务器上，在评论区插入攻击脚本很常见。如果脚本存储在服务器上，所有看到相应评论的用户都会受到攻击。反射型：攻击者在 URL 中混入脚本，服务器接收到 URL 并将恶意代码作为参数取出，拼接回 HTML。浏览器在解析 HTML 后执行恶意代码。DOM 类型：在 URL 中写入攻击脚本，诱导用户点击 URL。如果 URL 被解析，攻击脚本将被执行。与前两者的主要区别是 DOM 类型的攻击不通过服务器。

如何防御 XSS 攻击

• 输入检查：转义或过滤 <script><iframe> 输入内容中的标签

• 设置 httpOnly：很多 XSS 攻击目标都是窃取用户 cookie 伪造认证，设置该属性可以防止 JS 获取 cookie

• 开启 CSP （Content Security Policy）：即开启白名单，可以防止加载运行白名单外的资源。使用内容安全策略是一种有效的 XSS 攻击预防形式。它需要一个 HTTP 标志来通知浏览器有关可以信任的来源，并作为 iFrame 包含在 Web 应用程序中。在 HTTP 标头中启用 CSP 是一种在很大程度上防止 XSS 攻击的有效方法。当与 X-Frame-Options 结合使用时，它通常可以提供针对 XSS 攻击的可靠防御。

总结

Web 应用程序的安全是前端开发需要考虑的问题，随着应用程序每天面临多种威胁，处理从自动机器人到有针对性的攻击的一切，保持应用程序前端的安全从未如此重要。