网页制作与网站建设,网页传奇手机版,wordpress首页漂浮,视频运营管理网站文章简介
本篇文章为【JavaScript 漫游】专栏的第 035 篇文章#xff0c;记录了浏览器模型同源限制相关的知识点。
概述
浏览器安全的基石是“同源政策”#xff08;same-origin policy#xff09;。1995 年#xff0c;该政策由 Netscape 公司引入浏览器。目前#xff…
文章简介
本篇文章为【JavaScript 漫游】专栏的第 035 篇文章记录了浏览器模型同源限制相关的知识点。
概述
浏览器安全的基石是“同源政策”same-origin policy。1995 年该政策由 Netscape 公司引入浏览器。目前所有浏览器都实行这个政策。
最初它的含义是指A 网页设置的 CookieB 网页不能打开除非这两个网页“同源”。所谓“同源”指的是“三个相同”。
协议相同域名相同端口相同可忽略
要注意的是标准规定端口不同的网址不是同源但是浏览器没有遵守这条规定。实际上同一个网域的不同端口是可以互相读取 Cookie 的。
同源政策的目的是为了保证用户信息的安全防止恶意的网站窃取数据。
举例来说A 网站是一家银行用户登录以后A 网站在用户的机器上设置了一个 Cookie包含了一些隐私信息。用户离开 A 网站以后又去访问 B 网站如果有同源限制B 网站可以读取 A 网站的 Cookie那么隐私就泄露了。更可怕的是Cookie 往往用来保存用户的登录状态如果用户没有退出登录其他网站就可以冒充用户为所欲为。因为浏览器同时还规定提交表单不受同源政策的限制。
由此可见同源政策是必需的否则 Cookie 可以共享互联网就毫无安全而言了。
随着互联网的发展同源政策越来越严格。目前如果非同源共有三种行为受到限制。
无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB无法接触非同源网页的 DOM无法向非同源地址发送 AJAX 请求可以发送但浏览器会拒绝接受响应
另外通过 JavaScript 脚本可以拿到其他窗口的 window 对象。如果是非同源的网页目前允许一个窗口可以接触其他网页的 window 对象的九个属性和四个方法。
window.closedwindow.frameswindow.lengthwindow.locationwindow.openerwindow.parentwindow.selfwindow.topwindow.windowwindow.blur()window.close()window.focus()window.postMessage()
上面的九个属性之中只有 window.location 是可读写的其他八个全部都是只读。而且即使是 location 对象非同源的情况下也只允许调用 location.replace() 和写入 location.href 属性。
虽然这些限制是必要的但是有时很不方便合理的同于也受到影响。下文介绍如何规避上面的限制。
document.domain
通过设置 document.domain 可以规避对一级域名相同情况下的 Cookie 和 iframe 多窗口通信的限制。
Cookie
Cookie 是服务器写入浏览器的一小段信息只有同源的网页才能共享。如果两个网页一级域名相同只是次级域名相同通过设置 document.domain 即可实现共享 Cookie。
举例来说A 网页的网址为 http://w1.example.com/a.thmlB 网页的网址为 http://w2.example.com/b.html执行如下代码。
// 两个网页都需要设置
document.domain example.com;这时 A、B 网页之间就可以共享 Cookie。因为浏览器通过 document.domain 属性来检查是否同源。
注意A 和 B 两个网页都需要设置 document.domain 属性才能达到同源的目的。因为设置 document.domain 的同时会把端口重置为 null因此如果只设置一个网页的 document.domain会导致两个网址的端口不同还是达不到同源的目的。
iframe 和多窗口通信
iframe 元素可以在当前网页之中嵌入其他网页。每个 iframe 元素形成自己的窗口即有自己的 window 对象。iframe 窗口之中的脚本可以获得父窗口和子窗口。但是只有在同源的情况下父窗口和子窗口才能通信如果跨域就无法拿到对方的 DOM。
这种情况不仅适用于 iframe 窗口还适用于 window.open() 打开的窗口只要跨域父窗口和子窗口之间就无法通信。
如果两个窗口一级域名相同只是二级域名不同那么通过设置 document.domain 属性就可以规避同源政策拿到 DOM。
片段识别符
对于完全不同源的网站要解决跨域窗口的通信问题可以使用片段识别符fragment identifier。
片段标识符fragment identifier指的是URL 的 # 号后面的部分比如 http://example.com/x.html#fragment 的 #fragment。如果只是改变片段标识符页面不会重新刷新。
父窗口可以把信息写入子窗口的片段标识符。
var src originURL # data;
document.getElementById(myIFrame).src src;子窗口通过监听 hashchange 事件得到通知。
window.onhashchange checkMessage;function checkMessage() {var message window.location.hash;// ...
}同样的子窗口也可以改变父窗口的片段标识符。
parent.location.herf target # hash;postMessage()
HTML5 为了解决跨域问题引入了一个全新的 API跨文档通信 APICross-document messaging。
这个 API 为 window 对象新增了一个 window.postMessage 方法允许跨窗口通信、读写其他窗口的 LocalStorage。
跨窗口通信
父窗口 aaa.com 向子窗口 bbb.com 发消息调用 postMessage 方法就可以了。
// 父窗口打开一个子窗口
var popup window.open(http://bbb.com, title);
// 父窗口向子窗口发消息
popup.postMessage(Hello World!, http://bbb.com);postMessage 方法的第一个参数是具体的信息内容第二个参数是接收消息的窗口的源origin即“协议 域名 端口”。也可以设为 *表示不限制域名向所有窗口发送。
子窗口向父窗口发送消息的写法类似
// 子窗口向父窗口发消息
window.opener.postMessage(Nice to see you, http://aaa.com);父窗口和子窗口都可以通过 message 事件监听对方的消息。
// 父窗口和子窗口都可以用下面的代码
// 监听 message 消息
window.addEventListener(message, function (e) {console.log(e.data);
}, false);message 事件的参数是事件对象 event提供以下三个属性。
event.source发送消息的窗口event.origin消息发向的网址event.data消息内容
// 子窗口通过 event.source 属性引用父窗口然后发送消息
window.addEventListener(message, receiveMessage);
function receiveMessage(event) {event.source.postMessage(Nice to see you!, *);
}上面代码有几个地方需求注意。首先receiveMessage 函数里面没有过滤信息的来源任意网址发来的信息都会被处理。其次postMessage 方法中指定的目标窗口的网址是一个星号表示该信息可以向任意网址发送。通常来说这两种做法是不推荐的因为不够安全可能会被恶意利用。
event.origin 属性可以过滤不是发给本窗口的信息。
window.addEventListener(message, receiveMessage);
function receiveMessage(event) {if (event.origin ! http://aaa.com) return;if (event.data Hello World) {event.source.postMessage(Hello, event.origin);} else {console.log(event.data);}
}读写其他窗口的 localStorage
通过 window.postMessage读写其他窗口的 LocalStorage 也成为了可能。
// 子窗口将父窗口发来的消息写入自己的 LocalStorage
window.onmessage function(e) {if (e.origin ! http://bbb.com) {return;}var payload JSON.parse(e.data);localStorage.setItem(payload.key, JSON.stringify(payload.data));
}父窗口发送消息的代码如下。
var win document.getElementsByTagName(iframe)[0].contentWindow;
var obj { name: Jack };
win.postMessage(JSON.stringify({key: storage, data: obj }),http://bbb.com
);加强版的子窗口接收消息的代码如下。
window.onmessage function (e) {if (e.origin ! http://bbb.com) return;var payload JSON.parse(e.data);switch (payload.method) {case set:localStorage.setItem(payload.key, JSON.stringify(payload.data));break;case get:var parent window.parent;var data localStorage.getItem(payload.key);parent.postMessage(data, http://aaa.com);break;case remove:localStorage.removeItem(payload.key);break;}
}加强版的父窗口发送消息代码如下。
var win document.getElementsByTagName(iframe)[0].contentWindow;
var obj { name: Jack };
// 存入对象
win.postMessage(JSON.stringify({key: storage, method: set})
);
// 读取对象
win.postMessage(JSON.stringify({key: storage, method: get}),*
);
window.onmessage function(e) {if (e.origin ! http://aaa.com) return;console.log(JSON.parse(e.data).name);
}AJAX 跨域实现
同源政策规定AJAX 请求只能发给同源的网址否则就报错。
除了假设服务器代理浏览器请求同源服务器再由后者请求外部服务有三种方法规避这个限制。
JSONPWebSocketCORS
JSONP
JSONP 是服务器与客户端跨源通信的常用方法。最大特点就是简单易用没有兼容性问题老式浏览器全部支持服务端改造非常小。
它的做法如下。
第一步网页添加一个 script 元素向服务器请求一个脚本这不受同源政策限制可以跨域请求。
script srchttp://api.foo.com?callbackbar/script注意请求的脚本网址有一个 callback 参数?callbackbar用来告诉服务器客户端的回调函数名称bar。
第二步服务器收到请求后拼接一个字符串将 JSON 数据放在函数名里面作为字符串返回bar({....})。
第三步客户端会将服务器返回的字符串作为代码解析因为浏览器认为这是 script 标签请求的脚本内容。这时客户端只要定义了 bar() 函数就能在该函数体内拿到服务器返回的 JSON 数据。
function addScriptTag(src) {var script document.createElement(script);script.setAttribute(type, text/javascript);script.src src;document.body.appendChild(script);
}window.onload function () {addScriptTag(http://example.com/ip?callbackfoo);
}function foo(data) {console.log(Your public IP address is: data.ip);
}服务器收到这个请求以后会将数据放在回调函数的参数位置返回。
foo({ip: 8.8.8.8
});由于 script 元素请求的脚本直接作为代码运行。这时只要浏览器定义了 foo 函数该函数就会立即调用。作为参数的 JSON 数据被视为 JavaScript 对象而不是字符串因此避免了使用 JSON.parse 的步骤。
WebSocket
WebSocket 是一种通信协议使用 ws://非加密和 wss://加密作为协议前缀。该协议不实行同源政策只要服务器支持就可以通过它进行跨源通信。
下面是浏览器发出的 WebSocket 请求的头信息的例子。
GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13
Origin: http://example.com上面代码中有一个字段是 Origin表示该请求的请求源origin即发自哪个域名。
正是因为有了 Origin 这个字段所以 WebSocket 才没有实行同源政策。因为服务器可以根据这个字段判断是否许可本次通信。如果该域名在白名单内服务器就会做出如下响应。
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk
Sec-WebSocket-Protocol: chatCORS
CORS 是跨源资源分享Cross-Origin Resource Sharing的缩写。它是 W3C 标准属于跨源 AJAX 请求的根本请求方法。相比 JSONP 只能发 GET 请求CORS 允许任何类型的请求。
CORS 的内容很重要下一篇对其进行单独介绍。
