常见的前端攻击手段及预防方案

XSS 跨站脚本攻击

• 手段：将 JS 代码插入到网页内容中，渲染时执行 JS 代码；
• 预防：替换特殊字符。eg：

str.replaceAll('<','&lt').replace('>','&gt');

• 补充说明： vue 和 react 默认可以避免 XSS 攻击，除非 vue 使用 v-html，react 使用 dangerouslySetInnerHTML()；

CSRF 跨站请求伪造

• 手段：用户在 A 网站登录注册，浏览器自动写入 cookie，黑客诱导用户去访问 B 网站，并在 B 网站请求 A 网站的接口，此时 A 网站 cookie 已经注入，认为是用户自己操作，常见场景：诱导购买、诱导关注等；
• 预防：严格的跨域限制 + 验证码校验；

点击劫持

• 手段：界面上蒙一个透明的 iframe，诱导用户去点击；
• 预防：让 iframe 不能跨域加载：

// 网页在当前自己的域名可以加载 iframe，不允许第三方 iframe 加载自己的网页
x-Frame-options:sameOrigin; 

DDos 分布式拒绝服务

• 手段：分布式的、大规模的流量访问，使服务器瘫痪；
• 预防：软件层面不好做，硬件预防；

SQL 注入（早期前后端不分离使用的手段）

• 手段：黑客提交内容时写入 SQL 语句，破坏数据库；
• 预防：处理输入的内容，替换特殊字符；

写在最后

安全问题不是前端 or 后端一方的责任，需要两端都处理！！！