美文网首页程序员IT共论
JavaScript同源策略以及跨域

JavaScript同源策略以及跨域

作者: youngBrain1893 | 来源:发表于2016-02-24 17:47 被阅读786次

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 存储发送消息的窗口的源(协议+主机+端口号)

参考文章:

相关文章

  • 通过script标签实现跨域

    跨域 什么是跨域? 跨域问题是由于javascript语言安全限制中的同源策略造成的。同源策略是由Netscape...

  • WebStorm本地调试的跨域问题

    JavaScript 跨域 首先什么是跨域,简单地理解就是因为JavaScript同源策略的限制,a.com 域名...

  • JavaScript同源策略以及跨域

    JavaScript 同源策略 概念:同源策略是客户端脚本(尤其是JavaScript)的重要安全度量标准。其目的...

  • 2、同源策略 跨域

    由于JavaScript同源策略的限制,JavaScript 跨域的问题,一直是一个颇为棘手的问题。 1、同源策略...

  • 跨域

    同源:域名、协议、端口完全相同。(同源策略:浏览器的安全策略。) 跨域:浏览器对于javascript的同源策略的...

  • 前端请求跨域的问题

    JavaScript 同源策略 同源策略可防止javaScript发起跨域请求,源被定义为URL、主机名和端口号的...

  • 跨域的几种方式

    跨域以及跨域的几种方式 讲解跨域之前我们先来看看什么是同源策略 什么是同源策略 通常来说,浏览器出于安全方面的考虑...

  • 元芳 ,Js 跨域之李代桃僵,你还看吗?

    跨域的方法大致有七计 javascript的同源策略 同源策略是指协议,主机和端口 相同,就是为同源,不管后面在跟...

  • jsonp

    参考:轻松搞定JSONP跨域请求参考:JavaScript 跨域总结与解决办法要理解跨域,先要了解一下“同源策略”...

  • 跨域的概念

    1.跨域问题 什么是跨域? JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象。(同源策略,浏览...

网友评论

    本文标题:JavaScript同源策略以及跨域

    本文链接:https://www.haomeiwen.com/subject/ndjikttx.html