当前位置:首页 > 技术分析 > 正文内容

轻松理解什么是同源策略

ruisui883周前 (04-07)技术分析6

同源策略是浏览器的一种安全策略,用于隔离不同网站之间的资源,防止不同网站之间的资源滥用,本文将从三个部分讲解同源策略:

  • 第一点 what:什么是同源策略?
  • 第二点 why:为什么需要同源策略?
  • 第三点 how:如何解决经典的跨域问题?

0x01 什么是同源策略?

早期的互联网应用,大多只有纯文本,随着互联网的发展,网页资源越来越丰富,比如其他文档、媒体资源、cookie、javascript 命名空间等,为了能够在浏览器范围内,能够安全的进行实体交互,Netscape 工程师设计开发了 SOP(同源策略)的规则用于管理这些资源之间的关系。

说起来,同源策略就是浏览器为了不同网站之间的资源安全的访问而制定的一系列策略,关于同源策略,需要解决两个问题:

1、什么样的情况下属于同源?

首先我们要理解一个网页的不同组成部分:协议、主机、端口,比如:

https://www.xazlsec.com:443/

其中 https 为协议、www.xazlsec.com 为主机、443 为端口,认识这个之后,不同的浏览器所设置的同源规则有所差异,比如谷歌浏览器和火狐浏览器认为只有协议+主机+端口都一致的情况下才是同源,而 IE 浏览器不管端口只要协议+主机一致,则认为是同源。

下面以
https://www.xazlsec.com/dir/test.html 为基准,看看下面的 url 是否同源(以谷歌浏览器为例):

2、不同源之间的资源访问规则是什么样的?

不同源之间的资源默认是不允许相互访问的,除了以下几个特例:

  • 页面链接,比如 a 标签
  • 重定向
  • 表单提交
  • 跨域资源的引入,比如 script、img、link、iframe 等标签

同源策略定义的规则如下:

  • 每个网站都有自己的资源,比如 cookie、dom 和 Javascript 命名空间
  • 每个页面的来源都来自于 URL( 通常是协议、域名和端口)
  • 脚本在它所加载源的上下文中执行,从哪里加载资源并不重要,只有最终执行的地方才重要
  • 许多资源都是被动资源,无法访问它们所加载上下文中的对象和资源

基于这些规则,假如站点 A 是起源站:

  • 可以从源 B 加载的脚本,但是不能脚本执行是在 A 的上下文中
  • 可以从源 B 加载 CSS 文件,但是无法获取源 B 的 css 原始文件
  • 可以通过 iframe 从源 B 加载页面,但是无法通过 iframe 加载源 B 页面的 DOM 对象
  • 可以从源 B 加载图像,但是无法获取该图像的像素
  • 可以播放源 B 的视频,但是无法捕获该视频的截图

也就是有了这些规则,丰富的 web 内容才可以受到安全合理的保护,但是在实际的应用过程中,或多或少会存在跨域资源访问的情况,为了解决这类问题,出现了多种跨域资源访问的解决方案,比如 XmlHTTPRequestJSONPXDomainRequest 和 CORS。

0x02 为什么需要同源策略

要说为什么,那么假如没有同源策略会怎么样?比如:

  • cookie 是每个网站都特有的内容,用于区分不同用户的身份,假如没有同源策略,在访问任意网站时,都会携带所有浏览器保存的 cookie,一方面其他网站的身份信息会存在泄漏的风险,另一方面 cookie 值的命名会存在重复,导致身份信息不可用
  • iframe 可以加载任意网站的网页内容,假如没有同源策略,可以通过 iframe 获取任意网站的内容,如果访问的内容中包含用户的敏感信息,那么就会存在信息泄漏的风险,以这种方式伪造网站,足以以假乱真

0x03 如何解决经典的跨域问题?

前文中提到过,为了解决跨域请求资源的问题,需要使用 XmlHTTPRequestJSONPXDomainRequest 和 CORS 进行扩展。

