同源策略和跨域的理解

　　1、同源策略

　　　　同源策略的出现，是为了维护web届各种源（dom等资源）的和平，限制某脚本访问其他域的脚本资源。 比如，一个恶意网站的页面通过iframe嵌入了银行的登录页面（二者不同源），如果没有同源限制，恶意网页上的javascript脚本就可以在用户登录银行的时候获取用户名和密码。

　　同源概念:
        URL由协议、域名、端口和路径组成，如果两个URL的协议、域名和端口相同，则表示他们同源。

　　　如http://www.depycode.com 与http://depycode.com 就不同源，因为域名不一样，前者为子域名，后者为顶级域名。

 

　　可能很多人想到，为啥页面里可以加载远程的非同源的js、图片等，这就属于特殊情况了。你可以通过img 的src引用远程图片，通过script标签的src加载远程js，这种情况是不受同源策略影响的，可以视为本地资源，即视为同源。 而同源策略主要是限制js（目前主要这样）来读写其他域的dom数据，说白了，就是html。 你也可以这样理解：同源策略只对网页的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>

其中

http://localhost:8080/test.html 与 http://localhost:8081/test2.html 非同源，访问受到了限制。 firefox就会提示：   Error: Permission denied to access property 'body'



2、理解跨域：

先说说jsonp。
　　前面说过script标签的src是可以跨域引用js，把js加载到自己的域中来执行。因此我们可以在引用js的同时提交一些参数，这样B站根据参数做出相应的操作后，将操作的结果写入到js文件中，并返回给A站点，这样A站点就得到了B站点的数据了。

　　

　　第一框中function是A站在加载完B站数据后执行的函数。第二框是一个DOM中添加一个script标签。因此我们现在有必要看看B站后台是怎么实现的：

　　

　　重点是要输出要确定Content-Type,然后就是拼凑javascript代码了。

　　

posted @ 2016-08-21 09:56  B1gstar  阅读(1053)  评论(0)  编辑  收藏  举报