浏览器-同源政策(same-origin policy)
浏览器安全的基石是“同源政策”(same-origin policy)。
1995年,同源政策由 Netscape 公司引入浏览器。目前,所有浏览器都实行这个政策。
何为同源?
- 协议相同
- 域名相同
- 端口相同
限制范围
- Cookie、LocalStorage 和 IndexedDB 无法读取。
- DOM 无法获得。
- AJAX 请求不能发送。
PS:Form表单提交不受同源政策限制;
一级域名相同,二级域名不同网页Cookie 和 iframe规避同源政策
一级域名相同,只是二级域名不相同的2个网页(A页和B页)间通信(共享cookie和ifrmame DOM):
//A网页通过脚本设置一个 Cookie
document.cookie = "test1=hello"; //B网页不能读取
var allCookie = document.cookie; //父窗口不能读取子iframe的DOM对象,报错
document.getElementById("myIFrame").contentWindow.document //同样子窗口不能获取父窗口的元素,报错
window.parent.document.body
如果两个窗口一级域名相同,只是二级域名不同,那么设置document.domain属性,就可以规避同源政策,共享cookie和获取DOM,解决上面的问题:
//设置为一级域名,规避同源政策
document.domain = 'example.com';
完全不同源网站解决跨域窗口间通信问题
有2种方法:
- 片段识别符(fragment identifier)
- 跨文档通信API(Cross-document messaging)
片段识别符(fragment identifier),指的是URL的#号后面的部分,将此作为两个窗口通信内容的中介存储,可互为读取,实现通信。
父窗口把信息写入子窗口的片段识别符:
var src = originURL + '#' + data;
document.getElementById('myIFrame').src = src;
子窗口通过监听hashchange事件,得到通知:
window.onhashchange = checkMessage; function checkMessage() {
var message = window.location.hash;
// ...
}
同样,子窗口也可以改变父窗口的片段识别符:
parent.location.href= target + “#” + hash;
上面两种方法都属于破解,HTML5为了解决这个问题,引入了一个全新的API:跨文档通信 API(Cross-document messaging)。
这个API为window对象新增了一个window.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');
postMessage方法的第一个参数是具体的信息内容,第二个参数是接收消息的窗口的源(origin),即“协议 + 域名 + 端口”。也可以设为*,表示不限制域名,向所有窗口发送。
父窗口或子窗口监听对方发来的消息:
window.addEventListener('message', function(e) {
console.log(e.data);
},false);
message事件的事件对象提供3个属性:
- event.source:发送消息的窗口
- event.origin: 消息发向的网址
- event.data: 消息内容
子窗口通过event.source属性引用父窗口,然后回复消息:
window.addEventListener('message', receiveMessage);
function receiveMessage(event) {
event.source.postMessage('Nice to see you!', '*');
}
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);
}
}
一个跨文档通信API案例:
//父窗口发送消息的代码
var win = document.getElementsByTagName('iframe')[].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));
};
AJAX与同源政策
同源政策规定,AJAX请求只能发给同源的网址,否则就报错。
AJAX有3种方法规避同源政策:
- JSONP
- WebSocket
- CORS
第1种:JSONP
JSONP是服务器与客户端跨源通信的常用方法。最大特点就是简单适用,老式浏览器全部支持,服务器改造非常小。
它的基本思想是,网页通过添加一个<script>元素,向服务器请求JSON数据,这种做法不受同源政策限制;服务器收到请求后,将数据以一个指定名字的回调函数的参数形式传回客户端,客户端在约定名字的回调函数中处理接收到的参数 。
首先,网页动态插入<script>元素,由它向跨源网址发出请求。
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');
} function foo(data) {
console.log('Your public IP address is: ' + data.ip);
};
服务器收到这个请求以后,会将数据放在回调函数的参数位置返回:
foo({
"ip": "8.8.8.8"
});
由于<script>元素请求的脚本,直接作为代码运行。这时,只要浏览器定义了foo函数,该函数就会立即调用。作为参数的JSON数据被视为JavaScript对象,而不是字符串,所以不用JSON.parse处理,直接作为JSON对象使用。
参考
同源政策,阮一峰 http://javascript.ruanyifeng.com/bom/same-origin.html
浏览器-同源政策(same-origin policy)的更多相关文章
- 破解浏览器同源政策利器之JSONP
本文是在了解了浏览器的同源规则之后,学习了破解这个规则的一个简单有效的方法->JSONP.主要通过阮一峰老师的博客学习 浏览器的同源规则 有这样一个背景,如果你通过银行的网站进行的取钱的交易,而 ...
- 前端开发必须说的那些事之——同源策略(same origin policy)
同源策略指的是三个相同 协议相同 域名相同 端口相同 如https://www.baidu.com/hahah.html这个网址来说 https是使用的协议,www.baidu.com是域名,端口号默 ...
- 为什么ajax 必须同源,same origin policy
ajax 所有请求都会附带主域的cookie, 若没有同源策略,攻击者就可以获取你的cookie,状态.
- Same Origin Policy 浏览器同源策略详解
同源策略 Same Origin Policy 日常开发中最常与网络打交道,那关于浏览器的同源策略和跨域相关的知识是该整理一下了. 首先需要明确的是,同源策略是浏览器的安全策略,由于存在这个策略,我们 ...
- [js]浏览器同源策略(same-origin policy)
浏览器的同源策略 浏览器同源政策及其规避方法 什么是同源策略 A网页设置的 Cookie,B网页不能打开,除非这两个网页"同源".所谓"同源"指的是" ...
- 同源策略(same-origin policy)及三种跨域方法
同源策略(same-origin policy)及三种跨域方法 1.同源策略 含义: 同源是指文档的来源相同,主要包括三个方面 协议 主机 载入文档的URL端口 所以同源策略就是指脚本只能读取和所属文 ...
- 浏览器同源策略,跨域请求jsonp
浏览器的同源策略 浏览器安全的基石是"同源政策"(same-origin policy) 含义: 1995年,同源政策由 Netscape 公司引入浏览器.目前,所有浏览器都实行这 ...
- 浏览器同源策略与ajax跨域方法汇总
原文 什么是同源策略 如果你进行过前端开发,肯定或多或少会听说过.接触过所谓的同源策略.那么什么是同源策略呢? 要了解同源策略,首先得理解“源”.在这个语境下,源(origin)其实就是指的URL.所 ...
- Ajax中的同源政策
Ajax中的同源政策 Ajax请求限制 Ajax只能向自己的服务器发送请求.比如现在有一个A网站.有一个B网站,A网站中的HTML文件只能向A网站服务器中发送Ajax请求,B网站中的HTML文件只能向 ...
随机推荐
- 初识IO流
输入输出流,用来进行设备之间的数据传输. 是我们IO传输的数据是以文件的形式体现的,所以Java给我们提供了一个类,Flie用来描文件和目录 File(File parent, String chil ...
- aspnetcore identity result.Succeeded SignInManager.IsSignedIn(User) false?
登陆返回的是 result.Succeeded 为什么跳转到其他页面SignInManager.IsSignedIn(User)为false呢? result.Succeeded _signInMan ...
- Vue框架(一)——Vue导读、Vue实例(挂载点el、数据data、过滤器filters)、Vue指令(文本指令v-text、事件指令v-on、属性指令v-bind、表单指令v-model)
Vue导读 1.Vue框架 vue是可以独立完成前后端分离式web项目的js框架 三大主流框架之一:Angular.React.Vue vue:结合其他框架优点.轻量级.中文API.数据驱动.双向绑定 ...
- robotframework_酷我音乐_That Girl
*** Settings *** Library Selenium2Library *** Test Cases *** music # 打开浏览器 Open Browser https://www. ...
- 定时任务-Windows任务
定时任务-Windows任务 什么是windows任务 windows系统自带一个任务管理组件.可以执行自己写的程序,发送电子邮件(需要邮件服务器),显示消息(就是桌面弹出一个窗口).用的最多的就 ...
- VMware 网络介绍
3.1 网卡介绍 如图所示,你的机器有两块网卡,一个是有线,一个是无线. 装完VM之后,会出现两块虚拟网卡,如图 VM有四种连接方式,我们着重介绍前三种 3.2 桥接 选择桥接模式,说明V ...
- springcolud 的学习(二).SpringCloud微服务框架
为什么选择SpringCloud因为SpringCloud出现,对微服务技术提供了非常大的帮助,因为SpringCloud 提供了一套完整的微服务解决方案,不像其他框架只是解决了微服务中某个问题. 服 ...
- c# 基于WebApi的快速开发框架FastFramework
一.框架简介 此框架是针对于webapi进行开发,项目分层是基于ABP框架的分层,更好的抽离业务逻辑关系,ABP是基于EF做数据访问层,本人个人比较喜欢Dapper,就把数据访问层封装成了Dapper ...
- [golang]svg图片默认按照左上角旋转,改为按中心旋转,重新计算中心偏移量
1 前言 svg图片默认按照左上角旋转,改为按中心旋转,重新计算中心偏移量 2 代码 type Point struct { X float64 Y float64 } func GetOffsetX ...
- js数组【续】(相关方法)
一.数组的栈,队列方法[调用这些方法原数组会发生改变]var arr = [2,3,4,5,6];1.栈 LIFO (Last-In-First-Out)a.push() 可接受任意类型的参数,将它们 ...