1. 什么是同源策略

理解跨域首先必须要了解同源策略。同源策略是浏览器上为安全性考虑实施的非常重要的安全策略。
    何谓同源:
        URL由协议、域名、端口和路径组成,如果两个URL的协议、域名和端口相同,则表示他们同源。
    同源策略:
        浏览器的同源策略,限制了来自不同源的"document"或脚本,对当前"document"读取或设置某些属性。 
        从一个域上加载的脚本不允许访问另外一个域的文档属性。

举个例子:
        比如一个恶意网站的页面通过iframe嵌入了银行的登录页面(二者不同源),如果没有同源限制,恶意网页上的javascript脚本就可以在用户登录银行的时候获取用户名和密码。

在浏览器中,<script>、<img>、<iframe>、<link>等标签都可以加载跨域资源,而不受同源限制,但浏览器限制了JavaScript的权限使其不能读、写加载的内容。
    另外同源策略只对网页的HTML文档做了限制,对加载的其他静态资源如javascript、css、图片等仍然认为属于同源。

代码示例(http://localhost:8080/和http://localhost:8081由于端口不同而不同源):

 http://localhost:8080/test.html
         <html>
             <head><title>test same origin policy</title></head>
             <body>
                 <iframe id="test" src="http://localhost:8081/test2.html"></iframe>
                 <script type="text/javascript">
                     document.getElementById("test").contentDocument.body.innerHTML = "write somthing";
                 </script>
             </body>
         </html>

 http://localhost:8081/test2.html
         <html>
             <head><title>test same origin policy</title></head>
             <body>
                 Testing.
             </body>
         </html>  

在Firefox中会得到如下错误:
        Error: Permission denied to access property 'body'

Document对象的domain属性存放着装载文档的服务器的主机名,可以设置它。
    例如来自"blog.csdn.net"和来自"bbs.csdn.net"的页面,都将document.domain设置为"csdn.net",则来自两个子域名的脚本即可相互访问。
    出于安全的考虑,不能设置为其他主domain,比如http://www.csdn.net/不能设置为sina.com。

2. Ajax跨域

Ajax (XMLHttpRequest)请求受到同源策略的限制。
    Ajax通过XMLHttpRequest能够与远程的服务器进行信息交互,另外XMLHttpRequest是一个纯粹的Javascript对象,这样的交互过程,是在后台进行的,用户不易察觉。
    因此,XMLHTTP实际上已经突破了原有的Javascript的安全限制。
    举个例子:
        假设某网站引用了其它站点的javascript,这个站点被compromise并在javascript中加入获取用户输入并通过ajax提交给其他站点,这样就可以源源不断收集信息。
        或者某网站因为存在漏洞导致XSS注入了javascript脚本,这个脚本就可以通过ajax获取用户信息并通过ajax提交给其他站点,这样就可以源源不断收集信息。
   如果我们又想利用XMLHTTP的无刷新异步交互能力,又不愿意公然突破Javascript的安全策略,可以选择的方案就是给XMLHTTP加上严格的同源限制。
   这样的安全策略,很类似于Applet的安全策略。IFrame的限制还仅仅是不能访问跨域HTMLDOM中的数据,而XMLHTTP则根本上限制了跨域请求的提交。(实际上下面提到了CORS已经放宽了限制)

随着Ajax技术和网络服务的发展,对跨域的要求也越来越强烈。下面介绍Ajax的跨域技术。

2.1 JSONP

JSONP技术实际和Ajax没有关系。我们知道<script>标签可以加载跨域的javascript脚本,并且被加载的脚本和当前文档属于同一个域。因此在文档中可以调用/访问脚本中的数据和函数。如果javascript脚本中的数据是动态生成的,那么只要在文档中动态创建<script>标签就可以实现和服务端的数据交互。
    JSONP就是利用<script>标签的跨域能力实现跨域数据的访问,请求动态生成的JavaScript脚本同时带一个callback函数名作为参数。其中callback函数本地文档的JavaScript函数,服务器端动态生成的脚本会产生数据,并在代码中以产生的数据为参数调用callback函数。当这段脚本加载到本地文档时,callback函数就被调用。

Jsonp原理: 
首先在客户端注册一个callback, 然后把callback的名字传给服务器。
此时,服务器先生成 json 数据。
然后以 javascript 语法的方式,生成一个function , function 名字就是传递上来的参数 jsonp.
最后将 json 数据直接以入参的方式,放置到 function 中,这样就生成了一段 js 语法的文档,返回给客户端。
客户端浏览器,解析script标签,并执行返回的 javascript 文档,此时数据作为参数,传入到了客户端预先定义好的 callback 函数里(动态执行回调函数)。

HTML代码:

 <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
 <script type="text/javascript">
     function jsonpCallback(result) {           for(var i in result) {
             alert(i+":"+result[i]);//循环输出a:1,b:2,etc.
         }
     }
 </script>
 <script type="text/javascript" src="http://www.xxxx.com/server.php?callback=jsonpCallback"></script> 

将上述JS客户端代码用jQuery的方法来实现,也非常简单。

$.getJSON

$.ajax

$.get

JS代码(方式1):

 <script type="text/javascript" src="jquery.js"></script>
 <script type="text/javascript">
     $.ajax({
         url:"http://crossdomain.com/services.php",
         dataType:'jsonp',
         data:'',
         jsonp:'callback',
         success:function(result) {
             for(var i in result) {
                 alert(i+":"+result[i]);//循环输出a:1,b:2,etc.
             }
         },
         timeout:3000
     });
 </script>  

JS代码(方式2):

 <script type="text/javascript" src="jquery.js"></script>
 <script type="text/javascript">
     $.getJSON("http://crossdomain.com/services.php?callback=?",
     function(result) {
         for(var i in result) {
             alert(i+":"+result[i]);//循环输出a:1,b:2,etc.
         }
     });
 </script>  

PHP代码:server.php

 <?php
 //服务端返回JSON数据
 $arr=array('a'=>1,'b'=>2,'c'=>3,'d'=>4,'e'=>5);
 $result=json_encode($arr);
 //echo $_GET['callback'].'("Hello,World!")';
 //echo $_GET['callback']."($result)";
 //动态执行回调函数
 $callback=$_GET['callback'];
 echo $callback."($result)";  

2.2 Proxy

使用代理方式跨域更加直接,因为SOP的限制是浏览器实现的。如果请求不是从浏览器发起的,就不存在跨域问题了。
    使用本方法跨域步骤如下:
    1. 把访问其它域的请求替换为本域的请求
    2. 本域的请求是服务器端的动态脚本负责转发实际的请求
    各种服务器的Reverse Proxy功能都可以非常方便的实现请求的转发,如Apache httpd + mod_proxy。
    Eg.
    为了通过Ajax从http://localhost:8080访问http://localhost:8081/api,可以将请求发往http://localhost:8080/api。
    然后利用Apache Web服务器的Reverse Proxy功能做如下配置:
        ProxyPass /api http://localhost:8081/api

参考:

  https://blog.csdn.net/shimiso/article/details/21830313

  http://justcoding.iteye.com/blog/1366102

05-11 15:24
查看更多