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

参考文章:

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,117评论 4 360
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,963评论 1 290
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 107,897评论 0 240
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,805评论 0 203
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,208评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,535评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,797评论 2 311
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,493评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,215评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,477评论 2 244
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,988评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,325评论 2 252
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,971评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,055评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,807评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,544评论 2 271
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,455评论 2 266

推荐阅读更多精彩内容

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