跨域.md · Mr.shi/font-face-sutra

## 跨域

意义：为了保证不同系统之间的安全性，浏览器引入了“同源策略”。防止恶意窃取网站数据。

“同源” 指 协议、域名、端口相同

> 设想这样一种情况：A网站是一家银行，用户登录以后，又去浏览其他网站。如果其他网站可以读取A网站的 Cookie，会发生什么？
>
> 很显然，如果 Cookie 包含隐私（比如存款总额），这些信息就会泄漏。更可怕的是，Cookie 往往用来保存用户的登录状态，如果用户没有退出登录，其他网站就可以冒充用户，为所欲为。因为浏览器同时还规定，提交表单不受同源政策的限制。

“同源策略”会限制一下资源请求

* Cookie、LocalStorage 和IndexDB无法读取
* DOM 无法获得
* Ajax 请求不能发送

### 1 document.domain 共享cookie

必须满足条件：**两个网页一级域名相同，只是二级域名不同**，浏览器允许通过设置`document.domain`共享 Cookie

>  举例来说，A网页是`http://w1.example.com/a.html`，B网页是`http://w2.example.com/b.html`，那么只要设置相同的`document.domain`，两个网页就可以共享Cookie。

`document.domain = 'example.com';`

A页面设置cookie ：`document.cookie = "test1=hello";`

B页面读取cookie :  `var allCookie = document.cookie;`

注意，这种方法只适用于 Cookie 和 iframe 窗口，LocalStorage 和 IndexDB 无法通过这种方法，规避同源政策，而要使用下文介绍的PostMessage API。

另外，服务器也可以在设置Cookie的时候，指定Cookie的所属域名为一级域名，比如`.example.com`。

> ```http
> Set-Cookie: key=value; domain=.example.com; path=/
> ```

这样的话，二级域名和三级域名不用做任何设置，都可以读取这个Cookie。

**测试得到结论**： cookie同源与协议和端口无关，即127.0.0.1:8000和127.0.0.1:7000可以共享cookie

### 2 iframe

如果**两个网页不同源**，就**无法拿到对方的DOM**。典型的例子是`iframe`窗口和`window.open`方法打开的窗口，它们与父窗口无法通信。

比如，父窗口运行下面的命令，如果`iframe`窗口不是同源，就会报错

```js
document.getElementById("myIFrame").contentWindow.document
// Uncaught DOMException: Blocked a frame from accessing a cross-origin frame.
```

如果两个窗口一级域名相同，只是二级域名不同，那么设置上一节介绍的`document.domain`属性，就可以规避同源政策，拿到DOM。

<hr>

对于完全不同源的网站，目前有三种方法，可以解决跨域窗口的通信问题。

- 片段识别符（fragment identifier）
- window.name
- 跨文档通信API（Cross-document messaging）

#### 2.1 片段识别符

片段标识符（fragment identifier）指的是，URL的`#`号后面的部分,比如`http://example.com/x.html#fragment`的`#fragment`。如果只是改变片段标识符，页面不会重新刷新。

父窗口可以把信息，写入子窗口的片段标识符。

```javascript
// 父窗口页面
 var src = originURL + '#' + data;
 document.getElementById('myIFrame').src = src;
 ```

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

```js
// 子窗口页面
window.onhashchange = checkMessage;

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

同样的，子窗口也可以改变父窗口的片段标识符。

**错误方式**

```js
parent.location.href= target + "#" + hash;
//2.html:25 Uncaught DOMException: Blocked a frame with origin "http://127.0.0.1:5500" from accessing a cross-origin frame. at window.onhashchange(http://127.0.0.1:5500/2.html:25:41)window.onhashchange @ 2.html:25
```

#### 2.2 window.name

这个属性的最大特点是，无论是否同源，只要在同一个窗口里，前一个网页设置了这个属性，后一个网页可以读取它。

`window.name`是一个所有浏览器都有的属性，表示浏览器窗口的名称，默认是一个空字符串，所有浏览器都是个空字符串。

`window.name`有个很有意思的**跨页面特性**，具体描述为：页面如果设置了`window.name`，即使进行了页面跳转到了其他页面，这个`window.name`还是会保留。

`window.name`的值是跟着浏览器窗体走的，因此，只要在一个窗体中，就可以共享一个值，于是可以实现跨域数据获取，这个在以前还是挺有名的一个跨域方法，名叫“window.name Transport”，有兴趣可以参考[这个2008年的老文](https://www.sitepen.com/blog/windowname-transport/)，这里不展开，这个跨域方法要比JSONP要安全些。

#### 2.3 window.postMessage

HTML5为了解决跨域问题，引入了一个全新的API：跨文档通信 API（Cross-document messaging）。

这个API为`window`对象新增了一个`window.postMessage`方法，允许跨窗口通信，不论这两个窗口是否同源。

>  举例来说，父窗口`http://aaa.com`向子窗口`http://bbb.com`发消息，调用`postMessage`方法就可以了。

一般与iframe结合使用：

```js
// 父页面包含iframe子页面
iframe.onload = function(){
    iframe.contentWindow.postMessage('消息','http://127.0.0.1:8081')// 协议、域名+端口号
}
```

```js
// 子页面监听父页面传递消息
window.addEventListenner('message',messageHandle, false);
// ev消息对象 属性 source（发送源的引用） origin（发送消息源包括协议、域名、端口号） data（消息数据）
function messageHandle(ev){ 
    console.log(ev.data) //获取传递的消息
    ev.source.postmessage('消息', ev.origin)
}
```

可以通过event.origin  判断过滤不需要的消息

Mr.shi/font-face-sutra

简介

发行版

贡献者

近期动态

Mr.shi/font-face-sutra .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

Mr.shi/font-face-sutra