XmlHTTPRequest

XmlHTTPRequest 是一种 HTTP 通信方法,支持资源之间的异步通信,避免每次更新内容都要刷新网页。

XmlHTTPRequest 可以向不同的源发送请求,但是无法读取响应的内容,除非同源。

JSONP

JSONP 是一种 hack 技术,并不是官方解决跨域的手段,JSONP 只能进行 GET 请求,主要利用 <script> 标签来发起请求,来达到突破浏览器同源策略的目的。

XDomainRequest

XDomainRequest 是微软在 IE8 和 IE9 中的实现,实现方式与 CORS 几乎相同。

CORS

CORS 是一套跨域资源共享机制,基于 HTTP 头实现,允许浏览器向跨源服务器,发出 XMLHttpRequest 请求,从而克服了 AJAX 只能同源使用的限制。

0x04 总结

本文算是一个科普文,了解浏览器的同源策略是怎么一回事,这个基础对于前端问题的学习至关重要,比如 xss 漏洞的利用、CSRF 漏洞的利用等。

来源:信安之路

扫描二维码推送至手机访问。

版权声明:本文由ruisui88发布,如需转载请注明出处。

本文链接:http://www.ruisui88.com/post/3309.html

标签: 同源策略
分享给朋友:

“轻松理解什么是同源策略” 的相关文章

面试官:聊聊你知道的Vue与React的区别

最近面到很多大公司的时候,小编都会碰到一个很尴尬的问题,很多大公司的技术栈都是React,但是小编学的是Vue,其实从本质上来说两者都是比较优秀的前端框架,所以有些面试官会问到Vue和React的区别。小编认真整理了一些自己所知道的Vue和React的区别,给大家分享分享。1. 模板语法 vs JS...

html5+css3做的响应式企业网站前端源码

大家好,今天给大家介绍一款,html5+css3做的响应式企业网站前端源码 (图1)。送给大家哦,获取方式在本文末尾。首页banner幻灯片切换特效(图2)首页布局简约合理(图3)关于我们页面(图4)商品列表(图5)商品详情(图6)服务介绍(图7)新闻列表(图8)联系我们(图9)源码完整,需要的朋友...

el-table内容\n换行解决办法

问题请求到的数据带有换行符 '\n'但页面展示时不换行statusRemark: "\"1、按期完成计划且准确率100%,得100分;\n2、各项目每延误1天,扣1分;每失误1次或者员工投诉1次,扣3分,失误层面达到公司级影响较大的,该项绩效分数为0\"\n&...

2024最新版:前端性能优化方案汇总

前端训练营:1v1私教,终身辅导计划,帮你拿到满意的 offer。 已帮助数百位同学拿到了中大厂 offer。欢迎来撩~~~~~~~~Hello,大家好,我是 Sunday。前端性能优化一直是很多同学非常关注的问题,在日常的面试中也是经常会被问到的点。所以今天咱们就花一点时间来了解一下2024最新的...

多项修正 尼康D4s发布最新1.10版固件

尼康公司与2014年8月27日发布了D4s的最新固件,固件版本号为C:1.10。这次固件升级,主要解决了一些BUG,并且对拍摄菜单与相机操作做了一定调整。下面是本次新固件的具体信息:尼康发布D4s最新C固件 1.10版对C固件升级到1.10版所作的修改:当选定运动VR模式并换上 AF-S 尼克尔 4...

三勾商城(java+vue3)微信小程序商城+SAAS+前后端源码

项目介绍本系统功能包括: 前台展示+后台管理+SAAS管理端,包括最基本的用户登录注册,下单, 购物车,购买,结算,订单查询,收货地址,后台商品管 理,订单管理,用户管理等等功能,小伙伴一起来看看吧。三勾小程序商城基于springboot+element-ui+uniapp打造的面向开发的小程序商城...