跨域，了解一下

2019年9月10日 213次阅读 来源: 言月

跨域的理解

跨域，顾名思义，即为请求了不同域的资源。
了解跨域这件事，我们先看看导致会存在跨域问题的根源：浏览器的同源策略
浏览器的同源策略又是什么鬼？ 好像了解一点，但是又说不清楚。这次我们就来详细探索一下。

声明一下，本文是参考众多其他有关跨域文章结合自己技术认识所做的记录，请与
浏览器同源政策及其规避方法参考着看更加合适。

同源策略：(the same-origin policy)

MDN
维基百科：
In computing, the same-origin policy is an important concept in the web application security model. Under the policy, a web browser permits scripts contained in a first web page to access data in a second web page, but only if both web pages have the same origin. An origin is defined as a combination of URI scheme, host name, and port number. This policy prevents a malicious script on one page from obtaining access to sensitive data on another web page through that page’s Document Object Model.
简单翻译一下：
在web应用安全模型中，同源策略是一个重要的概念。在该策略下，仅俩个页面有相同的源, web浏览器才允许包含在第一个页面中的脚本访问第二个web页面的数据。源被定义为 URI协议，主机名，端口号的组合。该策略阻止了一个页面的恶意脚本通过文档对象模型(DOM)获得其他的web页面的敏感数据.
那为什么会有同源策略呢，可以参考一下，CSRF这篇文章谈到CSRF这种情况。
那哪些数据会被限制呢？
敏感数据一般指的是浏览器中的Cookies, SessionStorage, LocalStorage, IndexedDB数据, CacheStorage, ApplicationCache…；

同源策略限制范围

阮一峰老师还对同源策略对于非同源，限制的行为做了归纳：

“
如果非同源，共有三种行为受到限制。
（1） Cookie、LocalStorage 和 IndexDB 无法读取。
（2） DOM 无法获得。
（3） AJAX 请求不能发送。
 虽然这些限制是必要的，但是有时很不方便，合理的用途也受到影响。下面，我将详细介绍，如何规避上面三种限制。
”

以下对阮老师总结的方法进行测试

Cookies

浏览器允许通过设置document.domain共享 Cookie。
document.domain的写操作是有要求的。只能写入基础域名和当前域名，其他域名是无法写入的，所以domain这种方式只能在亲子域名之间共享cookies
// 由于还没有相关资源（三级域名资源，域名资源），没有做验证

iframe

页面1 localhost:8080的页面，包含一个页面2 (iframe = http://localhost:8081);
页面2中访问window.parent.document报跨源错误
在页面2中window.parent可以访问,但是在iframe中访问获取到的window.parent对象中属性缺少了有关DOM的部分，而直接在页面1中查看window对象，可以看到document属性对象，而使用夸源window.parent无法获取document属性对象
  • 片段识别符（fragment identifier）
  • window.name
  • 跨文档通信API（Cross-document messaging）

片段识别符 fragment identifier

所以这种方式，无论是否夸源，父窗口可以通过更改子窗口的iframe的src中的hash值来传递数据给子窗口;
但是 在存在跨源的情况下，子窗口获取parent.location.href(可写不可读)读操作会报跨源错误，所以子窗口课件写入url的方式传递数据给父窗口。
片段识别符方式可以父传子，子传父。

window.name

document.getElementById(‘iframe’).contentWindow.name
访问出错，所以无法跨域

window.postMessage

页面1 调用iframe的iframe.contentWindow.postMessage(data,”http://localhost:8081″)
页面2 调用window的 window.parent.postMessage(data,’http://localhost:8080′)

AJAX (最常见到的情况)

“
同源政策规定，AJAX请求只能发给同源的网址，否则就报错。
除了架设服务器代理（浏览器请求同源服务器，再由后者请求外部服务），有三种方法规避这个限制。

JSONP
WebSocket
CORS
”

JSONP

// 客户端（浏览器页面）
function addScriptTag(src) {
  var script = document.createElement('script');
  script.setAttribute("type","text/javascript");
  script.src = src;
  document.body.appendChild(script);
}

window.onload = function () {
  addScriptTag('http://example.com/ip?callback=foo');//需要指定回调函数名
}

function foo(data) {
  console.log('Your public IP address is: ' + data.ip);
};


//服务端
foo({
  "ip": "8.8.8.8"
});

CORS

CORS是跨源资源分享（Cross-Origin Resource Sharing）的缩写。它是W3C标准，是跨源AJAX请求的根本解决方法。相比JSONP只能发GET请求，CORS允许任何类型的请求。
请参考 阮老师的跨域资源共享 CORS 详解

    原文作者：言月
    原文地址: https://segmentfault.com/a/1190000014891342
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