JS跨域总结
javascript跨域有两种情况：
1、基于同一父域的子域之间，如：a.c.com和b.c.com
2、基于不同的父域之间，如：www.a.com和www.b.com
3、端口的不同，如：www.a.com:8080和www.a.com:8088
4、协议不同，如：http://www.a.com和https://www.a.com
对于情况3和4，需要通过后台proxy来解决，具体方式如下：
a、在发起方的域下创建proxy程序
b、发起方的js调用本域下的proxy程序
c、proxy将请求发送给接收方并获取相应数据
d、proxy将获得的数据返回给发起方的js
发起方页面代码如下：
代码如下:
<form id="form1" runat="server">
<div>
<input type="text" id="txtSrc" value="http://www.gzsums.edu.cn/webclass/html/html_design.html" style="width: 378px" />
<input id="btnProxy" type="button" value="通过Proxy获取数据" onclick="GetDataFromProxy();" /><br />
<br />
<br />
</div>
<div id="divData"></div>
</form>
</body>
<script language="javascript" type="text/javascript">
function GetDataFromProxy() {
var src = document.getElementById('txtSrc').value;
var request = null;
if (window.XMLHttpRequest) {
request = new XMLHttpRequest();
}
else if (window.ActiveXObject) {
request = new ActiveXObject("Microsoft.XMLHTTP");
}
request.onreadystatechange = function() {
var ready = request.readyState;
var data = null;
{
if (ready == 4) {
data = request.responseText;
document.getElementById('divData').innerHTML = data;
}
else {
document.getElementById('divData').text = "Loading";
}
}
}
var url = "Proxy.ashx?src=" + escape(src);
request.open("get",url,false);
request.send(null);
}
</script>
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Xml.Linq;
using System.IO;
using System.Net;
using System.Text;
namespace WebApplication1
{
/// <summary>
/// Summary description for $codebehindclassname$
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class Proxy : IHttpHandler
{
const int BUFFER_SIZE = 8 * 1024;
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
string src = context.Request["src"];
WebRequest wr = WebRequest.Create(src);
WebResponse wres = wr.GetResponse();
Encoding resEncoding = System.Text.Encoding.GetEncoding("gb2312");
StreamReader sr = new StreamReader(wres.GetResponseStream(), resEncoding);
string html = sr.ReadToEnd();
sr.Close();
wres.Close();
context.Response.Write("<br/><br/><br/><br/>");
context.Response.Write(html);
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
而情况1和2除了通过后台proxy这种方式外，还可以有7种办法来解决：
1、document.domain+iframe（只能解决情况1）：
a、在发起方页面和接收方页面设置document.domain，并将值设为父域的主域名(window.location.hostname)
b、在发起方页面创建一个隐藏的iframe，iframe的源是接收方页面
c、根据浏览器的不同，通过iframe.contentDocument || iframe.contentWindow.document来获得接收方页面的内容
d、通过获得的接收方页面的内容来与接收方进行交互
这种方法有个缺点，就是当一个域被攻击时，另一个域会有安全漏洞出现。
发起方页面代码如下：
代码如下:
<body>
<div>
<input type="text" id="txtSrc" value="http://b.a.com/DomainTest2.htm" style="width: 378px" />
<input id="btnDomain" type="button" value="通过Domain获取数据" onclick="GetDataFromDomain();" /><br />
<br />
<br />
</div>
<div id="divData"></div>
</body>
<script language="javascript" type="text/javascript">
document.domain = 'a.com';
var src = document.getElementById('txtSrc').value;
var ifr = document.createElement('iframe');
ifr.src = src;
ifr.style.display = 'none';
document.body.appendChild(ifr);
function GetDataFromDomain() {
var doc = ifr.contentDocument || ifr.contentWindow.document;
alert(doc.getElementById("data").value);
}
</script>
<body>
<input type="hidden" id="data" value="Cross Domain" style="width: 378px" />
</body>
<script language="javascript" type="text/javascript">
document.domain = 'a.com';
</script>
2、动态创建script：
a、在发起方页面动态加载一个script，script的URL指向接收方的一个处理地址（后台），该地址返回的javascript方法会被执行，另外URL中可以传入一些参数，该方法只支持GET方式提交参数。
b、加载的script可以在调用跨域js方法后再做一些自己的处理
发起方页面的代码如下：
代码如下:
<head>
<title>Script Test</title>
<script language="javascript" type="text/javascript">
function load_script(callback){
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
var src = document.getElementById('txtSrc').value;
script.type = 'text/javascript';
script.src = src;
//借鉴了jQuery的script跨域方法
script.onload = script.onreadystatechange = function(){
if((!this.readyState||this.readyState === "loaded"||this.readyState === "complete")){
callback && callback();
// Handle memory leak in IE
script.onload = script.onreadystatechange = null;
if ( head && script.parentNode ) {
head.removeChild( script );
}
}
};
// Use insertBefore instead of appendChild to circumvent an IE6 bug.
head.insertBefore( script, head.firstChild );
}
</script>
</head>
<body>
<input type="text" id="txtSrc" value="http://www.b.com/scripttest.aspx" style="width: 378px" />
<input type="button" value="通过动态创建script标签来获取数据" onclick="load_script(function(){alert('动态加载script标签成功')})"/>
</body>
protected void Page_Load(object sender, EventArgs e)
{
Response.Clear();
Response.ContentType = "application/x-javascript";
Response.Write(String.Format(@"alert('{0}');", DateTime.Now));
Response.End();
}
3、location.hash+iframe：
a、发起方创建一个隐藏的iframe，iframe的源指向接收方的页面，并通过接收方页面的hash值来传送数据
b、发起方创建一个定时器，定时检查自己的location.hash并作相应的处理
c、接收方创建一个隐藏的iframe，iframe的源指向发起方所在域的一个代理页面，并将接收方根据发起方传入的数据而处理后的数据通过代理页面的hash值来传送
d、接收方创建一个定时器，定时检查自己的location.hash并作相应的处理
e、代理页面创建一个定时器，定时检查自己的location.hash并同步更新发起方页面的hash值
www.a.com/a.html#aaa，其中#aaa就是location.hash值
发起方页面代码如下：
代码如下:
<body>
<div>
<input type="text" id="txtSrc" value="1" style="width: 378px" />
<input id="btnAddHash" type="button" value="添加Hash值" onclick="addHash();" />
<iframe id="ifr1" style="display:none"></iframe>
</div>
</body>
<script language="javascript" type="text/javascript">
function addHash() {
var src = document.getElementById('txtSrc').value;
if (src.length > 0) {
changeHash(src);
}
}
function changeHash(src) {
if (document.getElementById('ifr1')) {
var ifr = document.getElementById('ifr1');
ifr.src = 'http://www.b.com/Test/HashTest2.htm#' + src;
}
else {
var ifr = document.createElement('iframe');
ifr.setAttribute('id', 'ifr1');
ifr.src = 'http://www.b.com/Test/HashTest2.htm#' + src;
ifr.style.display = 'none';
document.body.appendChild(ifr);
}
}
function checkHash() {
if (location.hash && location.hash.length > 1) {
changeHash(location.hash.substring(1));
}
}
setInterval(checkHash, 2000);
</script>
<body>
<iframe id="ifr2" style="display:none"></iframe>
</body>
<script language="javascript" type="text/javascript">
function checkHash() {
if (location.hash && location.hash.length > 1) {
var hashData = location.hash.substring(1);
var ifr = null;
if (document.getElementById('ifr2')) {
ifr = document.getElementById('ifr2');
}
else {
ifr = document.createElement('iframe');
ifr.setAttribute('id', 'ifr2');
ifr.style.display = 'none';
document.body.appendChild(ifr);
}
switch (hashData) {
case '1':
alert('One');
if (ifr) {
ifr.src = 'http://www.a.com/test/HashTest3.htm#2';
}
break;
case '2':
alert('Two');
if (ifr) {
ifr.src = 'http://www.a.com/test/HashTest3.htm#1';
}
break;
default:
break;
}
}
}
setInterval(checkHash, 2000);
</script>
<body></body>
<script language="javascript" type="text/javascript">
function checkHash() {
if (parent && parent.parent && parent.parent.location && self.location.hash.length > 1) {
parent.parent.location.hash = self.location.hash.substring(1);
}
}
setInterval(checkHash, 500);
</script>
4、window.name：
a、发起方页面创建一个隐藏的iframe，并且源指向接收方页面
b、接收方在自己页面通过script将需要传送的数据放入window.name里
c、发起方在iframe的onload方法里将iframe的源改为和自己在同一个域下的代理页面(因为只能是同一个域下才能访问window.name的值)
d、获取window.name的值(虽然iframe的源改变了，但是window.name的值不会变)
window.name的值差不多可以有2MB大小
发起方页面代码如下：
代码如下:
<body>
<div>
<input id="btnName" type="button" value="通过window.name获取数据" onclick="getData();" />
<iframe id="ifr1" style="display:none" src="http://www.b.com/Test/NameTest2.htm"></iframe>
</div>
</body>
<script language="javascript" type="text/javascript">
var ischanged = false;
function changeSrc() {
if (document.getElementById('ifr1')) {
var ifr = document.getElementById('ifr1');
if (!ischanged) {
ischanged = true;
ifr.contentWindow.location = 'http://www.a.com/Test/NameTest3.htm';
}
else {
var data = ifr.contentWindow.name;
alert(data);
}
}
else {
var ifr = document.createElement('iframe');
ifr.setAttribute('id', 'ifr1');
ifr.src = 'http://www.b.com/Test/NameTest2.htm';
ifr.style.display = 'none';
document.body.appendChild(ifr);
}
}
function getData() {
setInterval(changeSrc, 2000);
}
</script>
<body></body>
<script language="javascript" type="text/javascript">
window.name = 'NameTest2';
</script>
发起方域下的代理页面代码如下：
<body></body>
（其实什么都不用写）
5、HTML5的postMessage
a、receiverWindow.postMessage(msg, targetOrigin)，receiverWindow就是对接收消息的window的引用，可以是iframe的contentWindow/window.open的返回值/window.frames中的一个；msg就是要发送的消息，string类型；targetOrigin用于限制receiverWindow的URI，包括主域名和端口，使用“*”表示无限制，但是为了安全起见还是需要设置下，以防把消息发送给恶意的网站，如果targetOrigin的URI和receiverWindow的不符，则放弃发送消息。
b、接收方通过message事件来获得消息，并且通过event.origin的属性来验证发送方并通过event.data来获得传送的消息内容，event.source来获得发送方的window对象
发起方页面代码如下：
代码如下:
<body>
<div>
<input id="btnPostMessage" type="button" value="通过PostMessage获取数据" onclick="getData();" />
<iframe id="ifr" style="display:none" src="http://www.b.com/Test/PostMessageTest2.htm"></iframe>
</div>
</body>
<script language="javascript" type="text/javascript">
function getData() {
var ifr = document.getElementById('ifr');
var targetOrigin = 'http://www.b.com';
if (ifr.contentWindow.postMessage) {
ifr.contentWindow.postMessage('PostMessageTest2', targetOrigin);
}
}
</script>
<body></body>
<script language="javascript" type="text/javascript">
window.addEventListener('message', function(event) {
if (event.origin == 'http://www.a.com') {
alert(event.data);
alert(event.source);
}
}, false);
</script>
6、window.opener（适用于IE6、7，也就是operner hack方法，不过貌似现在已经不管用了，只要打过微软的安全补丁.kb2497640就不能用了）
a、发起方页面创建一个隐藏的iframe，并且源指向接收方页面
b、发起方页面通过iframe.contentWindow.opener = {a: function(params){...}, b: function(params){...} ...}来定义可被接收方调用的方法
c、接收方页面通过window.opener.a/window.opener.b来调用发起方定义的方法
d、接收方页面通过parent.opener = {c: function(params){...}, d: function(params){...} ...}来定义可被发起方调用的方法
e、发起方页面通过opener.c/opener.d来调用接收方定义的方法
其实原理就是重置opener对象
发起方页面代码如下：
代码如下:
<body>
<iframe id="ifr" src="http://www.b.com/test/OpenerTest2.htm" style="display:none"></iframe>
</body>
<script language="javascript" type="text/javascript">
var ifr = document.getElementById('ifr');
ifr.contentWindow.opener = { a: function(msg) { alert('我调用了a方法获得了消息：' + msg); } }
</script>
<body>
</body>
<script language="javascript" type="text/javascript">
window.opener.a('aaa');
</script>
7、window.navigator（适用于IE6、7，貌似现在还能用，还没被补丁掉）
a、发起方页面创建一个隐藏的iframe，并且源指向接收方页面
b、发起方页面通过window.navigator.a = function(params){...}; window.navigator.b = function(params){...}; 来定义被接收方调用的方法
c、接收方页面通过window.navigator.a(params); window.navigator.b(params);来调用发起方定义的方法
d、接收方页面通过window.navigator.c = function(params){...}; window.navigator.d = function(params){...}; 来定义被发起方调用的方法
e、发起方页面通过window.navigator.c(params); window.navigator.d(params);来调用接收方定义的方法
发起方页面代码如下：
代码如下:
<body>
<iframe id="ifr" src="http://www.b.com/test/NavigatorTest2.htm" style="display:none"></iframe>
</body>
<script language="javascript" type="text/javascript">
window.navigator.a = function(msg) { alert('我调用了a方法获得了消息：' + msg); }
window.navigator.b = function(msg) { alert('我调用了b方法获得了消息：' + msg); }
setInterval(function() { window.navigator.c('ccc'); }, 2000);
setInterval(function() { window.navigator.d('ddd'); }, 2000);
</script>
<body>
</body>
<script language="javascript" type="text/javascript">
window.navigator.c = function(msg) { alert('我调用了c方法获得了消息：' + msg); }
window.navigator.d = function(msg) { alert('我调用了d方法获得了消息：' + msg); }
setInterval(function() { window.navigator.a('aaa'); }, 2000);
setInterval(function() { window.navigator.b('bbb'); }, 2000);
</script>
相关推荐
-
Javascript 跨域访问解决方案
这里分两类情况:一.基于同一父域的子域之间页面的访问:参见如下3个domain域:taobao.com.jipiao.taobao.com.promotion.taobao.com:它们有相同的父域taobao.com.二.基于不同父域页面之间的访问:参见如下3个domain域:taobao.com.baidu.com.sina.com.cn:它们具有不同的父域. 解决它们之间跨域的方案有:方案1:服务器Proxy域A的页面JS需要访问域B下的链接获取数据,该方案在域A的服务器端建立一个Prox
-
Javascript实现跨域后台设置拦截的方法详解
本文主要给大家介绍了关于Javascript跨域后台设置拦截的相关内容,分享出来供大家参考学习,话不多说了,来一起看看详细的介绍吧. 子域名之间互相访问需要跨域 结论放在开头: 1.服务端必须设置允许跨域 2.客户端带cookie需要设置 withCredentials 3.无论服务端是否允许跨域,该request都会完整执行 4. options 预请求需要设置返回空,不然requestMapping没有支持该方法则出错 环境搭建 需求 首先需要搭建两个环境.一个是提供API的server A
-
js跨域请求数据的3种常用的方法
由于js同源策略的影响,当在某一域名下请求其他域名,或者同一域名,不同端口下的url时,就会变成不被允许的跨域请求. 那这个时候通常怎么解决呢,对此菜鸟光头我稍作了整理: 1.JavaScript 在原生js(没有jQuery和ajax支持)的情况下,通常客户端代码是这样的(我假设是在localhost:8080的端口下的http://localhost:8080/webs/i.mediapower.mobi/wutao/index.html页面的body标签下面加入以下代码): <scr
-
AJAX javascript的跨域访问执行
突然感觉就是这里的问题,研究一下,搞定后其实觉得挺容易的,只是自己知识还是有些欠缺,解决方法如下: 阻塞的AJAX请求 我们先来证实一下请求的阻塞情况吧.我们使用如下的代码: 连续发起三个请求 复制代码 代码如下: function simpleRequest() { var request = new XMLHttpRequest(); request.open("POST", "Script.ashx"); request.sen
-
Javascript跨域请求的4种解决方式
什么情况下才会出现跨域? 假设域名是:http://www.example.com.cn/ 如果所请求的域名跟这个域名不致,这种情况就是跨域,由于跨域存在漏洞,所以一般来说正常的跨域请求方式是请求不到的. 解决方式: 一.window.name 1. 服务器返回 复制代码 代码如下: <script>window.name='{"id":"3", "name":"leisure"}';</script>
-
5种处理js跨域问题方法汇总
前两天碰到一个跨域问题的处理,使用jsonp可以解决.(http://www.jb51.net/article/57889.htm) 最近再整理了一下: 1.jsonp. ajax请求,dataType为jsonp.这种形式需要请求在服务端调整为返回callback([json-object])的形式.如果服务端返回的是普通json对象.那么调试的时候,在chrome浏览器的控制台会报"Uncaught SyntaxError: Unexpected token"错误:在firefox
-
js跨域问题之跨域iframe自适应大小实现代码
复制代码 代码如下: <body onload="javascript: setHeight();"> <script> function setHeight(){ var dHeight = document.documentElement.scrollHeight; var t = document.createElement("div"); t.innerHTML = '<iframe id="kxiframeagent
-
JS跨域解决方案之使用CORS实现跨域
引言 跨域是我在日常面试中经常会问到的问题,这词在前端界出现的频率不低,主要原因还是由于安全限制(同源策略, 即JavaScript或Cookie只能访问同域下的内容),因为我们在日常的项目开发时会不可避免的需要进行跨域操作,所以跨域能力也算是前端工程师的基本功之一. 和大多数跨域的解决方案一样,JSONP也是我的选择,可是某天PM的需求变了,某功能需要改成支持POST,因为传输的数据量比较大,GET形式搞不定.所以折腾了下闻名已久的CORS(跨域资源共享,Cross-Origin Resour
-
NODE.JS跨域问题的完美解决方案
这几天公司同事(前端)写页面的时候一直说拿不到想要的JSON,安卓iOS那边是可以拿到的,但他也是新手也不知道为什么只知道是js跨域问题,然后问我我也不懂前端我开始百度, 有人说是谷歌浏览器跨域要设置一下,然后我就在谷歌浏览器的目标后面加一个 --disable-web-security 但是后来发现依然报错,依然拿不到想要的数据.后来也不停的找找找也没有什么眉目. 直到今天百度了一下PHP的跨域启发了我,于是百度找到了node.js的跨域问题,最后我在 app.js 路由设置里面加了一段跨域代
-
js跨域调用WebService的简单实例
步骤1. 在web.config中的system.web节点里加入 <!--此节点可允许脚本跨域调用webservice--> <webServices> <protocols> <add name="HttpPost"/> <add name="HttpGet"/> </protocols> </webServices> <!--此节点可允许脚本跨域调用webservic
-
JS跨域代码片段
下面的代码块是js调用一般处理程序的代理来实现js跨域的.如果js需要多次跨域,推荐下面的方法. 复制代码 代码如下: public string GetInfo(HttpContext context) { string post = "a=XX&b=XX"; return CreateHttpRequest("https://www.XXXX.com", post, "POST"); } #region 构造请求 /// <su
-
JS跨域交互(jQuery+php)之jsonp使用心得
什么是jsonp? 说到jsonp,你可能最先想到JSON:它还真和JSON有关系: JSONP(JSON with Padding)是JSON的一种"使用模式",可用于解决主流浏览器的跨域数据访问的问题.由于同源策略,一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通,而 HTML 的<script> 元素是一个例外.利用 <script> 元素的这个开放策略,网页可以得到从其他来源动态产
-
解决ajax不能访问本地文件问题（利用js跨域原理）
博主自己在开发一个无后台,只有前台的查询系统时,遇到一个困难,如何利用Ajax读取自己的本地json文件,百度.谷歌了下,发现大部分文章都是在说修改浏览器参数,但是自己想想,用户在使用时,还要修改浏览器的参数,这样显然降低了用户体验.自己琢磨了一段时间,发现可以利用js跨域原理来解决这个瓶颈.将之前要读取的json文件,变为js对象文件,这样就可以读取这个文件,然后写一个函数来对这个js对象进行解析. 首先说明下js跨域原理和jsonp这个技术(如果说的不详细,可自行百度.谷歌) src可以跨域
-
详解js跨域原理以及2种解决方案
1.什么是跨域 我们经常会在页面上使用ajax请求访问其他服务器的数据,此时,客户端会出现跨域问题. 跨域问题是由于javascript语言安全限制中的同源策略造成的. 简单来说,同源策略是指一段脚本只能读取来自同一来源的窗口和文档的属性,这里的同一来源指的是主机名.协议和端口号的组合. 例如: 2.实现原理 在HTML DOM中,Script标签是可以跨域访问服务器上的数据的.因此,可以指定script的src属性为跨域的url,从而实现跨域访问. 例如: 这种访问方式是不行的.但是如下方式,