再谈跨域

同源策略

• 获取浏览器本地存储数据：cookie、localStorage 等

• 获取 DOM

• XMLHttpRequest 和 Fetch API

跨域的几种形式

iframe

 window.name = data;//父窗口先打开一个子窗口，载入一个不同源的网页，该网页将信息写入。
 location = '<http://parent.url.com/xxx.html>';//接着，子窗口跳回一个与主窗口同域的网址。
 var data = document.getElementById('myFrame').contentWindow.name。//然后，主窗口就可以读取子窗口的window.name了

注：由于两个页面不在同一个域下IE、Chrome不允许修改parent.location.hash的值，所以要借助于a.com域名下的一个代理iframe。

var popup = window.open('<http://bbb.com>', 'title');//父窗口http://aaa.com向子窗口http://bbb.com发消息，调用postMessage方法。
popup.postMessage('Hello World!', '<http://bbb.com>');

1. event.source：发送消息的窗口。

2. event.origin： 消息发向的网址。

3. event.data：消息内容。

 var onmessage = function (event) {
   var data = event.data;//消息
   var origin = event.origin;//消息来源地址
   var source = event.source;//源Window对象
   if(origin == "<http://www.aaa.com>"){
    console.log(data);//hello world!
   }
    source.postMessage('Nice to see you!', '*');
 };
 if (typeof window.addEventListener != 'undefined') {
   window.addEventListener('message', onmessage, false);
 } else if (typeof window.attachEvent != 'undefined') {
   //ie
   window.attachEvent('onmessage', onmessage);
 }

JSONP

callback({"name": "Nicholas"});

<http://freegeoip.net/json/?callback=handleResponse>

function handleResponse(response) {
    alert(`ip: ${response.ip} city: ${response.city} region_name: ${response.region_name}`);
}

let script = document.creatElement('script');
script.src = '<http://freegeoip.net/json/?callback=handleResponse>';
document.body.insertBefore(script, document.body.firstChild);

• JSONP 是从其他域中加载代码执行，如果其他域不安全，那么响应中可能会携带一些恶意代码。

• 只能发送 GET 请求。

跨域资源共享（Cross-origin resource sharing）

• 由 XMLHttpRequest或 Fetch 发起的跨域 HTTP 请求。

• Web 字体 (CSS 中通过@font-face使用跨域字体资源)， 因此，网站就可以发布 TrueType 字体资源，并只允许已授权网站进行跨站调用。

• WebGL 贴图

• 使用 drawImage 将 Images/video 画面绘制到 canvas

• 样式表

• Scripts

• 简单请求
某些请求不会触发 CORS 预检请求。称这样的请求为“简单请求”。若请求满足所有下述条件，则该请求可视为“简单请求”：
• 使用下列方法之一：
• GET
• HEAD
• POST
• Fetch 规范定义了对 对 CORS 安全的首部字段集合 ，不得人为设置该集合之外的其他首部字段。该集合为：
• Accept
• Accept-Language
• Content-Language
• Content-Type （需要注意额外的限制）
• DPR
• Downlink
• Save-Data
• Viewport-Width
• Width
• Content-Type 的值仅限于下列三者之一：
• text/plain
• multipart/form-data
• application/x-www-form-urlencoded
• 请求中的任意XMLHttpRequestUpload 对象均没有注册任何事件监听器；XMLHttpRequestUpload 对象可以使用 XMLHttpRequest.upload 属性访问。
• 请求中没有使用 ReadableStream 对象。
简单请求示例
假如站点 http://foo.example 的网页应用想要访问 http://bar.example 的资源：

var invocation = new XMLHttpRequest();
var url = 'http:/bar.example/resources/public-data/';

function callOtherDomain() {
  if(invocation) {
    invocation.open('GET', url, true);
    invocation.onreadystatechange = handler;
    invocation.send();
  }
}

若浏览器检测到该请求为简单请求，则会自动在 HTTP 请求中添加Origin字段，它用来说明请求来自于哪个源。
本例中，服务端会返回 Access-Control-Allow-Origin: * ，这表明，该资源可以被任意外域访问。如果服务端仅允许来自http://foo.example 的访问，该首部字段的内容如下：

Access-Control-Allow-Origin: http://foo.example

Access-Control-Allow-Origin 应当为 * 或者包含由 Origin 首部字段所指明的域名。

• 预检请求客户端和浏览器的交互示意图如下：



