同源策略指的是三个相同

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

如https://www.baidu.com/hahah.html这个网址来说 https是使用的协议,www.baidu.com是域名,端口号默认是80(不指定端口默认是80端口);

所以:

  1. www.baidu.com/hehe.html 同源
  2. www.baidu.com/heihei/houhou.html 同源
  3. www.i71.com/haha.html  域名不同,不同源
  4. 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 Window.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 both https), port number (443 being the default for https), and host (modulo Document.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)的更多相关文章

  1. 准备.Net转前端开发-WPF界面框架那些事,值得珍藏的8个问题

    题外话 不出意外,本片内容应该是最后一篇关于.Net技术的博客,做.Net的伙伴们忽喷忽喷..Net挺好的,微软最近在跨平台方面搞的水深火热,更新也比较频繁,而且博客园的很多大牛也写的有跨平台相关技术 ...

  2. 准备.Net转前端开发-WPF界面框架那些事,搭建基础框架

    题外话 最近都没怎么写博客,主要是最近在看WPF方面的书<wpf-4-unleashed.pdf>,挑了比较重要的几个章节学习了下WPF基础技术.另外,也把这本书推荐给目前正在从事WPF开 ...

  3. 准备.Net转前端开发-WPF界面框架那些事,UI快速实现法

    题外话 打开博客园,查看首页左栏的”推荐博客”,排名前五的博客分别是(此处非广告):Artech.小坦克.圣殿骑士.腾飞(Jesse).数据之巅.再看看它们博客的最新更新时间:Artech(2014- ...

  4. 网站开发进阶(三十八)Web前端开发规范文档你需要知道的事

    Web前端开发规范文档你需要知道的事 规范目的 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进 ...

  5. Web前端开发规范文档你需要知道的事

    Web前端开发规范文档你需要知道的事 规范目的 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进 ...

  6. Web前端开发规范文档你需要知道的事--HTML、css、js、文档等需要规范内容

          规范目的 为提高团队协作效率,便于后台人员添加功能及前端后期优化维护,输出高质量的文档,特制订此文档.本规范文档一经确认,前端开发人员必须按本文档规范进行前台页面开发.本文档如有不对或者不 ...

  7. vue前端开发那些事——后端接口.net core web api

    红花还得绿叶陪衬.vue前端开发离不开数据,这数据正来源于请求web api.为什么采用.net core web api呢?因为考虑到跨平台部署的问题.即使眼下部署到window平台,那以后也可以部 ...

  8. JS高级前端开发群加群说明及如何晋级

    JS高级前端开发群加群说明 一.文章背景: 二. 高级群: 三. 加入方式: 四. 说明:   一.文章背景: 去年年初建了几个群,在不经意间火了,一直排在“前端开发”关键字搜索结果第一名.当然取得这 ...

  9. Visual Studio前端开发工具/扩展

    怎么样让Visual Studio更好地编写HTML5, CSS3, JavaScript, jQuery,换句话说就是如何更好地做前端开发.Visual Studio 2010不管是旗舰版还是免费版 ...

随机推荐

  1. laravel中的Database Notifications

    创建Post and  User模型 php artisan make:model Post php artisan make:model User 创建posts and  users 表文件 ph ...

  2. GPU渲染管线概述

    1.顶点着色器 顶点着色器是流水线的第一个阶段,它的输入来自于CPU.顶点着色器的处理单位是顶点,也就是说输入进来的每个顶点都会调用一次顶点着色器. 顶点着色器需要完成的工作主要有:坐标变换和逐顶点光 ...

  3. Spring框架(3)---IOC装配Bean(注解方式)

    IOC装配Bean(注解方式) 上面一遍文章讲了通过xml来装配Bean,那么这篇来讲注解方式来讲装配Bean对象 注解方式需要在原先的基础上重新配置环境: (1)Component标签举例 1:导入 ...

  4. Java表达式中的那些坑

    [1]您确定真正了解后缀表达式与前缀表达式的区别吗? public class IncrementDemo{ public static void main(String[] args) { int ...

  5. HA高可用集群

     准备2台机器:主:master:192.168.254.140从:slave:192.168.254.141 1.主上安装:wget www.lishiming.net/data/attachmen ...

  6. Spring+SpringMVC+MyBatis+easyUI整合基础篇(八)mysql中文查询bug修复

    写在前面的话 在测试搜索时出现的问题,mysql通过中文查询条件搜索不出数据,但是英文和数字可以搜索到记录,中文无返回记录.本文就是写一下发现问题的过程及解决方法.此bug在第一个项目中点这里还存在, ...

  7. Java的容器类小结

    Java的容器类其实就是集合类,只是为了不与Collection接口混淆,国内基本翻译为容器类. 容器类分为两种:独立元素序列的Collection和键值对的Map. Collection主要有如下几 ...

  8. 【翻译】LPeg编程指南

    原文:http://www.inf.puc-rio.br/~roberto/lpeg/lpeg.html   译者序: 这个是官方的LPeg的文档.这段时间学习LPeg的时候发现国内关于LPeg的文章 ...

  9. noscript 标签,一个被忽视的重要标签

    打开 Drupal 的新后台,发现显示大面积空白 .本以为是 CSS 的问题,后来折腾好久才发现是我之前因为某些站的安全问题把浏览器的 Javascript 给禁用了.Javascript 的日益强大 ...

  10. 关于wxpython多线程研究包括(import Publisher错误研究)

    作为一个自动化测试人员,开发基本的应用桌面程序是必须的!最近在研究wxpython相关知识,目前看到多线程一块,发现官方文档介绍说:"在线程中不能修改修改窗口属性!",但是实际情况 ...