跨域问题产生的原因以及十种解决方案

一、什么是跨域?

在前端领域中,跨域是指浏览器允许向服务器发送跨域请求,从而克服Ajax只能同源使用的限制。
  
  当跨域时会收到以下错误
跨域问题产生的原因以及十种解决方案

二、什么是同源策略?

同源策略是一种约定,由Netscape公司1995年引入浏览器,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同,即便两个不同的域名指向同一个ip地址,也非同源。

URL组成:
跨域问题产生的原因以及十种解决方案

同源策略限制以下几种行为:

  • Cookie、LocalStorage 和 IndexDB 无法读取
  • DOM和JS对象无法获得
  • AJAX 请求不能发送

三、解决方案

1.JSONP跨域

原理:就是利用<script>标签没有跨域限制,通过<script>标签src属性,发送带有callb信息中,Origin字段用来说明,本次请求来自哪个源(协议 + 域名 + 端口)。服务器根据这个值,决定是否同意这次请求。

CORS跨域示例

原生ajax:

var xhr = new XMLHttpRequest(); // IE8/9需用window.XDomainRequest兼容  // 前端设置是否带cookie xhr.withCredentials = true;  xhr.open('post', 'http://www.domain2.com:8080/login', true); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.send('user=admin');  xhr.onreadystatechange = function() {     if (xhr.readyState == 4 && xhr.status == 200) {         alert(xhr.responseText);     } }; 

jquery ajax:

