浏览器同源策略以及跨域解决方法

最新推荐文章于 2023-07-29 15:51:41 发布

诸葛胖虎

最新推荐文章于 2023-07-29 15:51:41 发布

阅读量545

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/weixin_43074337/article/details/99850304

版权

js 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

什么是浏览器的同源策略

同源是指同协议、同域名、同端口
注：IE 未将端口号加入到同源策略的组成部分之中

浏览器同源策略的目的是为了保证用户信息的安全，防止恶意的网站窃取数据。如果网页之间不满足同源要求，将不能:
共享Cookie、LocalStorage、IndexDB
获取DOM
AJAX请求不能发送

另外，同源策略又分为以下两种：

DOM 同源策略：禁止对不同源页面 DOM 进行操作。这里主要场景是 iframe 跨域的情况，不同域名的 iframe 是限制互相访问的。
XMLHttpRequest 同源策略：禁止使用 XHR 对象向不同源的服务器地址发起 HTTP 请求。

同源策略是浏览器的行为，是为了保护本地数据不被JavaScript代码获取回来的数据污染，因此拦截的是客户端发出的请求回来的数据接收，即请求发送了，服务器响应了，但是无法被浏览器接收。

开发中如何规避

(1)通过设置window.domain的方式实现共享cookie
这种方法适用于一级域名相同，二级域名不同的时候使用
例如：现在有www.example.com和example.com两个网页，可以通过设置window.domain的形式来处理,前端页面可以通过设置window.domain=example.com或者后台设置Set-Cookie: key=value; domain=.example.com; path=/来实现共享cookie

(2)通过修改片段标识符的方法实现跨域
这种方法适用于iframe嵌套网页间的跨域。片段标识符就是URL的#号后面的部分。改变片段标识符，页面不会刷新.

父窗口向子窗口传递信息

//父窗口
var src = originURL + '#' + data;
document.getElementById('myIFrame').src = src;
//子窗口通过监听hashchange事件回去父窗口传递的信息
window.onhashchange = checkMessage;
function checkMessage() {
  var message = window.location.hash;
  // ...
}

子窗口向父窗口传递信息

//子窗口修改父窗口的片段标识符，同样，父窗口也可以通过hashchange事件来获取数据
parent.location.href= target + "#" + hash;

(3)使用window.name处理跨域问题
window.name属性具有如下特点，无论是否同源，只要在同一窗口中设置了该属性，后一个网页就可以读取到。该方法借助window.name这一属性和iframe具有跨域能力的关键点，来处理跨域问题。
首先，在localhost:8080服务器创建文件demo.html和空白文件proxy.html,然后，在localhost:8081服务器创建data.html文件，文件内容如下所示：

//localhost:8080/demo.html
<!doctype html>
<html>
    <head>
        <title>demo</title>
    </head>
    <body>
        <h1>demo</h1>
        <iframe id="myIframe" width="400" height="400"></iframe>
        <script>
            var myIframe = document.getElementById('myIframe');
            myIframe.src = 'http://localhost:8081/yzdj-mobile-web/data.html';
            var state = 0;
            myIframe.onload = function(){
                if(state === 1) {
                    console.log(myIframe.contentWindow.name);
                    myIframe.contentWindow.document.write('');
                    myIframe.contentWindow.close();
                }else if(state === 0){
                    state = 1;
                    myIframe.contentWindow.location = 'http://localhost:8080/yzdj-admin-web/proxy.html';
                }
            }
        </script>
    </body>
</html>

//localhost:8081/data.html
<!doctype html>
<html>
    <head>
        <title>data</title>
    </head>
    <body>
        <h1>data</h1>
        <script type="text/javascript">
            window.name = '{a:1,b:2}';
        </script>
    </body>
</html>

这种解决方法的优点是window.name容量大，缺点是：需要监听window.name变化，影响网页性能。

(4)使用window.postMessage解决跨域
这种方法借助HTML5的跨文档API（cross-document messaging）中增加的window.postMessage方法，允许跨窗口通信，不管窗口是否同源。父窗口和子窗口可以监听message事件，获取对方发送的消息。这种方法可以实现LocalStorage等信息的共享。
message的event对象提供三个属性：

event.source：发送消息的窗口
event.origin: 消息发向的网址
event.data: 消息内容

