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

参考文章:

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 什么是跨域? 2.) 资源嵌入:、、、等dom标签,还有样式中background:url()、@font-fac...
    电影里的梦i阅读 2,383评论 0 5
  • 跨域问题产生的原理是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js...
    往复随安_cc75阅读 524评论 0 1
  • 朋友圈里不止三名好友的昵称是“以梦为马”,各大鸡汤软文里也随处可见。语文还算可以的我竟然对这几个字没有任何感觉,连...
    小萤子阅读 9,165评论 0 2
  • 这几天都在用禅绕画练习线条,感觉还是有效果的。 那么今天又跟着心蓝大大画了个漂流瓶。 当然了,比例什么的我就没去细...
    夜下小雨阅读 192评论 2 1
  • 云中谁寄锦书来? 一句对白 一声感慨 忆江南巴蜀四月天 有你的甜甜笑脸 生命的去来 走到一起 又无奈分开 遥望云端...
    FiftytwoHzwhale阅读 210评论 0 0