总结解决跨域的7种方法

Doing
208 阅读4分钟

跨域

  • 跨域：浏览器不能执行其他网站的脚本，是由浏览器的同源策略造成的，是浏览器对JS实施的安全限制（只要协议、域名、端口有任何一个不同，都被当作是不同的域）

  • 跨域原理：通过各种方式避开浏览器的安全限制

  • 实现方法：

    1. CORS；
    2. 代理服务器nginx；
    3. JSONP；
    4. document.domain+iframe；
    5. location.hash+iframe；
    6. window.name+iframe；
    7. postMessage

  • 说在前头：

    • 简单的跨域请求---jsonp
    • 复杂的---cors
    • 窗口之间JS跨域---postMessage
    • 开发环境下接口跨域---nginx反向代理或node中间件

什么是跨域？

什么是同源策略及其限制内容？

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

同源策略限制内容有：

  • Cookie、LocalStorage、IndexedDB 等存储性内容
  • DOM 节点
  • AJAX 请求发送后，结果被浏览器拦截了

但是有三个标签是允许跨域加载资源：

  • <img src=XXX>
  • <link href=XXX>
  • <script src=XXX>

常见跨域场景

image.png

有两点需要注意

第一：如果是协议和端口造成的跨域问题‘前台’是无能为力的

第二：在跨域问题上，仅仅是通过‘URL的首部’来识别而不会根据域名对应的IP地址是否相同来判断，’’url’首部可以理解为协议，域名，端口必须匹配。

跨域并不是发不出去请求，请求可以发送，服务器端能收到请求并返回正常结果，只是结果被拦截了，ajax发送的请求确实发送了，服务器也响应了，但是返回的结果被拦截了，这也说明不能完全阻止CSRF，因为请求还是发送了出去。

跨域解决方法

JSONP：通过动态创建script，再请求一个带参网址实现跨域通信。

  1. 原理：script标签没有跨域限制的漏洞，网页可以得到其他来源产生的json数据，jsonp请求一定需要对方的服务器做支持才可以

  2. JSONP和AJAX对比

    两者几乎相同，都是客户端向服务器端发送请求，从服务器daunt获取数据的方式，但ajax属于同源策略，jsonp属于非同源策略（跨站请求）

  3. 优缺点

    优点是兼容性好，可用于解决主流浏览器的跨域数据访问的问题，缺点是仅仅支持get方法，具有局限性，可能会遭受XSS攻击

  4. 实现流程

    通常为了减轻web服务器的负载，我们把js、css，img等静态资源分离到另一台独立域名的服务器上，在html页面中再通过相应的标签从不同域名下加载静态资源，而被浏览器允许，基于此原理，我们可以通过动态创建script，再请求一个带参网址实现跨域通信。

    <script>
   var script = document.createElement('script');
   script.type = 'text/javascript';

   // 传参一个回调函数名给后端，方便后端返回时执行这个在前端定义的回调函数
   script.src = 'http://www.domain2.com:8080/login?user=admin&callback=handleCallback';
   document.head.appendChild(script);

   // 回调执行函数
   function handleCallback(res) {
       alert(JSON.stringify(res));
   }
</script>

postmessage

  • 介绍：postmessage是H5中的API，且是为数不多可以跨域操作的window属性之一，它可以用于解决以下方面的问题：

    • 页面和其它打开的新窗口的数据传递
    • 多窗口之间的消息传递
    • 页面与嵌套的iframe消息传递

  • 用法：postMessage(data,origin)方法接受两个参数

    • data： html5规范支持任意基本类型或可复制的对象，但部分浏览器只支持字符串，所以传参时最好用JSON.stringify()序列化。
    • origin： 协议+主机+端口号，也可以设置为”*”，表示可以传递给任意窗口，如果要指定和当前窗口同源的话设置为”/“。

  • 例子： http://localhost:3000/a.html页面向http://localhost:4000/b.html传递“我爱你”,然后后者传回”我不爱你”。

// a.html
<iframe src="http://localhost:4000/b.html" frameborder="0" id="frame" onload="load()"></iframe> //等它加载完触发一个事件
//内嵌在http://localhost:3000/a.html
  <script>
    function load() {
      let frame = document.getElementById('frame')
      frame.contentWindow.postMessage('我爱你', 'http://localhost:4000') //发送数据
      window.onmessage = function(e) { //接受返回数据
        console.log(e.data) //我不爱你
      }
    }
  </script>

// b.html
window.onmessage = function(e) {
  console.log(e.data) //我爱你
  e.source.postMessage('我不爱你', e.origin)
}

document.domain + iframe跨域：

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

此方案仅限主域相同，子域不同的跨域应用场景。

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

1.）父窗口

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

2.）子窗口

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

window.name + iframe跨域：

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

CORS：服务端设置Access-Control-Allow-Origin即可，前端无须设置，若要带cookie请求，前后端都需要设置。

服务器设置 Access-Control-Allow-Origin 就可以开启CORS，该属性表示哪些域名可以访问资源，如果设置通配符则表示所有网站都可以实现访问资源

通过这种方式解决跨域问题的话会在发送的时候有两种情况，分别为简单请求和复杂请求。

1 简单请求

同时满足以下条件，就属于简单请求

  • 使用下列方法之一：get head post

  • 头部字段中Contenet-Type的值仅限于下列三者之一：

    text/plain

    multipart/form-data

    application/x-www-form-urlencoded

2 复杂请求

不符合以上条件的请求则为复杂请求。 复杂请求的CORS请求，会在正式通信之前，增加一次HTTP查询请求，称为”预检”请求,该请求是 option 方法的，通过该请求来知道服务端是否允许跨域请求。

代理跨域：ngnix启一个代理服务器，实现数据的转发：

同源策略是浏览器的安全策略，不是HTTP协议的一部分。服务器端调用HTTP接口只是使用HTTP协议，不会执行JS脚本，不需要同源策略，也就不存在跨越问题。

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

WebSocket协议跨域

WebSocket protocol是HTML5一种新的协议。它实现了浏览器与服务器全双工通信，同时允许跨域通讯，是server push技术的一种很好的实现。原生WebSocket API使用起来不太方便，我们使用Socket.io，它很好地封装了webSocket接口，提供了更简单、灵活的接口，也对不支持webSocket的浏览器提供了向下兼容

应用场景

简单的跨域请求jsonp即可，复杂的cors，窗口之间JS跨域postMessage，开发环境下接口跨域用nginx反向代理或node中间件比较方便。

avatar
文章
阅读
粉丝