JavaScript同源策略以及跨域

JavaScript 同源策略

概念：同源策略是客户端脚本(尤其是JavaScript)的重要安全度量标准。其目的是防止某个文档或脚本从多个不同源装载。

同源指的是：协议，域名(包括子域名)，端口相同。同源策略是一种安全协议。

具体表现在JS中：一段脚本自能读取来自同一来源的窗口的文档和属性。(iframe.contentDocument 等访问错误)

为什么要有同源限制？

如果没有同源策略，黑客通过iframe伪造一个网银登录界面，在父页面上直接获取iframe里面输入框的值。就能完成窃取账号密码的侵入行为。

跨域的一些方案

只列出了一些方案，具体示例可查看参考链接里面的文章。

1. document.domain

2. 通过iframe嵌入页面

3. 修改两个页面的 document.domain 为相同的主域(适用于主域相同，子域不同的页面通信，修改domain只能修改为自身或更高一级)

4. 两个页面的 JavaScript通过对应的方法和属性访问彼此的元素和属性

5. jsonp

6. 本地提供需要执行的方法

7. 动态加载 script 提供callback参数

8. 动态请求 script，服务端塞入数据 jsonp（json with padding）

9. 请求完的 script 在页面上执行（已塞入远端数据）

10. window.name （个人感觉使用 window.name 跨域的方式比较鸡肋，一定是我打开的方式不对吧）

• 原理：一个窗口（window）的生命周期内，窗口载入的所有页面都共享一个 window.name，每个页面对window.name 都有读写权限。（在测试中觉得父页面和iframe是不共享 window.name 的）
• 生命周期是指一个tab页面从打开到关闭。包括发生在该页面上的跳转操作。只要没有关闭页面，依旧可以读取之前设置的window.name 属性。
• 跨域实现：首先在 parent 页面通过 iframe 引入要设置 window.name 的页面，待页面加载完毕后，跳转到和 parent 页面同域的一个中间页面（保留了目标页面设置的 window.name 属性）。在父页面通过获取 iframe，调用 iframe.contentWindow.name 获取到设置好的 window.name 属性。

4. HTML5 postMessage

• HTML5 所提供的一个 API 方法
• window.postMessage(data, origin) 向 origin 匹配域页面发送 data 数据。
• window.onmessage = function(msg) {} 监听 message 事件，在收到 post 过来的数据时触发。 msg.data存储传递过来的message，msg.soruce 存储发送消息的窗口对象，msg.origin 存储发送消息的窗口的源(协议+主机+端口号)

参考文章:

• html5 postMessage解决跨域、跨窗口消息传递
• js中几种实用的跨域方法原理详解