跨域

作者: web_Tracy | 来源:发表于2018-10-08 19:59 被阅读41次

深入跨域问题(3) - 利用 JSONP 解决跨域
关于设置env等环境变量的思考
Web前后端跨域问题处理
跨域
跨域问题详解分析
跨域问题：好几种解决方案
ajax readystatus=0;status=0 报错
深入跨域问题(2) - 利用 CORS 解决跨域
响应头设置跨域和Spring注解跨域
浏览器跨域的那些事

同源策略

浏览器处于安全方面的考虑，只允许与本域下的接口交互。不同源的客户端脚本在没有明确授权的情况下，不能读写对方的资源。

解释同源之前先对url进行解析

同源指的是：

协议相同
域名相同
端口相同

只要不满足上述3个条件的任意一个，即为不同源，也就是我们常说的跨域
同源策略的目的，是为了保证用户信息的安全，防止恶意的网站窃取数据

不同源的几种情况：

协议不同

http://www.a.com/a.js
https://www.a.com/a.js

域名不同

http://www.a.com/a.js
http://www.b.com/a.js

端口不同

http://www.a.com:80/a.js
http://www.a.com:8080/a.js

注：对于当前页面来说页面存放的js文件的域不重要，重要的是加载该js页面所在什么域

如果不同源，共有3种行为受到限制

无法读取非同源网页的Cookie、LocalStorage、IndexedDB
无法接触非同源网页的DOM
无法向非同源地址发送Ajax请求（可以发送，但浏览器会拒绝接受响应）

跨域的几种实现方式

当网站A需要获取网站B的数据就涉及到跨域了，本文讲述的跨域方式有以下几种：

1. JSONP（JSON with Padding）

HTML中的script标签可以加载其他域下的js，利用这点我们可以在网页上通过添加一个script元素，向服务器请求JSON数据，这种做法不受同源策略的限制；服务器收到请求后，将数据放在一个指定名字的回调函数里传回来

<body>
    <div class="container">
        <ul class="news"></ul>
        <button class="show">show news</button>
    </div>

    <script>
        var ul = document.querySelector('.news');
        var btn = document.querySelector('.show');

        btn.addEventListener('click', function(){
            var script = document.createElement('script');
            script.setAttribute('src', 'http://127.0.0.1:8080/getNews?callback=appendHtml');
            document.head.appendChild(script);
            document.head.removeChild(script);
        })

        function appendHtml(news){
            var html = '';
            for(var i = 0; i < news.length; i++){
                html += '<li>' + news[i] + '</li>';
            }
            ul.innerHTML = html;
        }
    </script>
</body>

var http = require('http');
var fs = require('fs');
var path = require('path');
var url = require('url');

http.createServer(function(req, res){
    var pathObj = url.parse(req.url, true);

    switch(pathObj.pathname){
        case '/getNews':
            var news = [
                '苹果',
                '香蕉',
                '猕猴桃'
            ];
            res.setHeader('Content-type', 'text/json; charset=utf-8');
            if(pathObj.query.callback){
                res.end(pathObj.query.callback + '(' + JSON.stringify(news) + ')');
            }else {
                res.end(JSON.stringify(news));
            }
            break;
        default:
            fs.readFile(path.join(__dirname, pathObj.pathname), function(e, data){
                if(e){
                    res.writeHead(404, 'not found');
                    res.end('<h1>404 not found</h1>');
                }else {
                    res.end(data);
                }
            })
    }
}).listen(8080);

使用node.js搭建服务器，响应数据如下所示：

点击按钮时，页面呈现效果如下所示：

JSONP的最大特点是老式浏览器全部支持，兼容性好，服务器的改造非常小；但缺点是只支持get请求，且错误处理机制不如XMLHttpRequest好

2. CORS（Cross-Origin Resource Sharing）

CORS全称是跨域资源共享，是一种ajax跨域请求资源的方式，支持现代浏览器，IE支持10以上。实现方式很简单，当你使用XMLHttpRequest发送请求时，浏览器发现该请求不符合同源策略，会给该请求加一个请求头：Origin，后台进行一系列处理，如果确定接受请求则在返回结果中加入一个响应头：Access-Control-Allow-Origin；浏览器判断该响应头中是否包含Origin的值，如果有则浏览器会处理响应，我们就可以拿到响应数据，如果不包含，浏览器直接驳回，这时我们无法拿到响应数据。