$.ajax({     ...    xhrFields: {        withCredentials: true    // 前端设置是否带cookie    },    crossDomain: true,   // 会让请求头中包含跨域的额外信息,但不会含cookie     ... }); 

3.nginx代理跨域

nginx代理跨域,实质和CORS跨域原理一样,通过配置文件设置请求响应头Access-Control-Allow-Origin…等字段。

nginx配置解决iconfont跨域

浏览器跨域访问js、css、img等常规静态资源被同源策略许可,但iconfont字体文件(eot|otf|ttf|woff|svg)例外,此时可在nginx的静态资源服务器中加入以下配置。

location / {   add_header Access-Control-Allow-Origin *; } 

nginx反向代理接口跨域

跨域问题:同源策略仅是针对浏览器的安全策略。服务器端调用HTTP接口只是使用HTTP协议,不需要同源策略,也就不存在跨域问题。

实现思路:通过Nginx配置一个代理服务器域名与domain1相同,端口不同)做跳板机,反向代理访问domain2接口,并且可以顺便修改cookie中domain信息,方便当前域cookie写入,实现跨域访问。
nginx具体配置:

#proxy服务器

server {     listen       81;     server_name  www.domain1.com;      location / {         proxy_pass   http://www.domain2.com:8080;  #反向代理         proxy_cookie_domain www.domain2.com www.domain1.com; #修改cookie里域名         index  index.html index.htm;          # 当用webpack-dev-server等中间件代理接口访问nignx时,此时无浏览器参与,故没有同源限制,下面的跨域配置可不启用         add_header Access-Control-Allow-Origin http://www.domain1.com;  #当前端只跨域不带cookie时,可为*         add_header Access-Control-Allow-Credentials true;     } } 

4.nodejs中间件代理跨域

node中间件实现跨域代理,原理大致与nginx相同,都是通过启一个代理服务器,实现数据的转发,也可以通过设置cookieDomainRewrite参数修改响应头中cookie中域名,实现当前域的cookie写入,方便接口登录认证。

使用node + express + http-proxy-middleware搭建一个proxy服务器。

前端代码:

var xhr = new XMLHttpRequest();  // 前端开关:浏览器是否读写cookie xhr.withCredentials = true;  // 访问http-proxy-middleware代理服务器 xhr.open('get', 'http://www.domain1.com:3000/login?user=admin', true); xhr.send(); 

中间件服务器代码:

var express = require('express'); var proxy = require('http-proxy-middleware'); var app = express();  app.use('/', proxy({     // 代理跨域目标接口     target: 'http://www.domain2.com:8080',     changeOrigin: true,      // 修改响应头信息,实现跨域并允许带cookie     onProxyRes: function(proxyRes, req, res) {         res.header('Access-Control-Allow-Origin', 'http://www.domain1.com');         res.header('Access-Control-Allow-Credentials', 'true');     },      // 修改响应信息中的cookie域名     cookieDomainRewrite: 'www.domain1.com'  // 可以为false,表示不修改 }));  app.listen(3000); console.log('Proxy server is listen at port 3000...'); 

5.document.domain + iframe跨域

该方式只能用于二级域名相同的情况下,比如a.test.com和b.test.com适用于该方式。 只需要给页面添加document.domain ='test.com’表示二级域名都相同就可以实现跨域。

www.   baidu.  com     . 三级域  二级域   顶级域   根域 

实现原理:两个页面都通过js强制设置document.domain为基础主域,就实现了同域。

例子:

父窗口:(www.domain.com/a.html)

<iframe id="iframe" src="http://child.domain.com/b.html"></iframe> <script>     document.domain = 'domain.com';     var user = 'admin'; </script> 

子窗口:(child.domain.com/a.html)

<script>     document.domain = 'domain.com';     // 获取父窗口中变量     console.log('get js data from parent ---> ' + window.parent.user); </script> 

6.location.hash + iframe跨域

实现原理: a欲与b跨域相互通信,通过中间页c来实现。 三个页面,不同域之间利用iframe的location.hash传值,相同域之间直接js访问来通信。

具体实现:A域:a.html -> B域:b.html -> A域:c.html,a与b不同域只能通过hash值单向通信,b与c也不同域也只能单向通信,但c与a同域,所以c可通过parent.parent访问a页面所有对象。

a.html:(www.domain1.com/a.html)

<iframe id="iframe" src="http://www.domain2.com/b.html" style="display:none;"></iframe> <script>     var iframe = document.getElementById('iframe');      // 向b.html传hash值     setTimeout(function() {         iframe.src = iframe.src + '#user=admin';     }, 1000);          // 开放给同域c.html的回调方法     function onCallback(res) {         alert('data from c.html ---> ' + res);     } </script> 

b.html:(www.domain2.com/b.html)

<iframe id="iframe" src="http://www.domain1.com/c.html" style="display:none;"></iframe> <script>     var iframe = document.getElementById('iframe');      // 监听a.html传来的hash值,再传给c.html     window.onhashchange = function () {         iframe.src = iframe.src + location.hash;     }; </script> 

c.html:(www.domain1.com/c.html)

<script>     // 监听b.html传来的hash值     window.onhashchange = function () {         // 再通过操作同域a.html的js回调,将结果传回         window.parent.parent.onCallback('hello: ' + location.hash.replace('#user=', ''));     }; </script> 

7.window.name + iframe跨域

window.name属性的独特之处:name值在不同的页面(甚至不同域名)加载后依旧存在,并且可以支持非常长的 name 值(2MB)。

通过iframe的src属性由外域转向本地域,跨域数据即由iframe的window.name从外域传递到本地域。这个就巧妙地绕过了浏览器的跨域访问限制,但同时它又是安全操作。

a.html:(www.domain1.com/a.html)

var proxy = function(url, callback) {     var state = 0;     var iframe = document.createElement('iframe');      // 加载跨域页面     iframe.src = url;      // onload事件会触发2次,第1次加载跨域页,并留存数据于window.name     iframe.onload = function() {         if (state === 1) {             // 第2次onload(同域proxy页)成功后,读取同域window.name中数据             callback(iframe.contentWindow.name);             destoryFrame();          } else if (state === 0) {             // 第1次onload(跨域页)成功后,切换到同域代理页面             iframe.contentWindow.location = 'http://www.domain1.com/proxy.html';             state = 1;         }     };      document.body.appendChild(iframe);      // 获取数据以后销毁这个iframe,释放内存;这也保证了安全(不被其他域frame js访问)     function destoryFrame() {         iframe.contentWindow.document.write('');         iframe.contentWindow.close();         document.body.removeChild(iframe);     } };  // 请求跨域b页面数据 proxy('http://www.domain2.com/b.html', function(data){     alert(data); }); 

proxy.html:(www.domain1.com/proxy.html)

中间代理页,与a.html同域,内容为空即可。

b.html:(www.domain2.com/b.html)

<script>     window.name = 'This is domain2 data!'; </script> 

8.postMessage跨域

postMessage
 postMessage是HTML5 XMLHttpRequest Level 2中的API,且是为数不多可以跨域操作的window属性之一,它可用于解决以下方面的问题:

  • 页面和其打开的新窗口的数据传递
  • 多窗口之间消息传递
  • 页面与嵌套的iframe消息传递
  • 上面三个场景的跨域数据传递
otherWindow.postMessage(message, targetOrigin, [transfer]); 
  • otherWindow: 其他窗口的一个引用,比如 iframe 的 contentWindow 属性、执行window.open返回的窗口对象、或者是命名过或数值索引的window.frames。
  • message: 将要发送到其他 window 的数据。
  • targetOrigin: 通过窗口的 origin 属性来指定哪些窗口能接收到消息事件.
  • transfer(可选) : 是一串和 message 同时传递的Transferable对象. 这些对象的所有权将被转移给消息的接收方,而发送一方将不再保有所有权

例子:
a.html:(www.domain1.com/a.html)

<iframe id="iframe" src="http://www.domain2.com/b.html" style="display:none;"></iframe> <script>            var iframe = document.getElementById('iframe');     iframe.onload = function() {         var data = {             name: 'aym'         };         // 向domain2传送跨域数据         iframe.contentWindow.postMessage(JSON.stringify(data), 'http://www.domain2.com');     };      // 接受domain2返回数据     window.addEventListener('message', function(e) {         alert('data from domain2 ---> ' + e.data);     }, false); </script> 

b.html:(www.domain2.com/b.html)

<script>     // 接收domain1的数据     window.addEventListener('message', function(e) {         alert('data from domain1 ---> ' + e.data);          var data = JSON.parse(e.data);         if (data) {             data.number = 16;              // 处理后再发回domain1             window.parent.postMessage(JSON.stringify(data), 'http://www.domain1.com');         }     }, false); </script>   

9.WebSocket协议跨域

原理:这种方式本质没有使用了 HTTP 的响应头, 因此也没有跨域的限制。

WebSocket protocol是HTML5一种新的协议。它实现了浏览器与服务器全双工通信,同时允许跨域通讯,是server push技术的一种很好的实现。
在网络浏览器和服务器之间建立“套接字”连接。简单地说:客户端和服务器之间存在持久的连接,而且双方都可以随时开始发送数据。

前端代码:

<script>   let socket = new WebSocket("ws://localhost:8080");   socket.onopen = function() {     socket.send("holle");   };   socket.onmessage = function(e) {     console.log(e.data);   }; </script> 

后端代码 :

const WebSocket = require("ws"); const server = new WebSocket.Server({ port: 8080 }); server.on("connection", function(socket) {   socket.on("message", function(data) {     socket.send(data);   }); }); 

10.浏览器开启跨域

其实跨域问题是浏览器策略,源头是他,关闭这个功能

Windows
找到你安装的目录

.GoogleChromeApplicationchrome.exe --disable-web-security --user-data-dir=xxxx 

Mac
~/Downloads/chrome-data这个目录可以自定义.

/Applications/Google Chrome Canary.app/Contents/MacOS/Google Chrome Canary  --disable-web-security --user-data-dir=~/Downloads/chrome-data 

四、同源策略在防什么

跨域只存在于浏览器端。而浏览器为 web 提供访问入口。我们在可以浏览器内打开很多页面。正是这样的开放形态,所以我们需要对他有所限制。就比如林子大了,什么鸟都有,我们需要有一个统一的规范来进行约定才能保障这个安全性。

  1. 限制不同源的请求,防止JavaScript代码对非同源页面的各种请求(CSRF攻击)
    例如用户登录 a 网站,同时新开 tab 打开了 b 网站,如果不限制同源, b 可以像 a 网站发起任何请求,会让不法分子有机可趁。
  2. 限制 dom 操作,对其他页面DOM元素(通常包含敏感信息,比如input标签)的读取()
    钓鱼网站

五、总结

  • jsonp(只支持get请求,支持老的IE浏览器)适合加载不同域名的js、css,img等静态资源;
  • CORS(支持所有类型的HTTP请求,但浏览器IE10以下不支持)适合做ajax各种跨域请求;
  • Nginx代理跨域和nodejs中间件跨域原理都相似,都是搭建一个服务器,直接在服务器端请求HTTP接口,这适合前后端分离的前端项目调后端接口。
  • document.domain+iframe适合主域名相同,子域名不同的跨域请求。
  • postMessage、websocket都是HTML5新特性,兼容性不是很好,只适用于主流浏览器和IE10+。
跨域问题产生的原因以及十种解决方案

参考

https://segmentfault.com/a/1190000022398875
https://juejin.cn/post/6844903882083024910

本文链接https://blog.csdn.net/qq_39903567/article/details/115532420

版权声明:玥玥 发表于 2021-04-13 12:05:29。
转载请注明:跨域问题产生的原因以及十种解决方案 | 女黑客导航