JavaScript同源策略以及跨域
2016-02-24 本文已影响786人
youngBrain1893
JavaScript 同源策略
概念：同源策略是客户端脚本(尤其是JavaScript)的重要安全度量标准。其目的是防止某个文档或脚本从多个不同源装载。
同源指的是：协议，域名(包括子域名)，端口相同。同源策略是一种安全协议。
具体表现在JS中：一段脚本自能读取来自同一来源的窗口的文档和属性。(iframe.contentDocument 等访问错误)
为什么要有同源限制？
如果没有同源策略，黑客通过iframe伪造一个网银登录界面，在父页面上直接获取iframe里面输入框的值。就能完成窃取账号密码的侵入行为。
跨域的一些方案
只列出了一些方案，具体示例可查看参考链接里面的文章。
-
document.domain
-
通过iframe嵌入页面
-
修改两个页面的 document.domain 为相同的主域(适用于主域相同，子域不同的页面通信，修改domain只能修改为自身或更高一级)
-
两个页面的 JavaScript通过对应的方法和属性访问彼此的元素和属性
-
jsonp
-
本地提供需要执行的方法
-
动态加载 script 提供callback参数
-
动态请求 script，服务端塞入数据 jsonp（json with padding）
-
请求完的 script 在页面上执行（已塞入远端数据）
-
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 属性。
- HTML5 postMessage
- HTML5 所提供的一个 API 方法
- window.postMessage(data, origin) 向 origin 匹配域页面发送 data 数据。
- window.onmessage = function(msg) {} 监听 message 事件，在收到 post 过来的数据时触发。 msg.data存储传递过来的message，msg.soruce 存储发送消息的窗口对象，msg.origin 存储发送消息的窗口的源(协议+主机+端口号)
参考文章:
