iframe跨域没有权限_浏览器同源策略及跨域（一）

最新推荐文章于 2024-06-27 12:57:52 发布

weixin_39726697

最新推荐文章于 2024-06-27 12:57:52 发布

阅读量1.2k

点赞数

文章标签： iframe跨域没有权限 iframe跨域第三方网页同一个浏览器打开不同端口的程序登录同源策略禁止读取位于

什么是同源策略

同源策略最早是由Netscape提出的一种安全策略，目前所有支持JavaScript的浏览器都使用这个策略。

同源策略要求：客户端脚本在没有明确授权的情况下，不能读写不同源网址的数据和资源（如HTTP头、Cookie、DOM、localStorage等）。

同源策略只是一个规范，并不是强制要求，各大厂商的浏览器只是针对同源策略的一种实现。它是浏览器最核心也是最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。

同源是指：

域名相同
协议相同
端口相同

例：ziv.com

协议是 http://

域名是 ziv.com

端口是 80 （默认端口）

以下网址与 ziv.com的同源情况如：

http://www.ziv.com/pc/demo.html       同源

http://ziv.com/h5/demo.html           不同源 域名不同

http://www.ziv.com:81/h5/demo.html    不同源 端口不同

https://www.ziv.com/h5/demo.html      不同源 协议不同

同源策略的意义

当两个网址是非同源时，它们之间的交互会有以下限制：

Cookie、LocalStorage和IndexDB无法相互读取
DOM无法相互获取
AJAX请求不能发送

这些限制都是出于对安全的考虑，都是有必要的。比如，你登录了知乎账号，然后打开了另一个网站，这个网站上的JavaScript可以跨域读取你的知乎账号数据，那这样就毫无隐私可言。又比如，一个恶意网站嵌入了银行账号登录页面，如果没有同源限制，恶意网页的JavaScript就可以获取用户登录的用户信息，想象一下如果是这样后果是不是很严重。

当然，同源策略也会带来一些弊端，导致我们合理的用途也会受到影响。因此，在开发过程中，我们常常需要通过跨域来规避限制。

几种跨域的方法：

document.domain

document.domain 可以用来得到当前网页的域名，同时市场上主流浏览器都支持domain可写，但是只能赋值为当前域名或者基础域名，如果赋值成当前域名的子域名就会报错。

如果两个网页一级域名相同，二级域名不同，则可以通过设置相同的document.domain实现cookie共享和iframe窗口（或window.open打开的窗口）与父窗口之间的通信。

比如，a网页是 http://a.ziv.com/a.html，b网页是http://b.ziv.com/b.html，然后设置它们的document.domain为：

document

那么，a网页设置的cookie，在b网页可以通过js拿到，同样b网页设置的cookie，在a网页也可以通过js拿到。它们的cookie是相互共享的。

如果在a网页通过iframe将b网页设置为a的子窗口：

<iframe id="iframe" src="http://b.ziv.com/b.html"></iframe>

那么，a、b窗口可以相互获得彼此的DOM。

在a网页中

document.getElementById("iframe").contentWindow.document

通过上面的代码可以获取b窗口的DOM。

在b窗口中

window

通过上面的代码可以获取a窗口的DOM。

注意：domain的使用必须在一级域名相同时，才能规避同源限制

window.name

window.name是浏览器窗口的一个属性，在一个窗口的生命周期里，不论是否同源，窗口里载入的所有页面都有权限对window.name进行读写。利用这一特性，我们可以实现在同一个窗口里，载入的不同网页之间的通信。

下面举个实例说明下如何使用window.name进行跨域：

原理：这里用到两个特性，

在一个窗口下，先后载入的页面都可以对window.name进行读写
同源或者一级域名相同并且domain相同的父子窗口可以相互获得DOM

首先，需要三个页面

http://a.ziv.com/a.html 获得数据、处理数据的页面
http://a.ziv.com/proxy.html 中间（代理）页面，一般是没有内容的html文件，必须与a页面一级域名相同，为了使a页面能够获得window.name这个属性
http://b.viz.com/data.html 拥有数据的页面

具体步骤如下：

