同源策略
何为同源
同源策略指的是协议、域名、端口都相同。
同源策略的目的
如果没有同源策略,当我们打开一个银行的网站的时候,如果这时候打开了另外一个恶意网站,恶意网站将会做很多事情,比如:
- 修改银行站点的DOM、CSSDOM等
- 在银行站点内部插入javascript脚本
- 劫持用户登陆的用户名和密码
- 读取银行网站的cookie、indexDB等数据
- 伪造转账请求等 由此课件,如果不加限制,网络世界将变得十分混乱。所以同源策略的目的是:保护用户信息的安全,防止网站恶意的窃取数据。
限制内容
虽然同源策略的限制都很有必要,但是有的时候会很不方便,合理的用途也会收到影响。那么如何合理的规避这些限制呢?下面我们分析一下。
- 数据层面:cookie、localStorage、IndexDB无法读取
- cookie:cookie是写入浏览器的一小段信息,但是只有同源才能共享,但是对于两个只有二级域名不同的网页,可以通过document.domain来设置
- LocalStorage和IndexDB:使用postMessage
- Dom层面:Dom无法获得
- postMessage
- 网络层面:Ajax请求无法发送
- JSONP:利用
<script>
标签没有跨域限制的“漏洞”。网页通过添加一个<script>
标签,向服务端请求json数据,服务端接收到请求之后,将数据放在一个指定名字的回调函数里返回来。 - CORS:全称是跨域资源共享,实现CORS通信的关键是服务器。只要服务器实现了CORS接口,就可以跨源通信。
- JSONP:利用
XSS 攻击
什么是XSS攻击
XSS(Cross Site Scripting)全称就是跨站脚本攻击。
我们的页面中是可以引用第三方资源的,黑客往HTML或者DOM中注入了恶意脚本,从而在用户浏览页面的时候利用注入的恶意脚本对用户实施攻击。最开始这种攻击是通过跨域来实现的,但是发展到现在之后,跨域已经不是唯一的方式了,但是XSS这个名字却一直沿用至今。
恶意脚本会导致什么问题呢?
- 窃取用户信息:js可以通过document.cookie获取cookie信息,就可以在其他电脑上模拟用户的登陆。
- 监听用户行为:可以使用addEventListener来监听事件,比如键盘输入身份证号
- 修改dom:伪造假的登陆窗口
- 在页面内生成浮窗广告,影响用户体验
恶意脚本常见的注入方式
- 存储型XSS攻击
- 利用网站漏洞输入一段js代码,并将此代码存入到数据库中。用户向网站请求包含了恶意js脚本的页面。恶意脚本将用户的cookie等信息窃取。
- 反射型XSS攻击
- 脚本代码加入到url参数中,比如当打开
http://localhost:3000/?xss=<script>alert('你被xss攻击了')</script>
这段URL时,页面会显示弹框。黑客可能会利用此漏洞,诱导我们点击QQ或者邮件的恶意连接。
- 脚本代码加入到url参数中,比如当打开
- 基于DOM的XSS攻击:在 Web 资源传输过程或者在用户使用页面的过程中修改 Web 页面的数据。
如何阻止XSS攻击呢?
- HttpOnly:由于很多XSS攻击都是来盗用Cookie的,因此还可以通过使用HttpOnly属性来保护我们Cookie的安全。
- 通过服务器对输入的内容进行过滤或者转码
- 充分利用CSP
CSRF攻击
什么是CSRF攻击?
CSRF又称跨站请求伪造,是指黑客引诱用户点开黑客的网站,利用用户的登陆状态发起跨站请求,简单来讲,CSRF攻击就是黑客利用了用户的登陆状态,并通过第三方的站点来做一些坏事。
如何阻止CSRF攻击呢?
- Cookie的SameSite属性:具体讲解可以观看cookie的讲解。对于防范CSRF攻击,我们可以针对实际情况将一些关键的Cookie设置为Strict或者Lax模式
- 验证请求的来源站点:在服务器端验证请求来源的站点
- CSRF Token:在浏览器向服务器发起请求时,服务器生成一个 CSRF Token。在浏览器端如果要发起转账的请求,那么需要带上页面中的 CSRF Token,然后服务器会验证该 Token 是否合法。