前端开发必须说的那些事之——同源策略(same origin policy)
同源策略指的是三个相同
- 协议相同
- 域名相同
- 端口相同
如https://www.baidu.com/hahah.html这个网址来说 https是使用的协议,www.baidu.com是域名,端口号默认是80(不指定端口默认是80端口);
所以:
- www.baidu.com/hehe.html 同源
- www.baidu.com/heihei/houhou.html 同源
- www.i71.com/haha.html 域名不同,不同源
- www.baidu.com:888/haha.html 端口不同,不同源
为什么需要同源策略
同源策略其实是一种浏览器安全的功能,保护着每个网站数据的安全的同时又维持着js脚本的正常执行;假设现在两个网页,百度和谷歌的,两个网页都会加载各自的js脚本或者添加cookie等等,同源策略就是维持这些数据和脚本的有序访问;百度网页的脚本不能访问谷歌网页的脚本,当然各自的cookie数据也只能各家的js 脚本才能访问;
ps: 如果非同源,那么以下的行为将会受到限制;1,cookie,localStorage 2,ajax
需要跨域取数据怎么办(多个服务器,或者二级域名)
1.利用cookie设置document.domain (解决二级域名不同)
比如www.baidu.com和news.baidu.com这两个不同的域名,要想让两者之间的数据能够互相访问,可以将数据存储在cookie里面并指定
document.domain="baidu.com";
2 命名锚点(www.aaa.com#tag)(解决嵌套窗口)
要利用这个呢,就得说说的网站url,在js中如何存储这些信息来让我们访问呢?——window.location 以我现在编辑文章的界面来说:
这个就是window.location对象,location.hash里面存放的是#tag,也就是锚点名;(当然了,除此之外还有很多其他有用的属性,host,href,origin,pathname(查询路径),search(查询字符串));
所以,现在添加一个锚点,location.hash="lla";
页面url已经改变,当然这时候嵌套的子窗口也能访问到我添加的这个lla名称了,达到了传值得目的,那么问题来了,为什么不用查询字符串?xxx=xxx;这个来传值呢,首先锚点不会刷新页面,如果你改变了location.search(或者host,href啊)都会触发页面的刷新行为,什么,,,你竟然不信??
果断选择留下来;信了就好;
那么子窗口如何获得这个事件的改变;window.haschange
window.hanschange=function(){
var tag=window.location.hash; }
同样的子窗口也可以改变这个tag;parent.location.hash=XXX;
3,正经做法,html5给了解决这个问题的API了
windw.postMessage看名字就很有感觉,post,恩,看来蛮安全的吗;所以有了这个方式,不管两个网页是不是同源,都可以愉快的好好沟通了
MDN上面给的解释是:
The
W
indow.postMessage()
method safely enables cross-origin communication. Normally, scripts on different pages are allowed to access each other if and only if the pages that executed them are at locations with the same protocol (usually bothhttps
), port number (443
being the default forhttps
), and host (moduloDocument.domain
being set by both pages to the same value).window.postMessage()
provides a controlled mechanism to circumvent this restriction in a way which is secure when properly used.
那么如何使用?
发送端:
接受端:
不多逼逼;window.postMessage的MDN详细资料:https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
ps:postMessage我还没有实战经验,有实战经验放demo,不过讲道理控制台应该也能实现这个demo;有弄再补写
-----------------------------------------------------------------------2017-4-11----------------------------------------------------------------------------------------------
在搜狗页面:
用window.open打开百度界面,在这个打开的页面里面添加message监听:
接下来从搜狗页面向百度发送字符串消息:
查看百度页面输出的数据:
成功!e.origin指向了搜狗页面的网址;
这是字符串数据;然后测试下其他类型;
查看结果:
没问题,安心用吧;
前端开发必须说的那些事之——同源策略(same origin policy)的更多相关文章
- 准备.Net转前端开发-WPF界面框架那些事,值得珍藏的8个问题
题外话 不出意外,本片内容应该是最后一篇关于.Net技术的博客,做.Net的伙伴们忽喷忽喷..Net挺好的,微软最近在跨平台方面搞的水深火热,更新也比较频繁,而且博客园的很多大牛也写的有跨平台相关技术 ...
- 准备.Net转前端开发-WPF界面框架那些事,搭建基础框架
题外话 最近都没怎么写博客,主要是最近在看WPF方面的书<wpf-4-unleashed.pdf>,挑了比较重要的几个章节学习了下WPF基础技术.另外,也把这本书推荐给目前正在从事WPF开 ...
- 准备.Net转前端开发-WPF界面框架那些事,UI快速实现法
题外话 打开博客园,查看首页左栏的”推荐博客”,排名前五的博客分别是(此处非广告):Artech.小坦克.圣殿骑士.腾飞(Jesse).数据之巅.再看看它们博客的最新更新时间:Artech(2014- ...
- 网站开发进阶(三十八)Web前端开发规范文档你需要知道的事
Web前端开发规范文档你需要知道的事 规范目的 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进 ...
- Web前端开发规范文档你需要知道的事
Web前端开发规范文档你需要知道的事 规范目的 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进 ...
- Web前端开发规范文档你需要知道的事--HTML、css、js、文档等需要规范内容
规范目的 为提高团队协作效率,便于后台人员添加功能及前端后期优化维护,输出高质量的文档,特制订此文档.本规范文档一经确认,前端开发人员必须按本文档规范进行前台页面开发.本文档如有不对或者不 ...
- vue前端开发那些事——后端接口.net core web api
红花还得绿叶陪衬.vue前端开发离不开数据,这数据正来源于请求web api.为什么采用.net core web api呢?因为考虑到跨平台部署的问题.即使眼下部署到window平台,那以后也可以部 ...
- JS高级前端开发群加群说明及如何晋级
JS高级前端开发群加群说明 一.文章背景: 二. 高级群: 三. 加入方式: 四. 说明: 一.文章背景: 去年年初建了几个群,在不经意间火了,一直排在“前端开发”关键字搜索结果第一名.当然取得这 ...
- Visual Studio前端开发工具/扩展
怎么样让Visual Studio更好地编写HTML5, CSS3, JavaScript, jQuery,换句话说就是如何更好地做前端开发.Visual Studio 2010不管是旗舰版还是免费版 ...
随机推荐
- 【Scala】Scala之Object
一.前言 前面学习了Scala的Methods,接着学习Scala中的Object 二.Object Object在Scala有两种含义,在Java中,其代表一个类的实例,而在Scala中,其还是一个 ...
- Hello,Kubernetes
什么是Kubernetes Kubernetes(k8s)是一款开源的以容器为中心的,用于跨主机集群自动部署(automating deployment),控制容器扩展/收缩(scaling)和管理容 ...
- HTML5之通信和多线程
HTML通信 跨文档消息传输 HTML5提供了在网页文档之间相互接收和发送信息的功能,使用这个功能,只要获取到网页所在窗口对象的实例,不仅同源(域+端口)的网页可以相互通信,甚至可以实现跨域通信.涉及 ...
- 算法模板——splay区间反转 2
实现功能:同splay区间反转 1(基于BZOJ3223 文艺平衡树) 这次改用了一个全新的模板(HansBug:琢磨了我大半天啊有木有),大大简化了程序,同时对于splay的功能也有所完善 这里面没 ...
- Codevs3278[NOIP2013]货车运输
3287 货车运输 2013年NOIP全国联赛提高组 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 钻石 Diamond 题目描述 Description A 国有 ...
- Linux实战教学笔记25:自动化运维工具之ansible (一)
第二十五节 ansible之文件的批量分发 标签(空格分隔): Linux实战教学笔记-陈思齐 ---本教学笔记是本人学习和工作生涯中的摘记整理而成,此为初稿(尚有诸多不完善之处),为原创作品,允许转 ...
- python 机器学习 决策树
决策树(Decision Trees ,DTs)是一种无监督的学习方法,用于分类和回归. 优点:计算复杂度不高,输出结果易于理解,对中间值缺失不敏感,可以处理不相关的特征数据缺点:可能会产生过度匹配的 ...
- java实体属性对应mysql和SQL Server 和Oracle 数据类型对应
1:Java数据类型与MySql数据类型对照表 类型名称 显示长度 数据库类型 JAVA类型 JDBC类型索引(int) VARCHAR L+N VARCHAR java.lang.String 12 ...
- Java第一次作业
(一)学习总结 1.在java中通过Scanner类完成控制台的输入,Scanner类实现基本数据输入的方法是什么? import java.util.Scanner; System.out.prin ...
- spdlog源码阅读 (3): log_msg和BasicWriter
4. log_msg和它的打手BasicWriter 在spdlog源码阅读 (2): sinks的创建和使用中,提到log_msg提供了存储日志的功能.那么到底在spdlog中它是怎么 起到这个作用 ...