同源策略

1.同源策略(SOPSame origin policy) 

跨域,指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对javascript施加的安全限制。

所谓同源是指,域名,协议,端口相同。浏览器执行javascript脚本时,会检查这个脚本属于那个页面,如果不是同源页面,就不会被执行。

   何谓同源:
        URL由协议、域名、端口和路径组成,如果两个URL的协议、域名和端口相同,则表示他们同源。
    同源策略:
        浏览器的同源策略,限制了来自不同源的"document"或脚本,对当前"document"读取或设置某些属性。 (白帽子讲web安全[1])
        从一个域上加载的脚本不允许访问另外一个域的文档属性。

  举个例子:

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

    在浏览器中,<script>、<img>、<iframe>、<link>等标签都可以加载跨域资源,而不受同源限制,但浏览器限制了JavaScript的权限使其不能读、写加载的内容。

    另外同源策略只对网页的HTML文档做了限制,对加载的其他静态资源如javascript、css、图片等仍然认为属于同源。

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已经放宽了限制)

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

对于浏览器来说,访问的就是同源服务器上的一个url。而nginx通过检测url前缀,把http请求转发到后面真实的物理服务器。并通过rewrite命令把前缀再去掉。这样真实的服务器就可以正确处理请求,并且并不知道这个请求是来自代理服务器的。

简单说,nginx服务器欺骗了浏览器,让它认为这是同源调用,从而解决了浏览器的跨域问题。又通过重写url,欺骗了真实的服务器,让它以为这个http请求是直接来自与用户浏览器的。


  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值