同源策略和Ajax跨域访问

时间 2019-11-10

标签同源策略 ajax 访问栏目 Ajax 繁體版

原文原文链接

1. 什么是同源策略

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

    举个例子：
        好比一个恶意网站的页面经过iframe嵌入了银行的登陆页面（两者不一样源），若是没有同源限制，恶意网页上的javascript脚本就能够在用户登陆银行的时候获取用户名和密码。

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

    代码示例（http://localhost:8080/和http://localhost:8081因为端口不一样而不一样源）：javascript

 1 http://localhost:8080/test.html  
 2         <html>  
 3             <head><title>test same origin policy</title></head>  
 4             <body>  
 5                 <iframe id="test" src="http://localhost:8081/test2.html"></iframe>  
 6                 <script type="text/javascript">  
 7                     document.getElementById("test").contentDocument.body.innerHTML = "write somthing";  
 8                 </script>  
 9             </body>  
10         </html>  
11   
12 http://localhost:8081/test2.html  
13         <html>  
14             <head><title>test same origin policy</title></head>  
15             <body>  
16                 Testing.  
17             </body>  
18         </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。php

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的跨域技术。css

2.1 JSONP

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

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

HTML代码：jquery

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

将上述JS客户端代码用jQuery的方法来实现，也很是简单。ajax

$.getJSONjson

$.ajaxapi

$.get跨域

JS代码（方式1）：

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

JS代码（方式2）：

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

PHP代码：server.php

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