整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的ajax通信没有差别，代码一样。浏览器一旦发现ajax请求跨源，就会自动添加一些附加的请求头信息，有时还会多出一次附加的请求，但用户不会有感觉。因此，实现CORS的关键是服务器，只要服务器实现了CORS接口，就可以跨源通信

<body>
    <div class="container">
        <ul class="news"></ul>
        <button class="show">show news</button>
    </div>

    <script>
        var ul = document.querySelector('.news');
        var btn = document.querySelector('.show');

        btn.addEventListener('click', function(){
            var xhr = new XMLHttpRequest();
            xhr.open('GET', 'http://127.0.0.1:8080/getNews', true);
            xhr.send();
            xhr.onload = function(){
                appendHtml(JSON.parse(xhr.responseText))
            }
        })

        function appendHtml(news){
            var html = '';
            for(var i = 0; i < news.length; i++){
                html += '<li>' + news[i] + '</li>';
            }
            ul.innerHTML = html;
        }
    </script>
</body>

var http = require('http');
var fs = require('fs');
var path = require('path');
var url = require('url');

http.createServer(function(req, res){
    var pathObj = url.parse(req.url, true);

    switch(pathObj.pathname){
        case '/getNews':
            var news = [
                '苹果',
                '香蕉',
                '猕猴桃'
            ];
            res.setHeader('Content-type', 'text/json; charset=utf-8');
            res.setHeader('Access-Control-Allow-Origin', 'http://localhost:8080');
            res.end(JSON.stringify(news));
            break;
        default:
            fs.readFile(path.join(__dirname, pathObj.pathname), function(e, data){
                if(e){
                    res.writeHead(404, 'not found');
                    res.end('<h1>404 not found</h1>');
                }else {
                    res.end(data);
                }
            })
    }
}).listen(8080);

使用node.js搭建服务器，请求如下所示：

若将Access-Control-Allow-Origin改为*，则包含所有，任何网站都可以访问

3. 降域

例如：A网站的a.html访问B网站的b.html，A网站的域名a.xxx.com:8080，B网站的域名b.xxx.com:8080，a.html上嵌入iframe的b.html。在同源策略下这两者之间域名不同是不能互相访问的，只有在同源的情况下，父窗口和子窗口才能通信；如果跨域，就无法拿到对方的DOM。为达到目的，我们可以采取降域措施，将两者的域名设置为document.domain = 'xxx.com'，完整的代码如下所示
a.html：

<body>
    <div class="ct">
        <h1>使用降域实现跨域</h1>
        <div class="main">
            <input type="text" placeholder="http://a.xxx.com:8080/a.html">
        </div>
        <iframe src="http://b.xxx.com:8080/b.html" frameborder="0"></iframe>
    </div>

    <script>
        var input = document.querySelector('.main input');
        input.addEventListener('input', function(){
            console.log(this.value);
            window.frames[0].document.querySelector('input').value = this.value;
        });

        document.domain = 'xxx.com';
    </script>
</body>

b.html：

<body>
    <input id="input" type="text" placeholder="http://b.xxx.com:8080/b.html">

    <script>
        var input = document.querySelector('#input');
        input.addEventListener('input', function(){
            window.parent.document.querySelector('input').value = this.value;
        });

        document.domain = 'xxx.com';
    </script>
</body>

为模拟两个不同域名下的页面互相访问，我们可在本地修改host，修改如下：

127.0.0.1  a.xxx.com
192.168.1.23  b.xxx.com

因此在开始http-server后，a.html和b.html分别对应：

127.0.0.1:8080/a.html  a.xxx.com:8080/a.html
192.168.1.23:8080/b.html  b.xxx.com:8080/b.html

当在父窗口的输入框中输入字符时，子窗口的输入框也会输入相同的内容，效果如图所示：

注：此方法只适用于一级域名相同，只是二级域名不同的两个窗口，把么就可设置document.domain属性，规避同源策略

4. postMessage

仍以上个例子举例，父窗口a.xxx.com向子窗口b.xxx.com发消息，在不改变domain的情况下，调用postMessage方法即可

H5引入新的API：window.postMeaasge，此方法提供了一种受控机制来规避同源策略的限制，只要正确的使用，就可以安全地实现跨源通信，无论这两个窗口是否同源。

语法：

otherWindow.postMessage(message, targetOrigin, [transfer])

