`
kavy
  • 浏览: 865612 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

同源策略和跨域访问

 
阅读更多

1. 什么是同源策略 

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

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

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

    代码示例（http://localhost:8080/和http://localhost:8081由于端口不同而不同源）：

[html] view plaincopy在CODE上查看代码片派生到我的代码片
 
  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

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函数就被调用。

    第一个站点的测试页面（http://localhost:8080/test.html）：  

[html] view plaincopy在CODE上查看代码片派生到我的代码片
 
  1. <script src="http://localhost:8081/test_data.js">  
  2.     <script>  
  3.         function test_handler(data) {  
  4.             console.log(data);  
  5.         }  
  6. </script>  


    服务器端的Javascript脚本（http://localhost:8081/test_data.js）：
        test_handler('{"data": "something"}');

    为了动态实现JSONP请求，可以使用Javascript动态插入<script>标签：

[html] view plaincopy在CODE上查看代码片派生到我的代码片
 
  1. <script type="text/javascript">  
  2.         // this shows dynamic script insertion  
  3.         var script = document.createElement('script');  
  4.         script.setAttribute('src', url);  
  5.         // load the script  
  6.         document.getElementsByTagName('head')[0].appendChild(script);   
  7. </script>  

    
    JSONP协议封装了上述步骤，jQuery中统一是现在AJAX中(其中data type为JSONP)：
    http://localhost:8080/test?callback=test_handler
    
    为了支持JSONP协议，服务器端必须提供特别的支持[2]，另外JSONP只支持GET请求。

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

2.3 CORS

2.3.1 Cross origin resource sharing

       “Cross-origin resource sharing (CORS) is a mechanism that allows a web page to make XMLHttpRequests to another domain. Such "cross-domain" requests would otherwise be forbidden by web browsers, per the same origin security policy. CORS defines a way in which the browser and the server can interact to determine whether or not to allow the cross-origin request. It is more powerful than only allowing same-origin requests, but it is more secure than simply allowing all such cross-origin requests.” ----Wikipedia[3]

   通过在HTTP Header中加入扩展字段，服务器在相应网页头部加入字段表示允许访问的domain和HTTP method，客户端检查自己的域是否在允许列表中，决定是否处理响应。
   实现的基础是JavaScript不能够操作HTTP Header。某些浏览器插件实际上是具有这个能力的。

   服务器端在HTTP的响应头中加入（页面层次的控制模式）：
   Access-Control-Allow-Origin: example.com
   Access-Control-Request-Method: GET, POST
   Access-Control-Allow-Headers: Content-Type, Authorization, Accept, Range, Origin
   Access-Control-Expose-Headers: Content-Range
   Access-Control-Max-Age: 3600
   多个域名之间用逗号分隔，表示对所示域名提供跨域访问权限。"*"表示允许所有域名的跨域访问。

   客户端可以有两种行为：
   1. 发送OPTIONS请求，请求Access-Control信息。如果自己的域名在允许的访问列表中，则发送真正的请求，否则放弃请求发送。
   2. 直接发送请求，然后检查response的Access-Control信息，如果自己的域名在允许的访问列表中，则读取response body，否则放弃。
   本质上服务端的response内容已经到达本地，JavaScript决定是否要去读取。

   Support: [Javascript Web Applications]
   * IE >= 8 (需要安装caveat)
   * Firefox >= 3
   * Safari 完全支持
   * Chrome 完全支持
   * Opera 不支持

 2.3.2 测试

   测试页面http://localhost:8080/test3.html使用jquery发送Ajax请求。

[html] view plaincopy在CODE上查看代码片派生到我的代码片
 
  1. <html>  
  2.         <head><title>testing cross sop</title></head>  
  3.         <body>  
  4.             Testing.  
  5.             <script src="jquery-2.0.0.min.js"></script>  
  6.             <script type='text/javascript'>  
  7.                 $.ajax({  
  8.                     url: 'http://localhost:8000/hello',  
  9.                     success: function(data) {  
  10.                         alert(data);  
  11.                     },  
  12.                     error: function() {  
  13.                         alert('error');  
  14.                     }  
  15.                 });  
  16.             </script>  
  17.         </body>  
  18. </html>  

    测试Restful API(http://localhost:8000/hello/{name})使用bottle.py来host。
    from bottle import route, run, response
    @route('/hello')
    def index():
        return 'Hello World.'
    run(host='localhost', port=8000)

    测试1：
        测试正常的跨域请求的行为。
    测试结果：
        1. 跨域GET请求已经发出，请求header中带有
            Origin    http://localhost:8080
        2. 服务器端正确给出response
        3. Javascript拒绝读取数据，在firebug中发现reponse为空，并且触发error回调

    测试2：
        测试支持CORS的服务器的跨域请求行为。
        对Restful API做如下改动，在response中加入header：
             def index():
                #Add CORS header#
                response.set_header("Access-Control-Allow-Origin", "http://localhost:8080")
                return 'Hello World.'
    测试结果：
        1. 跨域GET请求已经发出，请求header中带有
            Origin    http://localhost:8080
        2. 服务器端正确给出response
        3. 客户端正常获取数据

    测试3：
        测试OPTIONS请求获取CORS信息。
        对客户端的Ajax请求增加header：        

[html] view plaincopy在CODE上查看代码片派生到我的代码片
 
  1. $.ajax({  
  2.           url: 'http://localhost:8000/hello',  
  3.           headers: {'Content-Type': 'text/html'},  
  4.           success: function(data) {  
  5.               alert(data);  
  6.           },  
  7.           error: function() {  
  8.               alert('error');  
  9.           }  
  10.       });  



        对Restful API做如下改动：
            @route('/hello', method = ['OPTIONS', 'GET'])
            def index():
                if request.method == 'OPTIONS':
                    return ''
                return 'Hello World.'
    测试结果：
    1. Ajax函数会首先发送OPTIONS请求
    2. 针对OPTIONS请求服务器
    3. 客户端发现没有CORS header后不会发送GET请求

    测试4：
        增加服务器端对OPTIONS方法的处理。
        对Restful API做如下改动：
            @route('/hello', method = ['OPTIONS', 'GET'])
            def index():
                response.headers['Access-Control-Allow-Origin'] = 'http://localhost:8080'
                response.headers['Access-Control-Allow-Methods'] = 'GET, OPTIONS'
                response.headers['Access-Control-Allow-Headers'] = 'Origin, Accept, Content-Type'
                if request.method == 'OPTIONS':
                    return ''
                return 'Hello World.'
    测试结果：
        1. Ajax函数会首先发送OPTIONS请求
        2. 针对OPTIONS请求服务器
        3. 客户端匹配CORS header中的allow headers and orgin后会正确发送GET请求并获取结果
        测试发现，Access-Control-Allow-Headers是必须的。

   CORS协议提升了Ajax的跨域能力，但也增加了风险。一旦网站被注入脚本或XSS攻击，将非常方便的获取用户信息并悄悄传递出去。

4. Cookie 同源策略

    Cookie中的同源只关注域名，忽略协议和端口。所以https://localhost:8080/和http://localhost:8081/的Cookie是共享的。

5. Flash/SilverLight跨域

    浏览器的各种插件也存在跨域需求。通常是通过在服务器配置crossdomain.xml[4]，设置本服务允许哪些域名的跨域访问。
    客户端会首先请求此文件，如果发现自己的域名在访问列表里，就发起真正的请求，否则不发送请求。
        <?xml version="1.0"?>
            <!DOCTYPE cross-domain-policy SYSTEM "http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd">
            <cross-domain-policy>
            <allow-access-from domain="*"/>
            <allow-http-request-headers-from domain="*" headers="*"/>
        </cross-domain-policy>
    通常crossdomain.xml放置在网站根目录。

6. 总结 

    互联网的发展催生了跨域访问的需求，各种跨域方法和协议满足了需求但也增加了各种风险。尤其是XSS和CSRF等攻击的盛行也得益于此。
    了解这些技术背景有助于在实际项目中熟练应用并规避各种安全风险。

 

 

 

Reference

[1] 白帽子讲Web安全: http://book.douban.com/subject/10546925/
[2] 使用 JSONP 实现跨域通信: http://www.ibm.com/developerworks/cn/web/wa-aj-jsonp1/
[3] Cross-origin resource sharing: http://en.wikipedia.org/wiki/Cross-Origin_Resource_Sharing
[4] Cross-domain policy for Flash movies: http://kb2.adobe.com/cps/142/tn_14213.html

 

 

著作权归作者所有。
商业转载请联系作者获得授权，非商业转载请注明出处。
作者：菜客
链接：http://www.zhihu.com/question/25427931/answer/30848852
来源：知乎

什么是同源策略
同domain（或ip）,同端口，同协议视为同一个域，一个域内的脚本仅仅具有本域内的权限，可以理解为本域脚本只能读写本域内的资源，而无法访问其它域的资源。这种安全限制称为同源策略。
2.为什么说同源策略限制了人类文明的发展
安全性和方便性是成反比的，十位数的密码提高了安全性，但是不方便记忆。同样，同源策略提升了Web前端的安全性，但牺牲了Web拓展上的灵活性。设想若把html、js、css、flash，image等文件全部布置在一台服务器上，小网站这样凑活还行，大中网站如果这样做服务器根本受不了的，可用性都不能保证的话，安全性还算个吊？ 所以，现代浏览器在安全性和可用性之间选择了一个平衡点。在遵循同源策略的基础上，选择性地为同源策略“开放了后门”。 例如img script style等标签，都允许垮域引用资源，严格说这都是不符合同源要求的。然而，你也只能是引用这些资源而已，并不能读取这些资源的内容，不信你可以试试：在你自己的域内读取百度logo图片的内容，以读取到二进制数据为准。 你很快发现这是不可能的，你顶多只能判断这张图片是否存在（使用的img标签的onerror属性 ）。因此浏览器降低了那么一点点安全性，却大大提升网站布置的灵活性。
尽管浏览器开放了“后门”，然而现代文明却仍不满足。打破同源策略的方法有很多，抛开漏洞不谈，Server端的大数据整合和浏览器的插件往往就充当着这样一个角色。我有一个同事，由于在淘宝上买过一个自慰器，从此不管他打开哪个网站都会有自慰器的广告投递，弄得人家好尴尬。我手把手教他清除Cookie，发现者根本不奏效。(吐槽：我们使用的是一个公网IP，后来我吃惊的发现我的电脑中也出现了自慰器的广告）.好吧，这样的例子还有很多。虽然，攻城狮们越来越肆无忌惮的浪，然而浏览器们依旧保持着他那份应有的节操（国产浏览器除外）。
3.如果没有同源策略，普通用户将无密可保。
尽管浏览器遵循同源策略，你仍可以发现你的访问过的网站、买过的东西、搜索过的字串、甚至你的兴趣爱好，都可以被远端分析出来。我们姑且认为这些大数据分析者是有节操的，不会随意泄露这些数据。如果浏览器不遵循同源策略，那么情况更糟：网站站长、广告联盟、流量统计商、xss黑客，随便哪个人都将无障碍的获取私密信息，例如各个网站的Cookie、email的邮件内容、OA页面的内容、QQ空间里设置为隐私的照片等，不止这些，听说过CSRF吗，这里不做科普，通过CSRF还可能用你的邮箱群发发邮件、在OA里面填上你旷工一天、在第三方支付平台里自由转账、用你的账号在知乎上胡乱发言降低你的big，等等。
感谢同源策略，我才有勇气使用互联网。
4.跨域漏洞
尽管各个浏览器都遵循都远策略，可是通过一些奇淫巧计会绕过同源的限制进行跨域。举个例子UC浏览器跨本地域XSS可盗取任意域Cookie ，一段js代码本来是普通http域的权限，可是用过下载页面的一个xss，从而具有了file域的权限，而file域对权限限制也不严格，允许从file域跨到任意一个http域权限去执行js代码，经过了两次跨域操作，最终实现了普通http域向任意一个域注射js的目的，同源策略被完全破坏。
4.最严重的跨域——跨特权域
所有跨域行为中最严重的莫过于跨特权域。在客户端中，有一些域的权限比较高，例如file://这个协议域，ie中允许调用ActiveX执行cmd，Webkit中可以读取磁盘上的文件。另外还有客户端自定义的特权域，例如Chrome的chrome://downloads/域，有着执行exe的权限。这事儿太严重了，这不仅意味着任意一个网站都可以浏览/修改你的浏览器配置，而且可以不经你同意上传文件，甚至会在你的电脑上安装木马。跨特权域最经典的例子莫过于黑哥去年讲的 《跨过的那些客户端》。
分享到：
| Spark 快速入门
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    JavaScript同源策略和跨域访问实例详解

    本文实例讲述了JavaScript同源策略和跨域访问。分享给大家供大家参考，具体如下： 1. 什么是同源策略 理解跨域首先必须要了解同源策略。同源策略是浏览器上为安全性考虑实施的非常重要的安全策略。 何谓同源: URL由...

    深入浅析同源策略和跨域访问

     理解跨域首先必须要了解同源策略。同源策略是浏览器上为安全性考虑实施的非常重要的安全策略。  何谓同源:  URL由协议、域名、端口和路径组成，如果两个URL的协议、域名和端口相同，则表示他们同源。  同源...

    flash跨域策略文件crossdomain.xml配置详解以及防范措施.docx

    flash跨域访问策略。渗透测试时检查crossdomain.xml配置信息，应当重点检查allow-access-from=*、allow-http-request-headers-from=*、site-control=allow将会导致漏洞。特别注意参数为*和all，当站内没有cross...

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

    JS跨域访问解决方案的总结.doc跨域请求，顾名思义，就是一个站点中的资源去访问另外一个不同域名站点上的资源。这种情况很常见，比如说通过style标签加载外部样式表文件、通过 img 标签加载外部图片、通过 script ...

    origin-storage:跨域访问的同源存储（IndexedDBWebSQLlocalStorage）

    一个用于跨域访问的同源存储，它基于localForage，并支持IndexedDB，WebSQL和localStorage。 origin-storage在不支持IndexedDB或WebSQL的浏览器中使用localStorage。 并且不支持Safari。 目录 动机 当不同的网站域...

    Flask配置Cors跨域的实现

    同源策略是指：浏览器A从服务器B获取的静态资源，包括Html、Css、Js，为了用户安全，浏览器加了限制，其中的Js通过Ajax只能访问B服务器的静态资源或请求。即：浏览器A从哪拿的资源，那资源中就只能访问哪。 同源是指...

    关于C#中ajax跨域访问问题

    跨域访问是指什么？ [跨域]：指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript施加的安全限制。所谓同域是指，域名，协议，端口均相同，不明白没关系，举个栗子：例如，我...

    ASP.NET MVC中设置跨域访问问题

    客户端可以通过JSONP来完成跨域访问；在ES6中为了解除同源策略问题，想出一个办法：当被请求网站为响应头respone添加了一个名为Access-Control-Allow-Origin的header，设置其值等于发起请求网站的域名地址的话，这次...

    JSONP跨域GET请求解决Ajax跨域访问问题

    难道是这里的问题，经过检查和调试，发现原来是同源策略在作怪，我们知道，JavaScript或jQuery是在Web前端开发中经常使用的动态脚本技术。在JavaScript中，有一个很重要的安全性限制，被称为“Same- Origin Policy”...

    利用Nginx反向代理解决跨域问题详解

    问题 在之前的分享的跨域资源共享的文章中，有提到... 基于与合作方后台的配合，利用nginx方向代理来满足浏览器的同源策略来实现跨域 实现方法 反向代理概念 反向代理（Reverse Proxy）方式是指以代理服务器来接受In

    浅析JSONP解决Ajax跨域访问问题的思路详解

    难道是这里的问题，经过检查和调试，发现原来是同源策略在作怪，我们知道，JavaScript或jQuery是在Web前端开发中经常使用的动态脚本技术。在JavaScript中，有一个很重要的安全性限制，被称为“Same- Origin Policy”...

    跨域解决的两种方法

    跨域:个人简单的理解就是,你本地localhost:8080访问另一个地址192.168.0.1,会出现跨域,原因是跨域要实现同源策略,即:HTTP//IP:port要一样,HTTP和HTTPS会出现跨域,还有就是orgin请求来源是否允许

    你可能不知道的CORS跨域资源共享

    什么是CORS？ 默认情况下，为预防某些而已行为，浏览器的XHR对象只能访问来源于同一个域中的资源。... 同源策略：同源策略是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源；

    详解js跨域原理以及2种解决方案

    简单来说,同源策略是指一段脚本只能读取来自同一来源的窗口和文档的属性,这里的同一来源指的是主机名、协议和端口号的组合. 例如: 2.实现原理 在HTML DOM中,Script标签是可以跨域访问服务器上的数据的.因此,可以...

    WebApi跨域demon

    同源策略：出于安全考虑，浏览器会限制脚本中发起的跨站请求，浏览器要求JavaScript或Cookie只能访问同域下的内容。 正是由于这个原因，我们不同项目之间的调用就会被浏览器阻止。比如我们最常见的场景：WebApi作为...

    WebApi 跨域问题解决方案：CORS

    同源策略：出于安全考虑，浏览器会限制脚本中发起的跨站请求，浏览器要求JavaScript或Cookie只能访问同域下的内容。 正是由于这个原因，我们不同项目之间的调用就会被浏览器阻止。比如我们最常见的场景：WebApi作为...

    详解iframe跨域的几种常用方法(小结)

    背景 随着业务的发展，自然地会有一些公共的业务被抽离成为公共组件共各个项目使用。但是由于各个项目用到的技术栈都有所不同，所以这个公共组件就不能方便地被引用了...违反了同源策略就会出现跨域问题，主要表现为以

    简单了解django处理跨域请求最佳解决方案

    为此，浏览器的鼻祖：网景（Netscape）公司提出了优秀的解决方案：著名的浏览器同源策略。现在所有支持JavaScript的浏览器都会使用这个策略。 同源：域名、协议、端口均相同的网站即为同源。 流程： 当一个浏览器的...

Magicbox
Global site tag (gtag.js) - Google Analytics