`

JS跨域总结

    博客分类:
  • js
 
阅读更多
来源:
http://www.cnblogs.com/qixuejia/archive/2012/08/29/2662220.html

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>

发起方Proxy代码如下:

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>


分享到:
评论

相关推荐

    js跨域总结

    ### JS跨域总结 #### 一、引言与背景 跨域请求,即一个站点中的资源尝试访问另一个具有不同域名的站点上的资源。这在现代Web应用中极为常见,例如利用`&lt;style&gt;`标签加载外部样式表文件、利用`&lt;img&gt;`标签加载外部...

    JavaScript跨域总结与解决办法

    ### JavaScript跨域总结与解决办法 #### 跨域的基本概念 跨域问题源自于浏览器的安全策略之一——**同源策略**。同源策略是浏览器为了防止恶意网站通过脚本访问其他网站的数据而采取的一种安全措施。它规定了一个...

    JavaScript跨域总结

    JavaScript跨域总结 在Web开发中,由于浏览器的同源策略限制,JavaScript代码通常只能访问与自身页面协议、域名和端口完全相同的资源。这种安全机制是为了防止恶意脚本通过跨站点请求获取用户敏感信息。然而,随着...

    javascript跨域方案总结

    JavaScript跨域方案是Web开发中的一个重要主题,尤其是在构建现代Web应用程序时。由于浏览器的安全策略,JavaScript在不同域名之间默认不允许进行通信,这就是所谓的“同源策略”。然而,开发者经常需要在多个域之间...

    JS跨域访问解决方案总结.pdf

    标题《JS跨域访问解决方案总结.pdf》指明文档的核心内容是关于JavaScript跨域访问问题的解决方法。跨域访问问题是指由于浏览器的同源策略限制,网页中JavaScript代码出于安全原因不能访问另一个源(域名、协议或端口...

    JS跨域访问解决方案总结[参照].pdf

    JS 跨域访问解决方案总结 JS 跨域访问解决方案总结是指在不同域名站点之间进行资源访问的解决方案。默认情况下,脚本访问文档属性等数据采用的是同源策略(Same origin policy),即如果两个页面的协议、域名和端口...

    js跨域问题解决方案.

    总结,JavaScript跨域问题可以通过多种方式解决,开发者应根据项目需求选择最适合的方案。理解并掌握这些跨域技术,有助于提升Web应用的灵活性和安全性。在实际开发中,还应考虑兼容性、安全性和性能等因素,确保...

    详解JavaScript跨域总结与解决办法

    JavaScript跨域是Web开发中一个重要的概念,主要是由于浏览器的安全策略——同源策略(Same-origin policy)所引发的问题。同源策略规定,JavaScript只能访问与自身URL协议、域名和端口完全一致的网页资源。这一策略...

    arcgis api for javascript跨域处理方案

    总结起来,解决ArcGIS API for JavaScript的跨域问题通常需要在客户端和服务器端采取相应的措施。资源代理是一种安全且灵活的解决方案,特别是在处理敏感数据或需要控制访问权限时。理解并正确实施这些方法对于开发...

    jquery跨域调用 js跨域调用

    总结,jQuery跨域调用主要依赖JSONP和CORS技术,通过这些方法,开发者可以突破浏览器的同源策略限制,实现跨域数据交换。但在使用过程中,必须注意安全和性能问题,以确保应用程序的稳定性和安全性。

    js跨域访问后台

    根据提供的文件信息,本文将详细解释“JS跨域访问后台”的相关知识点,包括跨域的基本概念、实现方式以及具体的代码示例。 ### 跨域基本概念 在浏览器中,为了安全考虑,存在一种称为“同源策略”的机制。简单来说...

    JavaScript 跨域通信方法

    ### JavaScript父子页面跨域通信详解 #### 一、引言 在现代Web开发中,跨域通信是一个常见的问题。由于浏览器的安全策略——同源策略(Same-origin policy)的存在,JavaScript在处理不同源之间的数据交互时会受到...

    javascript跨域总结之window.name实现的跨域数据传输

    总结而言,window.name是一个跨域数据传输的好方法,它利用了浏览器的特定机制,解决了在不同域之间传输大量数据的问题,而不会违反浏览器的同源策略。需要注意的是,在使用window.name传输数据后,应当及时销毁...

Global site tag (gtag.js) - Google Analytics