web笔记本
首发于web笔记本
跨域总结

跨域总结

什么是跨域?

理解跨域,可以先了解下同源策略
当协议、域名、端口号其中任一个不同时,都算作不同域。不同域之间相互资源请求就是“跨域”。
同源策略是浏览器需遵循的标准,服务器端向服务器请求无需遵循。

解决方案

1、iframe + document.domain

如果两个窗口以及域名相同,只是二级域名不通,如 a.test.comb.test.com ,可以通过设置 document.cookie="test.com"实现跨域。

注意:使用 document.domain 来允许子域安全访问其父域时,您需要在父域和子域中设置 document.domain 为相同的值。这是必要的,即使这样做只是将父域设置回其原始值。不这样做可能会导致权限错误。

2、iframe + location.hash

hash指的是URL的 # 号后面的部分,如http://example.com/x.html#fragment的 #fragment。如果只改变hash,页面不会重新刷新。

父窗口把信息写入子窗口的hash:

var src = originURL + '#' + data;
document.getElementById('myIFrame').src = src

子窗口通过监听 hashchange 事件得到通知:

window.onhashchange = function(){
    var message = window.location.hash;
  // ...
}

同样,子窗口也可改变父窗口的hash:

parent.location.href = target + '#' + hash;

3、iframe + window.name

window.name 无论是否同源,只要在同一个窗口中,前一个网页设置了这个属性,后一个网页就可以读取它。大小限制约为2M,不同浏览器会有不同约定。

4、window.postMessage

postMessage()方法允许来自不同源的脚本采用异步方式进行有限的通信,可以实现跨文本档、多窗口、跨域消息传递。

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

otherWindow其他窗口的一个引用,比如iframe的contentWindow属性、执行window.open返回的窗口对象、或者是命名过或数值索引的window.frames

message将要发送到其他 window的数据。它将会被结构化克隆算法序列化。这意味着你可以不受什么限制的将数据对象安全的传送给目标窗口而无需自己序列化。

targetOrigin通过窗口的origin属性来指定哪些窗口能接收到消息事件,其值可以是字符串"*"(表示无限制)或者一个URI。在发送消息的时候,如果目标窗口的协议、主机地址或端口这三者的任意一项不匹配targetOrigin提供的值,那么消息就不会被发送;只有三者完全匹配,消息才会被发送。这个机制用来控制消息可以发送到哪些窗口;例如,当用postMessage传送密码时,这个参数就显得尤为重要,必须保证它的值与这条包含密码的信息的预期接受者的origin属性完全一致,来防止密码被恶意的第三方截获。如果你明确的知道消息应该发送到哪个窗口,那么请始终提供一个有确切值的targetOrigin,而不是*。不提供确切的目标将导致数据泄露到任何对数据感兴趣的恶意站点。

transfer 可选是一串和message 同时传递的 Transferable 对象. 这些对象的所有权将被转移给消息的接收方,而发送一方将不再保有所有权。

执行如下代码, 其他window可以监听派遣的message:

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

function receiveMessage(event)
{
  // For Chrome, the origin property is in the event.originalEvent
  // object. 
  // 这里不准确,chrome没有这个属性
  // var origin = event.origin || event.originalEvent.origin; 
  var origin = event.origin
  if (origin !== "http://example.org:8080")
    return;

  // ...
}

origin调用 postMessage 时消息发送方窗口的 origin . 这个字符串由 协议、“://“、域名、“ : 端口号”拼接而成。例如 “https://example.org (隐含端口 443)”、“http://example.net (隐含端口 80)”、“http://example.com:8080”。请注意,这个origin不能保证是该窗口的当前或未来origin,因为postMessage被调用后可能被导航到不同的位置。

source对发送消息的窗口对象的引用; 您可以使用此来在具有不同origin的两个窗口之间建立双向通信。

子窗口通过event.source属性引用父窗口,然后发送消息:

window.addEventListener('message', receiveMessage);
function receiveMessage(event) {
  event.source.postMessage('Nice to see you!', '*');
}

5、jsonp

利用<script>标签没有跨域限制,需要服务器支持。

简单兼容性好,但是只支持get方法,不安全可能会遭受XSS攻击。

思路:网页通过添加一个<script>元素,向服务器请求JSON数据,这种做法不受同源策略限制。服务器收到请求后,将数据放在一个指定名字的回调函数里传回来。

6、CORS

CORS是跨源资源分享(Cross-Origin Resource Sharing)的缩写。它是W3C标准,是跨源AJAX请求的根本解决方法。相比JSONP只能发GET请求,CORS允许任何类型的请求。

参考整理的文章 CORS

7、websocket

WebSocket是一种通信协议,使用ws://(非加密)和wss://(加密)作为协议前缀。该协议不实行同源政策,只要服务器支持,就可以通过它进行跨源通信。

参考整理的文章 websocket

8、nginx反向代理或Node中间件代理

使用nginx反向代理实现跨域,是最简单的跨域方式。只需要修改nginx的配置即可解决跨域问题,支持所有浏览器,支持session,不需要修改任何代码,并且不会影响服务器性能。

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

9、解决canvas图片getImageData,toDataURL跨域问题

zhangxinxu.com/wordpres

参考

ruanyifeng.com/blog/201

developer.mozilla.org/z

juejin.im/post/5c23993d

发布于 2019-08-23

文章被以下专栏收录