与前述简单请求不同，“需预检的请求”要求必须首先使用 OPTIONS 方法发起一个预检请求到服务器，以获知服务器是否允许该实际请求。"预检请求“的使用，可以避免跨域请求对服务器的用户数据产生未预期的影响。
当请求满足下述任一条件时，即应首先发送预检请求：
• 使用了下面任一 HTTP 方法：
• PUT
• DELETE
• CONNECT
• OPTIONS
• TRACE
• PATCH
• 人为设置了对 CORS 安全的首部字段集合之外的其他首部字段。该集合为：
• Accept
• Accept-Language
• Content-Language
• Content-Type (but note the additional requirements below)
• DPR
• Downlink
• Save-Data
• Viewport-Width
• Width
• Content-Type 的值不属于下列之一:
• application/x-www-form-urlencoded
• multipart/form-data
• text/plain
• 请求中的XMLHttpRequestUpload 对象注册了任意多个事件监听器。
• 请求中使用了ReadableStream对象。
预检请求示例：

var invocation = new XMLHttpRequest();
var url = '<http://bar.other/resources/post-here/>';
var body = '<?xml version="1.0"?><person><name>Arun</name></person>';

function callOtherDomain(){
  if(invocation)
    {
      invocation.open('POST', url, true);
      invocation.setRequestHeader('X-PINGOTHER', 'pingpong');
      invocation.setRequestHeader('Content-Type', 'application/xml');
      invocation.onreadystatechange = handler;
      invocation.send(body);
    }
}

浏览器检测到，从 JavaScript 中发起的请求需要被预检，就会先发送一个预检请求，预检请求中同时携带了下面两个首部字段：

Access-Control-Request-Method: POST
Access-Control-Request-Headers: X-PINGOTHER, Content-Type

首部字段 Access-Control-Request-Method 告知服务器，实际请求将使用 POST 方法。首部字段 Access-Control-Request-Headers 告知服务器，实际请求将携带两个自定义请求首部字段：X-PINGOTHER 与 Content-Type。服务器据此决定，该实际请求是否被允许。
接着，服务器将接受后续的实际请求 ，返回以下首部字段：

Access-Control-Allow-Origin: <http://foo.example>
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
Access-Control-Max-Age: 86400

首部字段Access-Control-Allow-Methods表明服务器允许客户端使用POST, GET和 OPTIONS 方法发起请求。
首部字段 Access-Control-Allow-Headers表明服务器允许请求中携带字段 X-PINGOTHER与Content-Type。与Access-Control-Allow-Methods一样，Access-Control-Allow-Headers 的值为逗号分割的列表。
最后，首部字段 Access-Control-Max-Age 表明该响应的有效时间为 86400 秒，也就是 24 小时。在有效时间内，浏览器无须为同一请求再次发起预检请求。请注意，浏览器自身维护了一个最大有效时间，如果该首部字段的值超过了最大有效时间，将不会生效。

• 附带凭证信息的请求
默认情况下，跨域请求不提供凭据（ cookie、HTTP 认证及客户端 SSL 证明等）。通过将withCredentials属性设置为 true，可以指定某个请求应该发送凭证。
一个例子：

//http://foo.example站点的脚本向http://bar.other站点发送一个GET请求，并设置了一个Cookie值。脚本代码如下：
var invocation = new XMLHttpRequest();
var url = '<http://bar.other/resources/credentialed-content/>';
function callOtherDomain(){
  if(invocation) {
    invocation.open('GET', url, true);
    invocation.withCredentials = true;
    invocation.onreadystatechange = handler;
    invocation.send();
  }
}

如上，第七行代码将 XMLHttpRequest 的 withCredentials 标志设置为true，从而使得Cookies可以随着请求发送。因为这是一个简单的GET请求，所以浏览器不会发送一个“预请求”。但是，如果服务器端的响应中，如果没有返回Access-Control-Allow-Credentials： true的响应头，那么浏览器将不会把响应结果传递给发出请求的脚本程序，以保证信息的安全。
假设服务器成功响应返回部分信息如下：

Access-Control-Allow-Origin: <http://foo.example>
Access-Control-Allow-Credentials: true
Set-Cookie: pageAccess=3; expires=Wed, 31-Dec-2008 01:34:53 GMT

如果bar.other的响应头里没有 Access-Control-Allow-Credentials：true，则响应会被忽略。请注意: 给一个带有withCredentials的请求发送响应的时候，服务器端必须指定允许请求的域名,不能使用*。上面这个例子中，如果响应头是这样的 Access-Control-Allow-Origin：*，则响应会失败。在这个例子里,因为Access-Control-Allow-Origin的值是 http://foo.example 这个指定的请求域名，所以客户端把带有凭证信息的内容被返回给了客户端。另外注意，更多的 cookie 信息( expires 字段等)也被创建了。

Web Sockets

nginx 代理解决跨域

server
{
    listen 80;
    server_name foo.example;

    location / {
        proxy_pass <http://foo.example:3000>;
    }
}

• 《JavaScript 高级程序设计》

• Cross-Origin Resource Sharing (CORS)

• 前端跨域问题及解决方案