otherWindow：其他窗口的一个引用，比如iframe的contentWindow、执行window.open返回的窗口对象、或者是命名过或数值索引的window.frames
message：将要发送到其他window的数据
targetOrigin：通过窗口的origin属性来指定哪些窗口能接收到消息事件，其值可以是字符串*（表示无限制）或者一个URI（协议+域名+端口）
transfer（可选）：是一串和message同时传递的Transferable对象。这些对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权

当在父窗口使用postMessage向子窗口传递消息时，需在子窗口监听message事件

window.addEventListener('message', receiveMessage, false);

function receiveMessage(event){
  var origin = event.origin;
  if(origin !== 'http://b.xxx.com:8080'){
    return;
  }else {
    console.log(event.data);
  }
}

message事件的参数是事件对象event，提供以下3个属性：

event.data：消息内容
event.origin：调用postMessage时消息发送方窗口的origin（协议+域名+端口）
event.source：对发送消息的窗口对象的引用

a.html：

<body>
    <div class="ct">
        <h1>使用postMessage跨域</h1>
        <div class="main">
            <input type="text" placeholder="http://a.xxx.com:8080/a.html">
        </div>
        <iframe src="http://b.xxx.com:8080" frameborder="0"></iframe>
    </div>

    <script>
        var input = document.querySelector('.ct input');
        input.addEventListener('input', function(){
            window.frames[0].postMessage(this.value, '*');
            console.log(this.value)
        });

        window.addEventListener('message', function(e){
            input.value = e.data;
            console.log(e.data);
        });
    </script>
</body>

b.html：

<body>
    <input id="input" type="text" placeholder="http://b.xxx.com:8080/b.html">

    <script>
        var input = document.querySelector('#input');
        input.addEventListener('input', function(){
            window.parent.postMessage(this.value, '*');
            console.log(this.value)
        });
        
        window.addEventListener('message', function(e){
            input.value = e.data;
            console.log(e.data);
            console.log(e.source);
            console.log(e.origin); 
        });
    </script>
</body>

当在父窗口的输入框中输入字符时，子窗口的输入框也输入相同的内容，如图所示：

打印如下：

总结：本文仅详述了4种跨域的方法，还有其他的可参考阮一峰 - 同源策略

深入跨域问题(3) - 利用 JSONP 解决跨域
深入跨域问题(1) - 初识 CORS 跨域资源共享；深入跨域问题(2) - 利用 CORS 解决跨域深入跨域问题...
关于设置env等环境变量的思考
1、如何处理跨域后台处理跨域前端处理跨域浏览器处理跨域前端本地处理跨域：代理线上跨域的处理方式：Nginx反向代...
Web前后端跨域问题处理
跨域问题有前台跨域（iframe间）和后台跨域。前台跨域的解决方案可以采用跨域文档通讯（Cross domain...
跨域
跨域什么是跨域: 解决跨域通过jsonp原理:在页面引入跨域js和css时,没有存在跨域问题.因此可以动态创建...
跨域问题详解分析
参考文档 CORS详解跨域资源共享 CORS 详解 js中几种实用的跨域方法原理详解跨域的那些事儿跨域与跨域...
跨域问题：好几种解决方案
跨域分为广义跨域和狭义跨域广义跨域：一个域下的文档或脚本试图去请求另一个域下的资源；广义跨域可以分为以下几种：...
ajax readystatus=0;status=0 报错
跨域跨域跨域一定要找运维或者后台解决
深入跨域问题(2) - 利用 CORS 解决跨域
阅读目录：深入跨域问题(1) - 初识 CORS 跨域资源共享；深入跨域问题(2) - 利用 CORS 解决跨域...
响应头设置跨域和Spring注解跨域
CORS跨域原理详解Spring解决跨域响应头设置跨域 Spring注解跨域@CrossOrigin 可添加到方...
浏览器跨域的那些事
整理中目标：了解跨域解决跨域服务器配置跨域（java, nginx) 前端调试时配置解决跨域一、什么是跨...

跨域

同源策略

跨域的几种实现方式

1. JSONP（JSON with Padding）

2. CORS（Cross-Origin Resource Sharing）

3. 降域

4. postMessage

相关文章

深入跨域问题(3) - 利用 JSONP 解决跨域

关于设置env等环境变量的思考

Web前后端跨域问题处理

跨域

跨域问题详解分析

跨域问题：好几种解决方案

ajax readystatus=0;status=0 报错

深入跨域问题(2) - 利用 CORS 解决跨域

响应头设置跨域和Spring注解跨域

浏览器跨域的那些事

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

饥人谷技术博客