如何预防 XSS 攻击 和 XSRF 攻击

常见的 web 前端攻击方式有哪些

• XSS 跨站请求攻击

• XSRF 跨站请求伪造

---

XSS攻击举例

• 一个博客网站（请访问正规网站，放心，CSDN应该是安全的），作者发表了一篇博客，其中嵌入了<script> 脚本
• 脚本内容：获取 cookie，发送到作者的服务器（设置服务器配合跨域）
• 发布这篇博客，有人查看他，作者轻松收割访问者的 cookie

<script>
    alert(document.cookie)
</script>

---

XSS预防

预防工作的实施者是：网站的开发人员

• 替换特殊字符，如 < 变为 &lt; > 变为 &gt;
• <script> 就变成了&lt;script&gt; ，直接作为文本显示（浏览器会自动转义显示<script>），而不会作为文本执行
• 前端要替换，后端也要替换，都做总不会有错

开发者做字符转义工作可以利用npm的一个工具 xss - npm (npmjs.com)

---

XSRF 攻击

场景举例（简单举例，有的老）

• 你正在访问购物网站，看中了某个商品，商品 id 是100
• 付费接口是 xxx.com/pay?id=100，但没有任何验证（登录状态，购物网站服务器已经验证过个人信息，点击即可购买）
• 攻击者看中了一个商品，id是200
• 攻击者给你发送了一封电子邮件，邮件标题很吸引人
• 但邮件正文隐藏着<img src=xxx.com/pay?id=200>         注意！！<img>是支持跨域的
• 你一查看邮件，就帮忙购买了 id=200 的商品         购物网站处于登录状态，个人信息是在的。也不一定是帮他买，总归是给购物网站增加了营业额

预防XSRF攻击

• 使用 post 接口 （post方式下，img 进行跨域是需要服务端支持的）
• 增加验证方式，密码验证、指纹认证、人脸识别等