同源访问与cookie

最新推荐文章于 2025-10-22 10:03:58 发布

原创最新推荐文章于 2025-10-22 10:03:58 发布 · 461 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#脚本 #jsonp #Scheme #SNS #JavaScript #ViewUI

javascript 专栏收录该内容

127 篇文章

订阅专栏

起因：

组件采用很常见的无刷新上传文件方式，但在某处应用一直抛出异常：permission denied 以及 domain 相关的错误，仔细排查原来是调用页面设置了 document.domain ，借此机会总结下。

同源策略：

每个页面都包含两个概念：origin（源）以及 effective script origin 。

origin:

有三个组成部分约束，协议scheme，host，port，形成三元组，两个不同源比较正是比较这三个部分。( host 间是完全比较，子域名间相互包含也认为不相同而不能互相访问)

effective script origin:

默认和 origin 一样，但是可以经由 document.domain 设置 host 与 port 部分，并且一旦设置， port 部分会变成特殊值："manual override" ，这个值除了和"manual override"相同外不和其他任何值相同。但是要注意的是

1. domain 只能设宽泛，比如页面 xx.iteye.com 的domain可设置为 iteye.com ，但是不能互逆，并且设置只能越来越宽泛，一旦页面 y.xx.com 设置了 xx.com 那么这个页面就再也不能重新设置 domain 为 y.xx.com.

2. 对于国际化域名，domain 不能设置太宽泛，比如 xx.javaeye.co.us 的最多可设 javaeye.co.us，而不能是 co.us

3. 共享域名的情况要特别注意，最好不要设置domain，否则xx.com 可能会被 xx.com:8080 的页面访问，引发同源保护失效（设置了domain，port就变成"manual override"!）.

页面互访规则：

两页面能够互相访问正是比较两个 effective script origin 是否相同，相同的话则可以互相访问，比如主页面嵌入了一个同一个域名下的子页面，那么如果主页面设置了 document.domain ，那么子页面也必须设置相同的值，否则两者就不能互相通信了，这也正是开头场景遇到的问题。

demo @ google code

解决：

对于开头的错误，原先可能 server 端只需返回：

{"url":"http://xx/y.jpg"}

我们只需访问 iframe.contentDocument.body.innerHTML 来访问浏览器 parse 好的内容，而如果主页面设置了 domain ：

document.domain='xx.com';

那么server 现在需要返回的 iframe 内容需要加入对应的设置相同 domain 脚本：

<html>
<head>
<script>
    document.domain="xx.com";    
</script>
</head>
<body>
{ "url":"http://xx.com/sns_album/i3/y.jpg"}
</body>
</html>

将脚本单独放在 head 中和 body 分开，则仍然可以取 body 内容，否则脚本会和 body 混合在一起。

延伸：

由于 XHR 也会受到同源策略的影响:

y.xx.com 页面不可以发送 xhr 请求给 xx.com ，但是如果在 y.xx.com 设置 domain=xx.com ，就可以发了 (当然仍然可以给 y.xx.com 发送接收 xhr)，但是无论怎么设都不可以往 z.xx.com 发送请求，因为 domain 只能设置当前页面 hostname 的后缀！

另一方面 XHR 作为数据传输技术，没法执行 domain 设置脚本，不过有人已经实现了通过设置 domain 的iframe作为中转层进行通信， KISSY io 也对此进行了支持。推荐比较简单的替代方案为：JSONP 。