关于同源策略和跨域访问的理解

最新推荐文章于 2022-07-05 18:17:16 发布

zhangbinu

最新推荐文章于 2022-07-05 18:17:16 发布

阅读量834

点赞数 1

分类专栏：前端技术网络安全文章标签：安全浏览器

本文链接：https://blog.csdn.net/zhangbinu/article/details/75103456

版权

网络安全同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

前端技术

4 篇文章 0 订阅

订阅专栏

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

举个例子：
    比如一个恶意网站的页面通过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"，则来自两个子域名的脚本即可相互访问。

JSONP
JSONP技术实际和Ajax没有关系。我们知道

<script src="http://localhost:8081/test_data.js">  
    <script>  
        function test_handler(data) {  
            console.log(data);  
        }  
</script>

服务器端的Javascript脚本（http://localhost:8081/test_data.js）：

 test_handler('{"data": "something"}');

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

<script type="text/javascript">  
        // this shows dynamic script insertion  
        var script = document.createElement('script');  
        script.setAttribute('src', url);  
        // load the script  
        document.getElementsByTagName('head')[0].appendChild(script);   
</script>

JSONP协议封装了上述步骤，jQuery中统一是现在AJAX中(其中data type为JSONP)：
http://localhost:8080/test?callback=test_handler

为了支持JSONP协议，服务器端必须提供特别的支持[2]，另外JSONP只支持GET请求。

参考博客
同源策略和跨域访问

zhangbinu

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录