BOM 浏览器对象模型_同源限制
“同源政策”(same-origin policy)
浏览器安全的基石
- 协议相同
- 域名相同
- 端口相同
1995年,同源政策由 Netscape 公司引入浏览器。目前,所有浏览器都实行这个政策
- A 网页设置的 Cookie,B 网页不能打开,除非这两个网页“同源”
- 浏览器同时还规定,提交表单不受同源政策的限制
目前,如果非同源,共有以下三项受到限制
- 无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB。
- 无法接触非同源网页的 DOM
- 无法向非同源地址发送 AJAX 请求(可以发送,但浏览器会拒绝接受响应)
通过 JavaScript 脚本可以拿到其他窗口的 window 对象。如果是非同源的网页,目前允许一个窗口可以接触其他网页的window对象的九个属性和四个方法
window.closed
window.frames
window.length
window.location 唯一一个可以用读写的属性
window.opener
window.parent
window.self
window.top
window.window
window.blur()
window.close()
window.focus()
window.postMessage()
目的: 保证用户信息的安全,防止恶意的网站窃取数据
Cookie 是服务器写入浏览器的一小段信息,只有同源的网页才能共享。
只适用于 Cookie 和 iframe 窗口
如果两个网页一级域名相同,只是次级域名不同,浏览器允许通过设置 document.domain 共享 Cookie
A 网页的网址是 http://w1.example.com/a.html
B 网页的网址是http://w2.example.com/b.html
那么只要设置相同的 document.domain ,两个网页就可以共享 Cookie。因为浏览器通过 document.domain 属性来检查是否同源
// 两个网页都需要设置
document.domain = 'example.com';
注意,A 和 B 两个网页都需要设置 document.domain
属性,才能达到同源的目的。
因为设置 document.domain
的同时,会把端口重置为 null
因此如果只设置一个网页的 document.domain
,会导致两个网址的端口不同,还是达不到同源的目的
现在,A 网页通过脚本设置一个 Cookie ---- document.cookie = "test1=hello";
B 网页就可以读到这个 Cookie ---- var allCookie = document.cookie;
另外,服务器也可以在设置 Cookie 的时候,指定 Cookie 的所属域名为一级域名,比如.example.com
Set-Cookie: key=value; domain=.example.com; path=/
这样的话,二级域名 和 三级域名 不用做任何设置,都可以读取这个 Cookie
对于完全不同源的网站,目前有两种方法,可以解决跨域窗口的通信问题
1. 片段识别符(fragment identifier)
片段标识符(fragment identifier)指的是,URL 的 # 号后面的部分
比如 http://example.com/x.html#fragment 的 #fragment。如果只是改变片段标识符,页面不会重新刷新
- 父窗口可以把信息,写入子窗口的片段标识符 ---- 子窗口通过监听
hashchange
事件得到通知
父窗口
var src = originURL + '#' + data;
document.getElementById('myIFrame').src = src;
子窗口 iframe
window.onhashchange = checkMessage; function checkMessage() {
var message = window.location.hash;
// ...
}
同样的,子窗口也可以改变父窗口的片段标识符
parent.location.href = target + '#' + hash;
上面的这种方法属于破解,HTML5 为了解决这个问题,引入了一个全新的API:跨文档通信 API(Cross-document messaging)
2. 跨文档通信API(Cross-document messaging)
这个 API 为window对象新增了一个window.postMessage方法,允许跨窗口通信,不论这两个窗口是否同源
举例来说,父窗口 aaa.com 向子窗口 bbb.com 发消息,调用 postMessage 方法就可以了
// 父窗口打开一个子窗口
var popup = window.open('http://bbb.com', 'title');
// 父窗口向子窗口发消息
popup.postMessage('Hello World!', 'http://bbb.com');
子窗口向父窗口发送消息的写法类似
// 子窗口向父窗口发消息
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);
}
}
第一个参数 ---- 具体的信息内容
第二个参数 ---- 接收消息的窗口的源(origin),即“协议 + 域名 + 端口”。也可以设为 * ,表示不限制域名,向所有窗口发送
通过 window.postMessage,读写其他窗口的 LocalStorage 也成为了可能
- 父窗口发送消息的代码如下
var win = document.getElementsByTagName('iframe')[0].contentWindow;
var obj = { name: 'Jack' };
win.postMessage(
JSON.stringify({key: 'storage', data: obj}),
'http://bbb.com'
);- 子窗口将父窗口发来的消息,写入自己的 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', method: 'set', data: obj}), 'http://bbb.com'); // 读取对象
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);
};- 加强版的子窗口接收消息的代码如下
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;
}
};
解决 AJAX 请求(服务器与客户端 交互) 跨域的 三种方法
JSONP 只能发 GET 请求
- 特点:
简单适用,老式浏览器全部支持,服务端改造非常小
- 基本思想:
网页通过动态插入一个 <script>
元素,向服务器请求 JSON 数据 ---- 这种 一般请求 的做法不受同源政策限制
服务器收到请求后,将数据放在一个指定名字的回调函数里传回来 ---- foo({"ip": "192.168.3.31"})
由于 <script>
元素请求的脚本,直接作为代码运行
只要浏览器定义了 foo
函数,foo 函数就会立即调用。作为参数的 JSON 数据 被视为 JavaScript 对象
使用:
前端页面
function foo(data) {
console.log('Your public IP address is: ' + data.ip);
}; 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?callback=foo');
}
后台服务器
- 服务器收到这个请求以后,会将数据放在回调函数的参数位置返回
- foo({"ip": "192.168.3.31"})
WebSocket 通信协议
WebSocket 是一种通信协议,使用 ws://(非加密)和 wss://(加密)作为协议前缀
该协议不实行同源政策,几乎所有的浏览器都支持,所以只要服务器支持,就可以通过它进行跨源通信
- 浏览器发送请求实例
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 这个字段,判断是否许可本次通信。
如果该域名在白名单内,服务器就会做出如下回应
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=
Sec-WebSocket-Protocol: chat
CORS 跨源资源分享(Cross-Origin Resource Sharing) 运行任何类型的请求
是一个W3C 标准,也是 跨源 AJAX 请求 的根本解决方法
整个 CORS 通信过程,都是浏览器自动完成
CORS 需要浏览器和服务器同时支持。目前,所有浏览器都支持该功能
实现 CORS 通信的关键是服务器。所以,只要服务器实现了 CORS 接口,就可以跨域通信
- 作用: 允许浏览器向跨域的服务器,发出
XMLHttpRequest
请求,从而克服了 AJAX 只能同源使用的限制 - CORS 通信 与 普通的 AJAX 通信
没有差别,代码完全一样
浏览器一旦发现 AJAX 请求跨域,就会自动添加一些附加的头信息,有时还会多出一次附加的请求,但用户不会有感知
CORS 请求分成两类
- 简单请求(simple request)---- 简单的 HTTP 方法与简单的 HTTP 头信息的结合
同时满足以下两大条件
请求方法是 GET、POST、HEAD 其中之一
HTTP 的头信息不超出以下几种字段
xAccept
Accept-Language
Content-Language
Last-Event-ID
Content-Type 只限于三个值 application/x-www-form-urlencoded、multipart/form-data、text/plain
这样划分的原因是,表单在历史上一直可以跨域发出请求。
简单请求就是表单请求,浏览器沿袭了传统的处理方式,不把行为复杂化
对于非简单请求,浏览器会采用新的处理方式
- 基本流程
浏览器直接发出 CORS 请求
具体来说,就是在头信息之中,增加一个 Origin
字段
Origin
字段用来说明,本次请求来自哪个域(协议 + 域名 + 端口)
服务器根据这个值,决定是否同意这次请求
GET /cors HTTP/1.1
Origin: http://api.bob.com
Host: api.alice.com
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...
如果 Origin 指定的源,不在许可范围内服务器会返回一个正常的 HTTP 回应
浏览器发现,这个回应的头信息没有包含 Access-Control-Allow-Origin 字段(详见下文)就知道出错了
从而抛出一个错误,被 XMLHttpRequest 的 onerror 回调函数捕获
注意,这种错误无法通过状态码识别,因为 HTTP 回应的状态码有可能是200
如果Origin指定的域名在许可范围内,服务器返回的响应,会多出几个头信息字段
- Access-Control-Allow-Origin
该字段是必须的
值要么是请求时 Origin 字段的值;要么是一个*,表示接受任意域名的请求
- Access-Control-Allow-Credentials
该字段可选
值是一个布尔值,表示是否允许发送 Cookie
默认情况下 false,Cookie 不包括在 CORS 请求之中
默认不包含 Cookie 信息(以及 HTTP 认证信息等),这是为了降低 CSRF 攻击的风险
设为 true,即表示服务器明确许可,浏览器可以把 Cookie 包含在请求中,一起发给服务器
某些场合,服务器可能需要拿到 Cookie
1. 这时需要服务器显式指定 Access-Control-Allow-Credentials
字段,告诉浏览器可以发送 Cookie
Access-Control-Allow-Credentials: true
2. 同时,开发者必须在 AJAX 请求中打开 withCredentials
属性
否则,即使服务器要求发送 Cookie,浏览器也不会发送
或者说,服务器要求设置 Cookie,浏览器也不会处理
var xhr = new XMLHttpRequest();
xhr.withCredentials = true;
注意:
如果服务器要求浏览器发送 Cookie,Access-Control-Allow-Origin 就不能设为星号,必须指定明确的、与请求网页一致的域名
同时,Cookie 依然遵循同源政策,只有用服务器域名设置的 Cookie 才会上传
其他域名的 Cookie 并不会上传,且(跨域)原网页代码中的 document.cookie 也无法读取服务器域名下的 Cookie
这个值也只能设为 true,如果服务器不要浏览器发送 Cookie,不发送该字段即可
- Access-Control-Expose-Headers
该字段可选
CORS 请求时,XMLHttpRequest 对象的 getResponseHeader() 方法只能拿到6个服务器返回的基本字段
Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。
如果想拿到其他字段,就必须在 Access-Control-Expose-Headers 里面指定
下面的例子指定,getResponseHeader('FooBar')可以返回FooBar字段的值
Access-Control-Allow-Origin: http://api.bob.com
Access-Control-Allow-Credentials: true
Access-Control-Expose-Headers: FooBar
Content-Type: text/html; charset=utf-8
- 非简单请求(not-so-simple request)----
是那种对服务器提出特殊要求的请求
比如 请求方法是 PUT
或 DELETE
,或者 Content-Type
字段的类型是 application/json
会在正式通信之前,增加一次 HTTP 查询请求,称为“预检”请求 (preflight)
浏览器先询问服务器,当前网页所在的域名是否在服务器的许可名单之中,以及可以使用哪些 HTTP 动词和头信息字段
只有得到肯定答复,浏览器才会发出正式的 XMLHttpRequest 请求,否则就报错
这是为了防止这些新增的请求,对传统的没有 CORS 支持的服务器形成压力,给服务器一个提前拒绝的机会
这样可以防止服务器收到大量 DELETE 和 PUT 请求,这些传统的表单不可能跨域发出的请求
举个例子:
var url = 'http://api.alice.com/cors';
var xhr = new XMLHttpRequest();
xhr.open('PUT', url, true);
xhr.setRequestHeader('X-Custom-Header', 'value');
xhr.send();
上面代码中,HTTP 请求的方法是PUT,并且发送一个自定义头信息X-Custom-Header
- 浏览器发现,这是一个非简单请求,就自动发出一个“预检”请求,要求服务器确认可以这样请求。
- 下面是这个“预检”请求的 HTTP 头信息
- “预检”请求用的请求方法是
OPTIONS
,表示这个请求是用来询问的 - 头信息里面,关键字段是
Origin
,表示请求来自哪个源 - Access-Control-Request-Method ---- 该字段是必须的,用来列出浏览器的 CORS 请求会用到哪些 HTTP 方法,下例是PUT
- Access-Control-Request-Headers ---- 该字段是一个逗号分隔的字符串,指定浏览器 CORS 请求会额外发送的头信息字段,下例是X-Custom-Header
OPTIONS /cors HTTP/1.1
Origin: http://api.bob.com
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: X-Custom-Header
Host: api.alice.com
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...
预检请求的回应
服务器收到 “预检” 请求以后
检查了 Origin、Access-Control-Request-Method 和 Access-Control-Request-Headers 字段以后
- 确认允许跨源请求,就可以做出回应
HTTP/1.1 200 OK
Date: Mon, 01 Dec 2008 01:15:39 GMT
Server: Apache/2.0.61 (Unix)
Access-Control-Allow-Origin: http://api.bob.com
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: X-Custom-Header
Content-Type: text/html; charset=utf-8
Content-Encoding: gzip
Content-Length: 0
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Content-Type: text/plain
上面的 HTTP 回应中,关键的是 Access-Control-Allow-Origin 字段,表示http://api.bob.com可以请求数据
该字段也可以设为星号,表示同意任意跨源请求
如果服务器否定了“预检”请求
会返回一个正常的 HTTP 回应
但是没有任何 CORS 相关的头信息字段,或者明确表示请求不符合条件
OPTIONS http://api.bob.com HTTP/1.1
Status: 200
Access-Control-Allow-Origin: https://notyourdomain.com
Access-Control-Allow-Method: POST这时,浏览器就会认定,服务器不同意预检请求,因此触发一个错误,被 XMLHttpRequest 对象的 onerror 回调函数捕获
控制台会打印出如下的报错信息
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: X-Custom-Header
Access-Control-Allow-Credentials: true
Access-Control-Max-Age: 1728000 XMLHttpRequest cannot load http://api.alice.com.
Origin http://api.bob.com is not allowed by Access-Control-Allow-Origin.Access-Control-Allow-Methods
该字段必需,它的值是逗号分隔的一个字符串,表明服务器支持的所有跨域请求的方法。
注意,返回的是所有支持的方法,而不单是浏览器请求的那个方法。这是为了避免多次“预检”请求
Access-Control-Allow-Headers
如果浏览器请求包括 Access-Control-Request-Headers 字段,则 Access-Control-Allow-Headers 字段是必需的
它也是一个逗号分隔的字符串,表明服务器支持的所有头信息字段,不限于浏览器在“预检”中请求的字段
Access-Control-Allow-Credentials
含义与同简单请求相同
Access-Control-Max-Age
该字段可选,用来指定本次预检请求的有效期,单位为秒
上面结果中,有效期是20天(1728000秒)即允许缓存该条回应1728000秒(即20天),在此期间,不用发出另一条预检请求
一旦服务器通过了“预检”请求,以后每次浏览器正常的 CORS 请求,就都跟简单请求一样
会有一个 Origin 头信息字段
服务器的回应,也都会有一个 Access-Control-Allow-Origin 头信息字段
JSONP 只支持GET请求,
CORS 支持所有类型的 HTTP 请求。
JSONP 的优势在于支持老式浏览器,以及可以向不支持 CORS 的网站请求数据
BOM 浏览器对象模型_同源限制的更多相关文章
- BOM 浏览器对象模型_不超过 4 KB 的 document.cookie 对象
注意: 客户端储存应该使用 Web storage API 和 IndexedDB,不推荐使用 Cookie document.cookie 对象 是服务器保存在浏览器的一小段文本信息 用于读写当前网 ...
- BOM 浏览器对象模型_渲染引擎_JavaScript 引擎_网页加载流程
1. 浏览器核心的两个组成部分 渲染引擎 将网页代码渲染为用户视觉可以感知的平面文档 分类: Firefox Gecko 引擎 Safari WebKit 引擎 Chrom ...
- BOM 浏览器对象模型_当前窗口的浏览历史 history 对象
当前窗口的浏览历史 window.history 对象 保存了当前窗口访问过的所有页面网址 由于安全原因,浏览器不允许脚本读取这些地址,但是允许在地址之间导航 history.back() 相当于 h ...
- 第一百一十一节,JavaScript,BOM浏览器对象模型
JavaScript,BOM浏览器对象模型 学习要点: 1.window对象 2.location对象 3.history对象 BOM也叫浏览器对象模型,它提供了很多对象,用于访问浏览器的功能.BOM ...
- JavaScript——BOM(浏览器对象模型),时间间隔和暂停
BOM(浏览器对象模型):能够对浏览器的窗体进行訪问和操作 1.主要的BOM体系: window------------document-------------------------------- ...
- BOM浏览器对象模型
访问和操作浏览器窗口的模型称为浏览器对象模型BOM(Browser Object Model). BOM整体对象图. 核心是window对象: 以下有特殊双重身份: window对象既是ECMAScr ...
- javascript之BOM浏览器对象模型引入
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JavaScript(二、BOM 浏览器对象模型)
一.BOM是什么 BOM是browser object model的缩写,简称浏览器对象模型 BOM提供了独立于内容而与浏览器窗口进行交互的对象 由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心 ...
- BOM—浏览器对象模型(Browser Object Model)
1,javascript 组成部分: 1.ECMAscript(核心标准): 定义了基本的语法,比如:if for 数组 字符串 ... 2.BOM : 浏览器对象模型(Browser ...
随机推荐
- SQLALlchemy数据查询小集合
SQLAlchemy是Python编程语言下的一款ORM框架,该框架建立在数据库API之上,使用关系对象映射进行数据库操作.将对象转换成SQL,然后使用数据API执行SQL并获取执行结果.在写项目的过 ...
- qsort()函数详解
一 写在开头1.1 本节内容学习C语言中的qsort()函数. 二 qsort()2.1 函数原型 void qsort( void *base, size_t nmemb, size_t size, ...
- JN_0004:轻松解码类似eval(function(p,a,c,k,e,d){}))的JavaScript代码
百度访问统计代码JavaScript源码:红色加粗部分将是要修改的地方.eval(function(p,a,c,k,e,d){e=function(c){return(c<a?"&qu ...
- 第五节:WebApi的三大过滤器
一. 基本说明 1. 简介: WebApi下的过滤器和MVC下的过滤器有一些区别,首先我们要注意的是通常建WebApi项目时,会自动把MVC的程序集也引入进来,所以我们在使用WebApi下的过滤器的 ...
- PHP循环语句深度理解分析——while, for, foreach, do while
循环结构 一.while循环 while(表达式) { 循环体;//反复执行,直到表达式为假 } 代码: $index = 1; while ($index<5) { ...
- 导出CSV 换行问题。
程序方面: 1.Windows 中的换行符"\r\n" 2.Unix/Linux 平台换行符是 "\n". 3.MessageBox.Show() 的换行符为 ...
- windows bat 脚本(一)切换当前目录
一.切换当前目录 现在桌面新建一个文件, 然后打开输入 cmd /k "cd /d D:\file" 如下图点击“另存为”,保存类型选择 “所有文件” 然后会在保存路径下发现 ...
- 边缘检测之Canny
1. 写在前面 最近在做边缘检测方面的一些工作,在网络上也找了很多有用的资料,感谢那些积极分享知识的先辈们,自己在理解Canny边缘检测算法的过程中也走了一些弯路,在编程实现的过程中,也遇到了一个让我 ...
- 【洛谷P1706全排列问题】
题目描述 输出自然数1到n所有不重复的排列,即n的全排列,要求所产生的任一数字序列中不允许出现重复的数字. 代码如下: #include<iostream>#include<cstd ...
- Bootstrap3 模态框 select2搜索框无法输入
<div class="modal fade" role="dialog" aria-hidden="true" data-backd ...