- 浏览: 188414 次
- 性别:
- 来自: 杭州
最新评论
-
wahahachuang5:
web实时推送技术使用越来越广泛,但是自己开发又太麻烦了,我觉 ...
转发:websocket 通信协议介绍 -
爱很执着:
好
Java多线程同步机制(synchronized) -
我在路上看风景:
不错啊,看完了,疑惑不存在了。 新浪微博@最美最好的你
Java多线程同步机制(synchronized) -
hbiao68:
写得很好,受教了
Java Resource路径总结二 -
JamesLiuX:
有Freelancer的老鸟吗,求组队!
Freelancer
转自:http://www.cnblogs.com/rainman/archive/2011/02/20.html
什么是跨域
JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象。但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦。这里把涉及到跨域的一些问题简单地整理一下:
首先什么是跨域,简单地理解就是因为JavaScript同源策略的限制,a.com 域名下的js无法操作b.com或是c.a.com域名下的对象。更详细的说明可以看下表:
http://www.a.com/a.js http://www.a.com/b.js |
同一域名下 | 允许 |
http://www.a.com/lab/a.js http://www.a.com/script/b.js |
同一域名下不同文件夹 | 允许 |
http://www.a.com:8000/a.js http://www.a.com/b.js |
同一域名,不同端口 | 不允许 |
http://www.a.com/a.js https://www.a.com/b.js |
同一域名,不同协议 | 不允许 |
http://www.a.com/a.js http://70.32.92.74/b.js |
域名和域名对应ip | 不允许 |
http://www.a.com/a.js http://script.a.com/b.js |
主域相同,子域不同 | 不允许 |
http://www.a.com/a.js http://a.com/b.js |
同一域名,不同二级域名(同上) | 不允许(cookie这种情况下也不允许访问) |
http://www.cnblogs.com/a.js http://www.a.com/b.js |
不同域名 | 不允许 |
“URL的首部”指window.location.protocol +window.location.host,也可以理解为“Domains, protocols and ports must match”。
接下来简单地总结一下在“前台”一般处理跨域的办法,后台proxy这种方案牵涉到后台配置,这里就不阐述了,有兴趣的可以看看yahoo的这篇文章:《JavaScript: Use a Web Proxy for Cross-Domain XMLHttpRequest Calls 》
1、document.domain+iframe的设置
对于主域相同而子域不同的例子,可以通过设置document.domain的办法来解决 。 具体的做法是可以在http://www.a.com/a.html和http://script.a.com/b.html两个文件中分别加上 document.domain = ‘a.com’;然后通过a.html文件中创建一个iframe,去控制iframe的contentDocument,这样两个js文件之间就可以 “交互”了。当然这种办法只能解决主域相同而二级域名不同的情况,如果你异想天开的把script.a.com的domian设为alibaba.com 那显然是会报错地!代码如下:
www.a.com上的a.html
document.domain = 'a.com'; var ifr = document.createElement('iframe'); ifr.src = 'http://script.a.com/b.html'; ifr.style.display = 'none'; document.body.appendChild(ifr); ifr.onload = function(){ var doc = ifr.contentDocument || ifr.contentWindow.document; // 在这里操纵b.html alert(doc.getElementsByTagName("h1")[0].childNodes[0].nodeValue); };
script.a.com上的b.html
document.domain = 'a.com';
这种方式适用于{www.kuqin.com, kuqin.com, script.kuqin.com, css.kuqin.com}中的任何页面相互通信。
备注:某一页面的domain默认等于window.location.hostname。主域名是不带www的域名,例如a.com,主域名前面带前缀的通常都为二级域名或多级域名,例如www.a.com其实是二级域名。 domain只能设置为主域名,不可以在b.a.com中将domain设置为c.a.com。
2、动态创建script
虽然浏览器默认禁止了跨域访问,但并不禁止在页面中引用其他域的JS文件,并可以自由执行引入的JS文件中的function(包括操作cookie、Dom等等) 。根据这一点,可以方便地通过创建script节点的方法来实现完全跨域的通信。具体的做法可以参考YUI的Get Utility
这里判断script节点加载完毕还是蛮有意思的:ie只能通过script的readystatechange属性,其它浏览器是script的load事件。以下是部分判断script加载完毕的方法。
js.onload = js.onreadystatechange = function() { if (!this.readyState || this.readyState === 'loaded' || this.readyState === 'complete') { // callback在此处执行 js.onload = js.onreadystatechange = null; } };
3、利用iframe和location.hash
这个办法比较绕,但是可以解决完全跨域情况下的脚步置换问题。原理是利用location.hash来进行传值。在url: http://a.com#helloword中的‘#helloworld’就是location.hash,改变hash并不会导致页面刷新,所以可 以利用hash值来进行数据传递,当然数据容量是有限的。假设域名a.com下的文件cs1.html要和cnblogs.com域名下的 cs2.html传递信息,cs1.html首先创建自动创建一个隐藏的iframe,iframe的src指向cnblogs.com域名下的 cs2.html页面,这时的hash值可以做参数传递用。cs2.html响应请求后再将通过修改cs1.html的hash值来传递数据(由于两个页面不在同一个域下IE、Chrome不允许修改parent.location.hash的值,所以要借助于a.com域名下的一个代理iframe;Firefox可以修改 )。同时在cs1.html上加一个定时器,隔一段时间来判断location.hash的值有没有变化,一点有变化则获取获取hash值。代码如下:
先是a.com下的文件cs1.html文件:
function startRequest(){ var ifr = document.createElement('iframe'); ifr.style.display = 'none'; ifr.src = 'http://www.cnblogs.com/lab/cscript/cs2.html#paramdo'; document.body.appendChild(ifr); } function checkHash() { try { var data = location.hash ? location.hash.substring(1) : ''; if (console.log) { console.log('Now the data is '+data); } } catch(e) {}; } setInterval(checkHash, 2000);
cnblogs.com域名下的cs2.html:
//模拟一个简单的参数处理操作
switch(location.hash){
case '#paramdo':
callBack();
break;
case '#paramset':
//do something……
break;
}
function callBack(){
try {
parent.location.hash = 'somedata';
} catch (e) {
// ie、chrome的安全机制无法修改parent.location.hash,
// 所以要利用一个中间的cnblogs域下的代理iframe
var ifrproxy = document.createElement('iframe');
ifrproxy.style.display = 'none';
ifrproxy.src = 'http://a.com/test/cscript/cs3.html#somedata'; // 注意该文件在"a.com"域下
document.body.appendChild(ifrproxy);
}
}
a.com下的域名cs3.html
//因为parent.parent和自身属于同一个域,所以可以改变其location.hash的值 parent.parent.location.hash = self.location.hash.substring(1);
当然这样做也存在很多缺点,诸如数据直接暴露在了url中,数据容量和类型都有限等……
4、window.name实现的跨域数据传输
文章较长列在此处不便于阅读,详细请看 window.name实现的跨域数据传输 。
5、使用HTML5 postMessage
HTML5 中最酷的新功能之一就是 跨文档消息传输Cross Document Messaging 。 下一代浏览器都将支持这个功能:Chrome 2.0+、Internet Explorer 8.0+, Firefox 3.0+, Opera 9.6+, 和 Safari 4.0+ 。 Facebook已经使用了这个功能,用postMessage支持基于web的实时消息传递。
message: 所要发送的数据,string类型。
targetOrigin: 用于限制otherWindow,“*”表示不作限制
a.com/index.html中的代码:
<iframe id="ifr" src="b.com/index.html"></iframe> <script type="text/javascript"> window.onload = function() { var ifr = document.getElementById('ifr'); var targetOrigin = 'http://b.com'; // 若写成'http://b.com/c/proxy.html'效果一样 // 若写成'http://c.com'就不会执行postMessage了 ifr.contentWindow.postMessage('I was there!', targetOrigin); }; </script>
b.com/index.html中的代码:
<script type="text/javascript"> window.addEventListener('message', function(event){ // 通过origin属性判断消息来源地址 if (event.origin == 'http://a.com') { alert(event.data); // 弹出"I was there!" alert(event.source); // 对a.com、index.html中window对象的引用 // 但由于同源策略,这里event.source不可以访问window对象 } }, false); </script>
参考文章:《精通HTML5编程》第五章——跨文档消息机制 、https://developer.mozilla.org/en/dom/window.postmessage
6、利用flash
这是从YUI3的IO组件中看到的办法,具体可见http://developer.yahoo.com/yui/3/io/
。
可以看在Adobe Developer Connection看到更多的跨域代理文件规范:ross-Domain Policy File Specifications
、HTTP Headers Blacklist
。
经常使用window.location,它的结构总是记不住,简单梳理下,方便以后查询。
示例
URL:http://b.a.com:88/index.php?name=kang&when=2011#first
protocol: | 协议 | "http:" |
hostname: | 服务器的名字 | "b.a.com" |
port: | 端口 | "88" |
pathname: | URL中主机名后的部分 | "/index.php" |
search: | "?"后的部分,又称为查询字符串 | "?name=kang&when=2011" |
hash: | 返回"#"之后的内容 | "#first" |
host: | 等于hostname + port | "b.a.com:88" |
href: | 当前页面的完整URL | "http://www.a.com:88/index.php?name=kang&when=2011#first" |
window.location和document.location互相等价的,可以交换使用
location的8个属性都是可读写的,但是只有href与hash的写才有意义。例如改变location.href会重新定位到一个URL, 而修改location.hash会跳到当前页面中的anchor(<a id="name">或者<div id="id">等)名字的标记(如果有),而且页面不会被重新加载
注意
URL:http://b.a.com:88/index.php?name=kang&how=#when=2011#first
search: | "?name=kang&how=" | 第一个"?"之后 |
hash: | "#when=2011#first" | 第一个"#"之后的内容 |
方法
这种方式会讲新地址放到浏览器历史栈中,意味着转到新页面后“后退按钮”仍可以回到该页面。
发表评论
-
程序员到项目经理:从内而外的提升
2012-11-20 21:57 1071很不错的文章,看了有感触: http://www.manag ... -
25个免费的小清新风格的XHTML/CSS网站模板推荐
2013-08-17 10:54 922非常喜欢的风格: http://www.iteye.com ... -
如何带好新员工
2012-02-07 09:17 1199http://www.iteye.com/topic/1120 ... -
一线架构师:一
2012-01-30 10:42 969软件构架脑图: -
Freelancer
2012-01-10 13:35 1144自由骑士 http://www.52freelancer.c ... -
安装 Tokyo Cabinet 和 Tokyo Tyrant
2011-12-29 09:00 1237原文出处:http://blog.chenlb.com/200 ... -
大型电子商务网站架构之-前端优化
2011-12-21 14:23 1081http://liriguang.iteye.com/blog ... -
网站架构
2011-12-21 14:06 902业务分离,域名分离 一个业务对应一个系统、一 ... -
ext开发的统一办公平台
2011-12-05 13:31 851觉的不错,标记下 http://blog.csdn.net/ ... -
浅谈PM(好文推荐)
2011-11-10 14:27 544浅谈PM(不错的文章) http://www.itpub.n ... -
评估产品机会
2011-10-31 21:45 752评估产品机会 1. 产品要解决什么问题?(产品价值) ... -
WINDOWS下使用7z将文件打包压缩成tar.gz格式教程
2011-08-02 15:33 1759http://www.fuyahui.com/post/hel ... -
firfox关闭的时候不提示是否保存已打开的标签页解决方法
2011-07-07 16:50 864在地址栏中打开 about:config 在过滤器中输入 b ... -
Java集群之session共享解决方案
2011-06-29 23:53 1801转:http://blog.csdn.net/crskyp/a ... -
Clustering经典范文学习
2011-06-29 23:20 1167转:http://blog.csdn.net/calvinxi ... -
java常用网站收集
2011-04-18 14:04 827自己常去iteye 和 csdn ,一些活跃的java网站偶尔 ... -
如何将.class文件打成jar包
2011-04-01 23:31 1128转载自:http://blog.csdn.net/tomorr ... -
eclipse快捷键
2011-03-10 10:52 795首先键盘而非鼠标,高效程序员入门必备 Ctrl+1 快 ... -
Lucene学习笔记
2010-05-26 09:42 1167最近项目要用到Lucene,网上搜索了一些基础作为学习记录。 ...
相关推荐
JavaScript跨域是Web开发中一个重要的概念,主要是由于浏览器的安全策略——同源策略(Same-origin policy)所引发的问题。同源策略规定,JavaScript只能访问与自身URL协议、域名和端口完全一致的网页资源。这一策略...
总结,解决Ajax跨域问题有多种方法,选择哪种取决于项目需求和安全考虑。JSONP适用于简单请求,CORS更灵活但需要服务器配合,代理服务器则可以完全绕过同源策略,而`document.domain`适用于同一顶级域名下的跨子域...
为了解决这个问题,开发者们发明了各种跨域解决方案,其中JSONP(JSON with Padding)是一种广泛使用的非官方标准。本文将深入探讨JSONP的工作原理以及如何在实际项目中应用。 ### JSONP简介 JSONP全称是"JSON ...
总结起来,解决jQuery跨域问题主要包含两方面内容:第一是理解跨域问题及其背后的同源策略;第二是掌握通过JSONP实现跨域请求的具体步骤和注意事项。通过上述方法,前端开发人员可以较为轻松地从不同域的服务器上...
标题中的“利用jsonp解决js读取本地json跨域的问题”是指在JavaScript中,由于同源策略的限制,AJAX无法直接从本地文件系统获取JSON数据。然而,JSONP(JSON with Padding)是一种绕过同源策略的技术,尤其适用于GET...
总结起来,解决LayUI图片上传时的跨域问题,主要是通过后端设置CORS策略、前端设置代理或者使用JSONP(针对GET请求)。在实际项目中,应根据具体的安全需求和场景选择合适的方法。同时,对于生产环境,确保配置正确...
四、终极解决办法 1. 配置CORS:在后端服务器上,根据需求设置Access-Control-Allow-Origin头。如果希望允许特定域名,可以设置具体域名;如果希望开放给多个,使用逗号分隔;若需要开放给所有,设置为"*"。 2. ...
Ajax跨域问题,简而言之,是指在使用JavaScript发起XMLHttpRequest请求时,若请求的资源与当前文档处于不同的域,则可能会被浏览器的同源策略所阻止,导致请求无法完成。本文将介绍两种解决Ajax跨域问题的方法,并...
当尝试通过JavaScript进行跨域请求时,浏览器会阻止这种行为,如使用Ajax请求时会遇到"Access-Control-Allow-Origin"头部缺失导致的错误。 【解决跨域的几种方法】 1. JSONP(JSON with Padding):这是一种较早的...
总结来说,跨域问题的解决办法各有适用场景。JSONP方法适用于简单场景下的跨域请求,它不需要服务器端做特别的配置,只适用于GET请求。CORS是最理想的解决方案,但需要服务器端的支持和正确的配置。window.post...
### 关于`document.frames`在非IE浏览器中的解决办法 #### 背景与问题概述 在Web开发中,为了实现页面元素之间的交互,开发者常常会用到`document.frames`来访问iframe或frameset中的子窗口。然而,在实际应用过程...
三、跨域解决办法 1. JSONP(JSON with Padding) JSONP是一种古老且广泛使用的跨域解决方案。它的核心思想是利用标签不受同源策略限制的特性。JSONP通过动态创建元素,请求跨域服务器上的一个回调函数,并将服务器...
然而,这些方法可能并非长期可行的解决方案,因此,对于更复杂的项目,可能需要深入理解React Native的网络层和调试机制,寻找更稳定且安全的解决办法。如果你有更好的解决方案,欢迎分享交流。在React Native的开发...
#### 二、常见问题及其解决办法 虽然`html2canvas`功能强大,但在实际使用过程中也会遇到一些问题,以下是一些常见的问题及其解决办法: 1. **图片跨域问题**: - **解决方案**: - 设置`allowTaint: false`,这...
9. 项目经验和问题解决能力:面试官也会关注你的实际工作经验,包括你在项目中遇到的问题及解决办法,这能体现你的实际操作能力和问题解决技巧。 10. 软技能:除了技术知识,沟通能力、团队协作、学习能力和适应新...
接下来,我们将详细介绍AJAX、跨域问题以及相关的解决办法。 AJAX(Asynchronous JavaScript and XML)是一种在无需重新加载整个页面的情况下,能够更新部分网页的技术。它通过JavaScript和XMLHttpRequest对象,...
通常情况下,浏览器的同源策略不允许JavaScript跨域操作,因此直接在客户端进行模拟登录不可行。最初的尝试包括: 1. 使用IFrame嵌入远程登录页面,尝试通过JavaScript在本地应用中设置用户名和密码,然后模拟点击...
一种常见的解决办法是通过设置服务器端的CORS(Cross-Origin Resource Sharing,跨源资源共享)策略。CORS允许服务器声明哪些源(origin)可以访问其资源。在提供的内容中,我们看到通过在Tomcat服务器上创建一个...