在数据页面data.html中通过window.name，设置需要的数据。
<script type="text/javascript">
window.name = 'data!'; //需要传输的数据，浏览器一般支持2m的大小，这里数据
//格式可以是json、xml、字符串等类型数据。
</script>
在处理数据的页面a.html中创建一个iframe，设置其src为数据页面http://b.viz.com/data.html；然后在a.html中监听iframe的onload事件，在事件触发时将iframe的src指向代理页面http://a.ziv.com/proxy.html；这个时候就可以通过iframe的window.name获得数据了。
获得数据后要销毁iframe，即释放内存，也保证安全，免得被后续的页面拿到window.name信息。
<script type="text/javascript">
var state = 0,
iframe = document.createElement('iframe'),
loadfn = function() {
if (state === 1) {
var data = iframe.contentWindow.name; // 读取数据
console.log(data); //'data!'
//第三步的代码，销毁iframe，保证安全
iframe.contentWindow.document.write('');
iframe.contentWindow.close();
document.body.removeChild(iframe);
} else if (state === 0) {
state = 1;
// 设置iframe src为中间页面
iframe.contentWindow.location = "http://a.ziv.com/proxy.html";
}
};
iframe.src = 'http://b.viz.com/data.html';
if (iframe.attachEvent) {
iframe.attachEvent('onload', loadfn); //兼容ie7、ie8
} else {
iframe.onload = loadfn;
}
document.body.appendChild(iframe);
</script>

关于window.name数据格式：

json格式

<script type="text/javascript">
        window.name='{"name":"ziv"}'; 
</script>

json格式应该是程序猿的写法

<html>
    <script type="text/javascript">
        window.name = document.getElementsByTagName("script")      [0].innerHTML.match(/temps*=([wW]*)/)[1];
        temp= {
            name:"ziv", 
            age:"24"
        }  
    </script> 
</html>

HTML/XML数据格式

<html>
    <body>
        <p id="data">  
            this is <strong>html/xml-style</strong> data  
        </p>  
    </body>  
    <script type="text/javascript"> 
        window.name = document.getElementById("data").innerHTML;  
    </script>
</html>

使用window.name的优缺点

优点

安全
比使用片段识别符快
容量大，可以支持2M左右的数据量

缺点

需要监听子窗口window.name属性变化，影响网页性能

window.postMessage

window.postMessage是HTML5的新特性。HTML5支持的跨文档通信API为window对象新增了一个postMessage方法，该方法支持跨窗口通信，不论是否同源。

postMessage使用语法

otherWindow

otherWindow：目标窗口的一个引用（指的是给哪个窗口发消息），比如比如iframe的contentWindow属性，window.open返回的窗口对象。

message：需要发送的数据，通过结构化克隆算法序列化。

targetOrigin：用来指定接收消息的窗口，值可以是字符串“*”或者一个url，“*”表示无限制，url表示接收消息的窗口必须与这个url同源。一般情况下，能确定targetOrigin就不要设置为“*”，免得导致数据泄露。

transfer（可选）：一串和message同时传递的transferable对象。传递后，对象的所有权就转移给了消息接收方，发送方不在保留。

接下来我们举个例子具体说明一下，

a网页是 http://aaa.com，b网页是http://bbb.com，在a网页中通过iframe设置b网页为子窗口

那么，a、b窗口可以相互获得彼此的DOM。

在a网页中

bWindow

通过上面的代码，a网页可以往b网页发送消息。

b网页往a网页发送消息如下：

window.parent.postMessage('hi~', 'http://aaa.com');

a、b窗口需要通过监听message事件得到彼此发送的消息。

window

message的事件对象有三个属性：

event

b窗口可以通过message事件对象的属性source来指定回复消息的url，a、b可以通过origin属性过滤不是给自己发送的消息。

window

片段识别符

片段识别符是url #号后面的部分，比如：

http://www.ziv.com/a.html#hello

#后面的hello就是片段识别符，也称为hash

片段识别符有几个特点：

修改片段识别符，页面不会重新刷新
父窗口可以改变子窗口的片段识别符
子窗口可以改变父窗口的片段识别符
通过hashchange事件可以监听片段识别符的变化

根据片段识别符的特点，我们可以完成父子窗口通信

weixin_39726697

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
iframe跨域没有权限_浏览器同源策略及跨域（一）

什么是同源策略同源策略最早是由Netscape提出的一种安全策略，目前所有支持JavaScript的浏览器都使用这个策略。同源策略要求：客户端脚本在没有明确授权的情况下，不能读写不同源网址的数据和资源（如HTTP头、Cookie、DOM、localStorage等）。同源策略只是一个规范，并不是强制要求，各大厂商的浏览器只是针对同源策略的一种实现。它是浏览器最核心也是最基本的安全功能，如果缺少了同...
复制链接

扫一扫