下面分别使用window.open的方法和嵌套iframe的方法实现父子窗口之间的通信
使用window.open方法父页面：

<html>
    <head>
        <title>admin</title>
    </head>
    <body>
        <h1 class="header">parent</h1>
        <div class="mb20">
            <textarea name="ta" id="data" cols="30" rows="5">hello world</textarea>
            <button style="font-size:20px;" onclick="send()">post message</button>
        </div>
        <script>
        var pop = window.open('http://localhost:8181/yzdj-mobile-web/demo.html');
        function send() {
            var data = document.querySelector('#data').value;
            pop.postMessage(data, 'http://localhost:8181/'); // 触发跨域子页面的messag事件
        }
        
        window.addEventListener('message', function(messageEvent) {
            var data = messageEvent.data; 
            console.info('message from child:', data);
        }, false);
        </script>
    </body>
</html>

子页面

//localhost:8081
<!doctype html>
<html>
    <head>
        <title>mobile</title>
    </head>
    <body>
        <h1 class="header">chidren</h1>
        <input type="text" id="inp" value="some contents..">
        <button onclick="send()">send</button>
        
        <script>
        var origin ='';
        var source = '';
        window.addEventListener('message', function(ev) {
            var data = ev.data;
            origin = ev.origin;
            source = ev.source
            console.info('message from parent:', data);
        }, false);
        
        function send() {
            var data = document.querySelector('#inp').value;
            source.postMessage(data, origin); // 若父页面的域名和指定的不一致，则postMessage失败
        }
        </script>
    </body>
</html>

使用iframe嵌套的方法,父页面

<!doctype html>
<html>
    <head>
        <title>parent</title>
    </head>
    <body>
        <h1 class="header">parent</h1>
        <div class="mb20">
            <textarea name="ta" id="data" cols="30" rows="5">hello world</textarea>
            <button style="font-size:20px;" onclick="send()">post message</button>
        </div>
        <!-- 跨域的情况 -->
        <iframe src="http://localhost:8081/b.html" id="child" style="display: block; border: 1px dashed #ccc; height: 300px;"></iframe>
        
        <script>
            function send() {
                var data = document.querySelector('#data').value;
                window.frames[0].postMessage(data, 'http://localhost:9022/'); // 触发跨域子页面的messag事件
            }
            
            window.addEventListener('message', function(messageEvent) {
                var data = messageEvent.data; 
                console.info('message from child:', data);
            }, false);
        </script>
    </body>
</html>

子页面

<!doctype html>
<html>
    <head>
        <title>chilren</title>
    </head>
    <body>
        <h1 class="header">chilren</h1>
        
        <input type="text" id="inp" value="some contents..">
        <button onclick="send()">send</button>
        
        <script>
            window.addEventListener('message', function(ev) {
                var data = ev.data;
                console.info('message from parent:', data);
            }, false);
            
            function send() {
                var data = document.querySelector('#inp').value;
                parent.postMessage(data, 'http://localhost:9011/'); // 若父页面的域名和指定的不一致，则postMessage失败
            }
        </script>
    </body>
</html>

(5)使用JSONP来实现AJAX的跨域
实现JSONP可以通过向HTML中添加script标签，由它向网址发送请求

$('body').append('http://www.example.com/getData?callback=foo');

fucntion foo(data){
    
}

(6)webSocket
是一种通信协议，使用ws://和wss://作为协议前缀，这种协议不受同源政策的影响，只要服务器支持就可以。

(7)CORS(Cross-Origin Resource Sharing,跨源资源分享)
它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。这种解决跨域方法的优点是允许任何形式的请求，而JSONP只能发GET请求。

实现CORS通信的关键是服务器，只要服务器实现了CORS接口，就可跨源通信
(8)还有一种方法是使用Nginx转发。暂时还不了解，后续添加

诸葛胖虎

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浏览器同源策略以及跨域解决方法

什么是浏览器的同源策略同源是指同协议、同域名、同端口注：IE 未将端口号加入到同源策略的组成部分之中浏览器同源策略的目的是为了保证用户信息的安全，防止恶意的网站窃取数据。如果网页之间不满足同源要求，将不能:共享Cookie、LocalStorage、IndexDB获取DOMAJAX请求不能发送另外，同源策略又分为以下两种：DOM 同源策略：禁止对不同源页面 DOM 进行操作。这里主...
复制链接

扫一扫