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

XSS 跨站请求攻击

场景

一个博客网站，发表一篇博客，其中嵌入 script 脚本，脚本内容：获取 cookie ，发送到我的服务器（服务器配合跨域），发布这篇博客，有人看他，我轻松收割访问者 cookie

<p>文字内容</p>
<script>
    alert(document.cookie)
</script>

预防 XSS

• 替换特殊字符，如 < 变为 <， > 变为 &gt; <script> 变为 <script> ，直接显示，不会作为脚本执行
• 前端要替换，后端也要替换

插件：npm i xss

CSRF 跨站请求伪造

场景

你正在购物，看中了某个商品，商品 id 是100，付费接口是 xxx.com/pay?id=100，但没有任何验证；我是攻击者，我需要其他人购买id 是200的商品刷销量，。我向你发送一份电子邮件，邮件标题很吸引人，但这个问题隐藏着 <img src='xxx.com/pay?id=200'>，你查看邮件，就购买了id是200的商品。

预防

• 使用post接口
• 增加验证，例如密码，验证码等