① 阅读
https://juejin.cn/post/6844903502968258574
② 掘金小册前端面试之道/14-安全防范知识点.html
安全防范知识点
这一章我们将来学习安全防范这一块的知识点。总的来说安全是很复杂的一个领域,不可能通过一个章节就能学习到这部分的内容。在这一章节中,我们会学习到常见的一些安全问题及如何防范的内容,在当下其实安全问题越来越重要,已经逐渐成为前端开发必备的技能了。
一 XSS
涉及面试题:什么是 XSS 攻击?如何防范 XSS 攻击?什么是 CSP?
XSS
(Cross Site Script) 中文名为跨站脚本攻击
。
(人们经常将跨站脚本攻击(Cross Site Scripting)缩写为CSS,但这会与层叠样式表(Cascading Style Sheets, CSS)的缩写混淆。因此有人将跨站脚本攻击缩写为XSS。如果你听到有人说 “我发现了一个XSS漏洞”,显然他是在说跨站脚本攻击。)
XSS 简单点来说,就是攻击者想尽一切办法将可以执行的代码注入到网页中。
XSS 可以分为多种类型,但是总体上我认为分为两类:持久型和非持久型。
持久型也就是攻击的代码被服务端写入进数据库中,这种攻击危害性很大,因为如果网站访问量很大的话,就会导致大量正常访问页面的用户都受到攻击。
举个例子,对于评论功能来说,就得防范持久型 XSS 攻击,因为我可以在评论中输入以下内容
这种情况如果前后端没有做好防御的话,这段评论就会被存储到数据库中,这样每个打开该页面的用户都会被攻击到。
非持久型相比于前者危害就小的多了,一般通过修改 URL 参数的方式加入攻击代码,诱导用户访问链接从而进行攻击。
举个例子,如果页面需要从 URL 中获取某些参数作为内容的话,不经过过滤就会导致攻击代码被执行
<!-- http://www.domain.com?name=<script>alert(1)</script> -->
<div>{{name}}</div>
但是对于这种攻击方式来说,如果用户使用 Chrome 这类浏览器的话,浏览器就能自动帮助用户防御攻击。但是我们不能因此就不防御此类攻击了,因为我不能确保用户都使用了该类浏览器。
对于 XSS 攻击来说,通常有两种方式可以用来防御。
1. 转义字符
首先,对于用户的输入应该是永远不信任的。最普遍的做法就是转义输入输出的内容,对于引号、尖括号、斜杠进行转义
function escape(str) {
str = str.replace(/&/g, '&')
str = str.replace(/</g, '<')
str = str.replace(/>/g, '>')
str = str.replace(/"/g, '&quto;')
str = str.replace(/'/g, ''')
str = str.replace(/`/g, '`')
str = str.replace(/\//g, '/')
return str
}
通过转义可以将攻击代码 <script>alert(1)</script>
变成
// -> <script>alert(1)</script> escape('<script>alert(1)</script>')
但是对于显示富文本来说,显然不能通过上面的办法来转义所有字符,因为这样会把需要的格式也过滤掉。对于这种情况,通常采用白名单过滤的办法,当然也可以通过黑名单过滤,但是考虑到需要过滤的标签和标签属性实在太多,更加推荐使用白名单的方式。
const xss = require('xss')
let html = xss('<h1 id="title">XSS Demo</h1><script>alert("xss");</script>')
// -> <h1>XSS Demo</h1><script>alert("xss");</script>
console.log(html)
以上示例使用了 js-xss
来实现,可以看到在输出中保留了 h1 标签且过滤了 script
标签。
2. CSP(Content Security Policy, 内容安全策略)
CSP 本质上就是建立白名单,开发者明确告诉浏览器哪些外部资源可以加载和执行。我们只需要配置规则,如何拦截是由浏览器自己实现的。我们可以通过这种方式来尽量减少 XSS 攻击。
通常可以通过两种方式来开启 CSP:
- 设置 HTTP Header 中的
Content-Security-Policy
- 设置 meta 标签的方式
<meta http-equiv="Content-Security-Policy">
这里以设置 HTTP Header 来举例
-
只允许加载本站资源
Content-Security-Policy: default-src ‘self’
-
只允许加载 HTTPS 协议图片
Content-Security-Policy: img-src https://*
-
允许加载任何来源框架
Content-Security-Policy: child-src 'none'
当然可以设置的属性远不止这些,你可以通过查阅 文档 的方式来学习,这里就不过多赘述其他的属性了。
对于这种方式来说,只要开发者配置了正确的规则,那么即使网站存在漏洞,攻击者也不能执行它的攻击代码,并且 CSP 的兼容性也不错。
二 CSRF
涉及面试题:什么是 CSRF 攻击?如何防范 CSRF 攻击?
CSRF
(Cross-site request forgery) 中文名为跨站请求伪造
。原理就是攻击者构造出一个后端请求地址,诱导用户点击或者通过某些途径自动发起请求。如果用户是在登录状态下的话,后端就以为是用户在操作,从而进行相应的逻辑。
举个例子,假设网站中有一个通过 GET
请求提交用户评论的接口,那么攻击者就可以在钓鱼网站中加入一个图片,图片的地址就是评论接口
<img src="http://www.domain.com/xxx?comment='attack'"/>
那么你是否会想到使用 POST 方式提交请求是不是就没有这个问题了呢?其实并不是,使用这种方式也不是百分百安全的,攻击者同样可以诱导用户进入某个页面,在页面中通过表单提交 POST
请求。
如何防御
防范 CSRF 攻击可以遵循以下几种规则:
- Get 请求不对数据进行修改
- 不让第三方网站访问到用户 Cookie
- 阻止第三方网站请求接口
- 请求时附带验证信息,比如验证码或者 Token
SameSite
可以对 Cookie 设置 SameSite 属性。该属性表示 Cookie 不随着跨域请求发送,可以很大程度减少 CSRF 的攻击,但是该属性目前并不是所有浏览器都兼容。
验证 Referer
对于需要防范 CSRF 的请求,我们可以通过验证 Referer 来判断该请求是否为第三方网站发起的。
Token
服务器下发一个随机 Token,每次发起请求时将 Token 携带上,服务器验证 Token 是否有效。
三 点击劫持
涉及面试题:什么是点击劫持?如何防范点击劫持?
点击劫持是一种视觉欺骗的攻击手段。攻击者将需要攻击的网站通过 iframe
嵌套的方式嵌入自己的网页中,并将 iframe
设置为透明,在页面中透出一个按钮诱导用户点击。
对于这种攻击方式,推荐防御的方法有两种。
1. X-FRAME-OPTIONS
X-FRAME-OPTIONS
是一个 HTTP 响应头,在现代浏览器有一个很好的支持。这个 HTTP 响应头 就是为了防御用 iframe 嵌套的点击劫持攻击。
该响应头有三个值可选,分别是
DENY
,表示页面不允许通过iframe
的方式展示SAMEORIGIN
,表示页面可以在相同域名下通过 iframe 的方式展示ALLOW-FROM
,表示页面可以在指定来源的 iframe 中展示
2. JS 防御
对于某些远古浏览器来说,并不能支持上面的这种方式,那我们只有通过 JS 的方式来防御点击劫持了。
<head>
<style id="click-jack">
html {
display: none !important;
}
</style>
</head>
<body>
<script>
if (self == top) {
var style = document.getElementById('click-jack')
document.body.removeChild(style)
} else {
top.location = self.location
}
</script>
</body>
//top指向最顶层框架的window对象,self指向当前框架的window对象。
//如果网页中没有iframe,则top和self是同一个值,所以这段代码可以防止自己的网页被别人用iframe的方式嵌入到其它网页中去。
以上代码的作用就是当通过 iframe 的方式加载页面时,攻击者的网页直接不显示所有内容了。
四 中间人攻击
涉及面试题:什么是中间人攻击?如何防范中间人攻击?
中间人攻击是攻击方同时与服务端和客户端建立起了连接,并让对方认为连接是安全的,但是实际上整个通信过程都被攻击者控制了。攻击者不仅能获得双方的通信信息,还能修改通信信息。
通常来说不建议使用公共的 Wi-Fi,因为很可能就会发生中间人攻击的情况。如果你在通信的过程中涉及到了某些敏感信息,就完全暴露给攻击方了。
当然防御中间人攻击其实并不难,只需要增加一个安全通道来传输信息。HTTPS 就可以用来防御中间人攻击,但是并不是说使用了 HTTPS 就可以高枕无忧了,因为如果你没有完全关闭 HTTP 访问的话,攻击方可以通过某些方式将 HTTPS 降级为 HTTP 从而实现中间人攻击。
五 小结
在这一章中,我们学习到了一些常见的前端安全方面的知识及如何防御这些攻击。但是安全的领域相当大,这些内容只是沧海一粟,如果大家对于安全有兴趣的话,可以阅读 这个仓库的内容 来学习和实践这方面的知识。
③ 一些面试题
100.什么是xss攻击?如何防范xss攻击?
xss指的是跨站脚本攻击,是一种代码注入攻击。攻击者通过在网站中注入恶意脚本,使之在浏览器上运行,从而盗取用户的信息如cookie等。
xss的本质是因为网站对恶意代码没有进行过滤,与正常代码混合在一起了,浏览器没办法分辨哪些脚本是可信的,从而导致恶意代码的执行。
xss一般分为存储型,反射型和DOM型。
存储型指的是恶意代码提交到网站的数据库中,当用户请求数据时,服务器将其拼接为HTML后返回给了用户,从而导致恶意代码的执行。
反射型指的是攻击者构建了特殊的URL,当服务器接受到请求后,从URL中获取数据,拼接到HTML后返回,从而导致了恶意代码的执行。
DOM型指的是xss代码并不需要服务器的参与,触发xss靠的是浏览器的DOM解析,完全是客户端的事情
防范xss的总体思路:对输入进行过滤,对输出进行编码,通过设置 set-cookie httpOnly禁止脚本执行cookie。也可以设置只有在https协议下才可以发送cookie。
还有一些方式,比如使用CSP,CSP的本质是建立一个白名单,告诉哪些浏览器外部资源可以加载和执行,从而防止恶意代码的注入攻击。
还可以对一些敏感信息进行保护,比如cookie使用http-only,使得脚本无法获取。也可以使用验证码,避免脚本伪装成用户执行一些操作。
101.什么是CSP?
CSP指的是内容安全策略,它的本质是创建一个白名单,告诉浏览器哪些外部资源可以加载和执行。我们只需要配置规则,如何拦截由浏览器自己来实现。
通常由两种方法来开启CSP,一种设置HTTP首部Context-Security-Policy,一种是设置meta标签的方法<meta http-equiv="content-Security-Policy">
102.什么是CSRF攻击?如何防范CSRF攻击?
CSRF攻击指的跨站请求伪造攻击,攻击者诱惑用户进入一个第三方网站,然后该网站向被攻击网站发送跨站请求。如果用户在被攻击网站的保存了登录状态,那么攻击者就可以利用这个登录状态,绕过后台的用户验证,冒充用户向服务器执行一些操作。
CSRF攻击的本质是利用了cookie会在同源请求中携带发送给服务器的特点,以此来实现用户的冒充。
一般的CSRF攻击类型由三种:
1.GET类型的CRSF攻击,比如一个网站中的一个img标签里面构建一个请求,当用户打开这个页面时就会自动发送提交。
2.POST类型的CRSF攻击,比如说创建一个表单,然后隐藏它,自动提交这个表单。
3.链接类型的CSRF攻击,比如说在a标签的href属性里构建一个请求,然后诱导用户去点击。
CSRF可以用以下几种方法来防护:
1.同源检测的方法,服务器根据http请求头中的origin或者referer信息来判断请求是否为允许访问的站点。
2.使用CSRF Token来进行验证,服务器向用户返回一个随机数Token,当网站再次发送请求的时候,在请求参数中加入服务器端返回的token,然后服务器对这个token进行验证。这种方法解决了使用cookie单一验证的方法,可能会被冒用的问题,但是这种方法存在一个缺点就是,我们需要给网站中所有的请求都添加上这个token,操作比较繁琐。还有一个问题是一般不会只有一台网站服务器,如果我们的请求经过负载平衡转移到其他的服务器,但是这个服务器的session中没有保存这个token的话,就没有办法验证了。这种情况我们可以通过token的构建方式来解决。
3.使用双重Cookie验证的办法,服务器在用户访问页面时,向请求域名注入一个Cookie,内容为随机字符串,然后当用户向服务器发送请求的时候,cookie取出这个字符串,添加到URL参数中,然后服务器通过对cookie中的数据进行比较,来继续验证
4.使用在设置cookie的时候设置Samesite,限制cookie不能作为第三方使用,从而避免被攻击者利用。Samesite一共有两种模式,一种是严格模式,在严格模式下cookie在任何情况下都不能作为第三方Cookie使用,在宽松模式下,cookie可以被请求是GET请求,且会发送页面跳转的请求所使用。
103.什么是Samesite Cookie属性
sameSite代表同站Cookie,避免Cookie被第三方所利用,将sameSite设置为严格模式,表示这个Cookie在任何情况下都不可能作为第三方Cookie。
宽松模式,如果这个请求是GET请求,并且这个请求改变了当前页面或者打开了新的页面,那么可以作为第三方Cookie,其余情况下都不能作为第三方Cookie。
104.什么是点击挟持?如何防范点击挟持?
点击挟持是一种视觉欺骗的手段,攻击者将需要攻击的网站通过iframe嵌套的方式嵌入自己的网页中,并将iframe设置为透明,在页面中诱导用户点击。
我们可以在http相应的头中设置x-frame-options来防止iframe嵌套的点击挟持。通过不同的值,可以规定页面在特定的一些情况下才能作为iframe来使用
105.SQL注入攻击?
SQL注入攻击指的是攻击者在HTTP请求中注入恶意的SQL代码,服务器使用参数构建数据库SQL命令时,恶意的SQL被一起构造,破坏原有的SQL结构,并在数据库中执行,达到编写程序预料之外结果