跨域的根本原因:JavaScript 的同源策略
摘自:https://blog.csdn.net/liubo2012/article/details/43148705
同源策略限制了一个源(origin)中加载文本或脚本与来自其它源(origin)中资源的交互方式。
同源定义
如果两个页面拥有相同的协议(protocol),端口(如果指定),和主机,那么这两个页面就属于同一个源(origin)。
下表给出了相对http://store.company.com/dir/page.html同源检测的示例:
URL | 结果 | 原因 |
---|---|---|
http://store.company.com/dir2/other.html |
成功 | |
http://store.company.com/dir/inner/another.html |
成功 | |
https://store.company.com/secure.html |
失败 | 协议不同 |
http://store.company.com:81/dir/etc.html |
失败 | 端口不同 |
http://news.company.com/dir/other.html |
失败 | 主机名不同 |
参见origin definition for file:
URLs.
源继承
来自about:blank
,javascript:
和data:URLs中的内容,继承了将其载入的文档所指定的源,因为它们的URL本身未指定任何关于自身源的信息。
IE特例
在处理同源策略的问题上,IE存在两个主要的不同之处。
授信范围(Trust Zones):两个相互之间高度互信的域名,如公司域名(corporate domains),不遵守同源策略的限制。
端口:IE未将端口号加入到同源策略的组成部分之中,因此
http://company.com:81/index.html 和http://company.com/index.html 属于同源并且不受任何限制。
这些例外是非标准的,其它浏览器也未做出支持,但会助于开发基于window RT IE的应用程序。
变更源
页面可以改变本身的源,但会受到一些限制。脚本可以设置document.domain
的值为当前域的一个后缀
在同源策略中有一个例外,脚本可以设置 document.domain
的值为当前域的一个后缀,如果这样做的话,短的域将作为后续同源检测的依据。例如,假设在http://store.company.com/dir/other.html
中的一个脚本执行了下列语句:
document.domain = "company.com";
这条语句执行之后,页面将会成功地通过对 http://company.com/dir/page.html
的同源检测。而同理,company.com
不能设置 document.domain
为othercompany.com
.
浏览器单独保存端口号。任何的赋值操作,包括document.domain = documen.domain都会以null值覆盖掉原来的端口号。因此
company.com:8080页面的脚本不能仅通过设置document.domain = "company.com"就能与company.com通信。赋值时必须带上端口号,以确保端口号不会为null。
附注:使用
document.domain来安全是让子域访问其父域,需要同时将子域和父域的document.domain设置为相同的值。必须要这么做,即使是简单的将父域设置为其原来的值。没有这么做的话可能导致授权错误。
跨域网络访问
同源策略控制了不同源之间的交互,例如在使用XMLHttpRequest
或 <img>
标签时则会受到同源策略的约束。交互通常分为三类:
- 通常允许进行跨域写操作(Cross-origin writes)。例如链接(links),重定向以及表单提交。特定少数的HTTP请求需要添加 preflight。
- 通常允许跨域资源嵌入(Cross-origin embedding)。之后下面会举例说明。
- 通常不允许跨域读操作(Cross-origin reads)。但常可以通过内嵌资源来巧妙的进行读取访问。例如可以读取嵌入图片的高度和宽度,调用内嵌脚本的方法,或availability of an embedded resource.
以下是一些可以跨域内嵌的资源示例:
<script src="..."></script>标签嵌入跨域脚本。语法错误信息只能在同源脚本中捕捉到。
<link rel="stylesheet" href="...">标签嵌入CSS。由于CSS的松散的语法规则,CSS的跨域需要一个设置正确的Content-Type消息头。不同浏览器有不同的限制:
IE, Firefox, Chrome, Safari (跳至CVE-2010-0051)部分 和 Opera。<img>
嵌入图片。支持的图片格式包括PNG,JPEG,GIF,BMP,SVG,...<video>
和<audio>
嵌入多媒体资源。<object>
,<embed>
和<applet>的插件。
@font-face
引入的字体。一些浏览器允许跨域字体( cross-origin fonts),一些需要同源字体(same-origin fonts)。<frame>
和<iframe>载入的任何资源。站点可以使用
X-Frame-Options消息头来阻止这种形式的跨域交互。
实现跨域访问
使用CORS 来实现跨域访问。
阻止跨域访问
- 阻止跨域写操作,只要检测请求中的一个不可测的标记(CSRF token)即可,这个标记被称为Cross-Site Request Forgery (CSRF) 标记。必须使用这个标记来阻止页面的跨站读操作。
- 阻止资源的跨站读取,需要保证该资源是不可嵌入的。阻止嵌入行为是必须的,因为嵌入资源通常向其暴露信息。
- 阻止跨站嵌入,确保你得资源不能是以上列出的可嵌入资源格式。多数情况下浏览器都不会遵守Conten-Type消息头。例如,如果你在<script>标签中嵌入HTML文档,浏览器仍将HTML解析为Javascript。When your resource is not an entry point to your site, you can also use a CSRF token to prevent embedding.
跨域脚本API访问
Javascript的APIs中,如 iframe.contentWindow
, window.parent
, window.open
和 window.opener
允许文档间直接相互引用。当两个文档的源不同时,这些引用方式将对 Window 和 Location对象的访问添加限制。可以使用window.postMessage
作为替代方案,提供跨域文档间的通讯。
跨域数据存储访问
存储在浏览器中的数据,如localStorage和IndexedDB,以源进行分割。每个源都拥有自己单独的存储空间,一个源中的Javascript脚本不能对属于其它源的数据进行读写操作。
window.name属性可以用来临时存储数据,可以跨域访问。
Cookies使用不同的源定义方式。一个页面可以为本域和任何父域设置cookie,只要是父域不是公共后缀(public suffix)即可。Firefox和Chrome使用Public Suffix List决定一个域是否是一个公共后缀(public suffix)。不管使用哪个协议(HTTP/HTTPS)或端口号,浏览器都允许给定的域以及其任何子域名(sub-domains)来访问cookie。设置cookie时,你可以使用Domain,Path,Secure,和Http-Only标记来限定其访问性。读取cookie时,不会知晓它的出处。尽管使用安全的https连接,任何可见的cookie都是使用不安全的连接设置的。
参见
跨域的根本原因:JavaScript 的同源策略的更多相关文章
- 跨域Ajax原理以及浏览器同源策略
- JavaScript 的同源策略
同源策略限制了一个源(origin)中加载文本或脚本与来自其它源(origin)中资源的交互方式. 同源定义 如果两个页面拥有相同的协议(protocol),端口(如果指定),和主机,那么这两个页面就 ...
- [转]JavaScript 的同源策略
同源策略限制了一个源(origin)中加载文本或脚本与来自其它源(origin)中资源的交互方式. 同源定义 如果两个页面拥有相同的协议(protocol),端口(如果指定),和主机,那么这两个页面就 ...
- document.domain - JavaScript的同源策略问题:错误信息:Permission denied to access property 'document'_eecc00_百度空间
document.domain - JavaScript的同源策略问题:错误信息:Permission denied to access property 'document'_eecc00_百度空间 ...
- IFrame跨域处理方法-Javascript
在漫长的前端开发旅途上,无可避免的会接触到ajax,而且一般情况下都是用在同一域下的ajax请求:但是如果请求是发生在不同的域下,请求就无法执行,并且会抛出异常提示不允许跨域请求,目前我没有找到明确的 ...
- 请解释一下 JavaScript 的同源策略
概念: 同源策略是客户端脚本(尤其是Netscape Navigator2.0,其目的是防止某个文档或脚本从多个不同源装载. 这里的同源策略指的是:协议,域名,端口相同,同源策略是一种安全协议. 指一 ...
- 浅谈跨域以及WebService对跨域的支持
跨域问题来源于JavaScript的同源策略,即只有 协议+主机名+端口号 (如存在)相同,则允许相互访问.也就是说JavaScript只能访问和操作自己域下的资源,不能访问和操作其他域下的资源. 在 ...
- web项目中的跨域问题解决方法
一种是JSONP 一种是 CORS. 在客户端Javascript调用服务端接口的时候,如果需要支持跨域的话,需要服务端支持. JSONP的方式就是服务端对返回的值进行回调函数包装,他的优点是支持众多 ...
- WebService对跨域的支持
WebService对跨域的支持 跨域问题来源于JavaScript的同源策略,即只有 协议+主机名+端口号 (如存在)相同,则允许相互访问.也就是说JavaScript只能访问和操作自己域下的资源, ...
随机推荐
- Java的transient关键字(转)
Volatile修饰的成员变量在每次被线程访问时,都强迫从主内存中重读该成员变量的值.而且,当成员变量发生变化时,强迫线程将变化值回写到主内存.这样在任何时刻,两个不同的线程总是看到某个成员变量的同一 ...
- Cartographer源码阅读(3):程序逻辑结构
Cartographer早期的代码在进行3d制图的时候使用了UKF方法,查看现有的tag版本,可以转到0.1.0和0.2.0查看,包含kalman_filter文件夹. 文件夹中的pose_track ...
- 导出mysql数据库数据
1.phpmyadmin导出 ) AS `a` LEFT JOIN ( SELECT * FROM `newerp_jifen_order_log` WHERE `content` = '客户确认收货 ...
- Oracle查看用户密码过期,修改永不过期
01.查看当前open用户 select username,account_status,expiry_date,profile from dba_users; 02.查看目前的密码过期策略 sele ...
- [LeetCode] 490. The Maze_Medium tag: BFS/DFS
There is a ball in a maze with empty spaces and walls. The ball can go through empty spaces by rolli ...
- 收藏住:金融&电商类原型模板重磅来袭,免费使用!
经常有很多产品经理和设计师想要各行业的产品原型模板,可以直接下载使用.现在分享下一个资源渠道:墨刀的原型模板. 上新了金融类和电商类的主要App设计原型,可以直接免费使用,具体包括: 金融类 招商银行 ...
- test4
- cocos2dx (关于斗地主人物偏移位置)
就是说不管是谁登陆游戏,你的人物信息资料始终在平板电脑的屏幕正下方(位置坐标需要自己设定,我设置定的是0号位() char LandLordsScene::getUIPosition(char pos ...
- UGUI之Scrollbar使用
这个效果主要用到了3个组件(对象): 1:Scrollbar对象 滚动条 2:Scroll Rect组件 让对象具有滑动效果 3:Mask组件 遮罩层.把多余的部分隐藏不显示 Scrollbar ...
- LeetCode8.字符串转整数(atoi)
题目链接:https://leetcode-cn.com/problems/string-to-integer-atoi/ 实现 atoi,将字符串转为整数. 该函数首先根据需要丢弃任意多的空格字符, ...