常见攻击方式及防范措施

前端安全性是现代 Web 应用程序中不可忽视的重要方面。在网络环境中，前端代码容易受到各种攻击，比如 XSS（跨站脚本攻击）、CSRF（跨站请求伪造）、点击劫持等。为了保护用户的数据和确保应用程序的安全，开发者需要采取一系列防范措施。本文将介绍常见的前端安全攻击方式，并提供相应的防范措施。

1、XSS（跨站脚本攻击）
XSS是一种常见的Web攻击，攻击者通过注入恶意脚本来篡改网页的内容，盗取用户信息等

攻击方式：
存储型：攻击者将恶意脚本存储到服务器上，当用户访问包含此脚本的网页时候，恶意脚本将被执行
反射型XSS: 攻击者将恶意脚本作为参数附加到URL中，当用户执行包好恶意脚本的链接时，恶意脚本被执行
DOM型XSS: 攻击者通过修改DOM来动态插入恶意代码，操作DOM时执行恶意脚本

案例：
场景：你点外媒时候，商家让你填写备注，比如不要辣椒等
攻击：黑客在里面备注，
如果商家不注意不检查备注内容，可能直接向他转账成功了

防御措施：
1、输入验证和输出编码：对输入的内容进行验证，确保输出的内容正确性和合法性。比如对’<‘，’>'进行转义成 <，> 等
2、使用 CSP（内容安全策略）：CSP 可以指定页面允许加载的资源来源，限制脚本的执行，从而减少 XSS 攻击的可能性
3、HttpOnly 和 Secure Cookie：使用 HttpOnly 和 Secure 标志来设置 Cookie，限制客户端脚本访问 Cookie，增加安全性。

2、CSRF（跨站请求伪造）
CSRF 攻击是一种利用用户身份在另一个网站上执行操作的攻击方式。

攻击方式：攻击者通过伪造请求，在用户访问另一个网站时候，执行攻击目标站点操作，从而修改用户信息、发起转账等。

案例：
场景：你登录了微博（保持登录状态），然后不小心点了一个 “抽奖链接”，这个链接其实是黑客伪造的。
攻击：这个链接可能含有一个自动提交表单，可以获取你的用户信息，从而达到篡改你的用户信息或者实现自动转账功能

防范措施：
1、CSRF Token：使用 CSRF Token 来验证请求的合法性，确保请求是来自本站的合法请求
2、同源策略：遵循同源策略，确保不同域名的页面不能相互访问，从而阻止 CSRF 攻击

3、点击劫持
点击劫持是通过透明覆盖目标网页的方式，引诱用户在不知情的情况下点击恶意链接或者按纽

攻击方式：攻击者将目标网页放置在透明的iframe中，并在上面覆盖伪装成目标网页的恶意页面，用户看似在点击无害的页面，实际在点击恶意页面

案例：
场景：你在柜台签收快递，但黑客在签字板上覆盖了一层透明的玻璃，你以为签收的是快递，实际是其他的操作
攻击方式：网页上的按钮被透明的iframe覆盖，你以为签收的是快递，实际是贷款合同

防范措施：
1、X-Frame-Options 头：通过设置 X-Frame-Options 头，可以防止网页被嵌入到 iframe 中
2、JavaScript 防御：使用 JavaScript 来防止网页被嵌套到 iframe 中，比如判断是否处于顶层窗口