javascript跨域访问探索之旅

需求:

最近工作负责一个互联网应用A(我公司应用)与另一个互联网应用B进行通讯,通讯的方式是这样的:另一个互联网应用某些表单信息需要从我公司的互联网应用获取;首先用户访问互联网应用B,接着在表单编辑页面点击按钮创建新窗口显示互联网应用A内容,用户在应用A窗口选取好内容后点击按钮,应用A的窗口关闭,应用A选取好的内容填充到应用B特定的表单元素上。

这个问题最简化描述就是,浏览器有两个不同网站(域)的页面,页面B需要获取页面A的信息。

问题解决过程:

刚开始我也不知道这个是跨域问题,虽然同事一开始就告诉我说这是javascript跨域问题,但是要自己解决问题,那么至少需要了解背景知识,所以我忽略同事提供的线索。不管是不是跨域的问题,这个问题告诉我的是浏览器的两个展示不同网站的窗口要进行通信,那么首先要确定的是能否两个网站的窗口是否能够通信,鉴于目前掌握的资料有限,我做了一个大胆的决定——基于自己浅薄的知识储备进行假设,假设两个网站的窗口的javascript(或其他客户端脚本技术)可以进行通信,那么试想已经打开且成功登陆的支付宝等应用页面后,用户不小心访问了另一个危险网站,这个危险网站的javascript找到支付宝网页就获取到敏感信息,那么这样浏览器每次只打开一个才是安全的,因为谁也不知道打开的下一个网页是否有javascript获取自己的敏感信息,而打开的新网站页面也担心浏览器存在的其他网站是否有Javascript获取自己的敏感信息,这样的互联网环境人人自危;如果浏览器的两个网站页面不能通信,那么我这个任务就不能完成了。

正正是进行了假设,我怀着忐忑不安的心情开始了浏览器内不同网站窗口通信的探索之旅。既然是浏览器是载体,那么我首先从浏览器入手,浏览器最初是为了解析超文本语言而产生的,而超文本就是html,所以我就了解html技术,了解html技术我常上的网站是www.w3school.com,了解html技术,同时今天的html与Javascript技术是密不可分的,我也同时了解javascript技术,了解html与javascript过程中,主要了解内置对象和html
dom,因为这两个网站最终到浏览器的是html字符流,而浏览器将html字符流构建html dom树,浏览器的一个窗口的载体就是window对象,我查看了介绍发现opener属性十分显眼,因为opener这个属性可以引用到新创建的窗口对象window,而window对象拥有全局变量、javascript定义,那么不就整整符合自己的需求吗?同时也表示一点点担心,是不是说,我从一个网站打开了支付宝并且登录,那么打开支付宝网站的页面就可以获取支付宝网站页面的信息了?如果真的是这样,互联网世界的危险无处不出,但是测试后发现,opener获取到的window对象是有限制的,不能获取document对象等,于是逐个查看浏览器对象,直到document对象的domain属性,这个属性可以返回当前文档的域名,在一个不起眼的提示与注释找到了人生的希望——提示:domain
属性可以解决因同源安全策略带来的不同文档的属性共享问题。点击这里,了解同源安全策略的详细信息

总结链接网页的内容是JavaScript 的同源策略,查看了整个文档,我的注意力停留在跨域脚本API访问那一部分,window.postMessage是一个应用于安全地使用跨源通信的方法。跨源通信的模型是这样的,源A窗口对象获取源B窗口对象,使用源B窗口对象调用postMessage方法将数据传送到源B,源B窗口对象需要添加addEventListener进行事件监听,事实上两个源还是隔离的,同时发送的消息由监听者决定如何处理。至此,我的问题已经解决了。

总结:

版权声明:本文为博主原创文章,未经博主允许不得转载。

时间: 2024-12-23 20:32:13

javascript跨域访问探索之旅的相关文章

Javascript跨域访问解决方案

Javascript跨域访问解决方案 分类: WEB TIPS 2009-02-13 14:08 15882人阅读 评论(5) 收藏 举报 javascriptiframeservletcallbackdomainfunction 由于安全方面的考虑,Javascript被限制了跨域访问的能力,但是有时候我们希望能够做一些合理的跨域访问的事情,那么怎么办呢?这里分两类情况:一.基于同一父域的子域之间页面的访问:参见如下3个domain域:taobao.com.jipiao.taobao.com.

Javascript 跨域访问解决方案 总结

在客户端编程语言中,如javascript和ActionScript,同源策略是一个很重要的安全理念,它在保证数据的安全性方面有着重要的意义.同 源策略规定跨域之间的脚本是隔离的,一个域的脚本不能访问和操作另外一个域的绝大部分属性和方法.那么什么叫相同域,什么叫不同的域呢? 同源策略 在客户端编程语言中,如javascript和 ActionScript,同源策略是一个很重要的安全理念,它在保证数据的安全性方面有着重要的意义.同源策略规定跨域之间的脚本是隔离的,一个域的脚本不能访问和操作另外一个

利用javascript跨域访问cookie之广告推广

在上一篇<说一说javascript跨域和jsonp>中,利用JSONP进行了跨域的数据访问,利用JS本身的跨域能力在远端生成HTML结构的方式完成了一个小广告. 在实际应用中, 跨域使用天气预报组件可以使用上面的方式实现,另外一种常用的就是显示某些电商的广告,此广告中会滚动您访问过的产品或者关联想推介给你的产品. 比如在某个A网页中显示了两种广告: 某东的广告,里面显示的东西,都是访问过滴,并且加推了相关的东西 某宝的广告,基本一样呈现方式. 当访问某东某宝的商品时,会把信息放到cookie

JavaScript跨域访问CORS问题

在尝试从一个web前端使用HTTP Request请求访问REST服务端时,遇到错误: XMLHttpRequest cannot load http://localhost:8080/ping. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:63342' is therefore not allowed access. 这个错误是因为A

javascript 跨域访问

XMLHttpRequest cannot loadhttp://www.zjblogs.com/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. 查了一翻资料,发现原来是新W3C标准中是这样规定的: 最新的W3C标准里是这么实现HTTP跨域请求的, Cross-Origin Resource

三种方法实现js跨域访问

javascript跨域访问是web开发者经常遇到的问题,什么是跨域,一个域上加载的脚本获取或操作另一个域上的文档属性,下面将列出三种实现javascript跨域方法: 1.基于iframe实现跨域 基于iframe实现的跨域要求两个域具有aa.xx.com,bb.xx.com这种特点,也就是两个页面必须属于一个基础域(例如都是xxx.com,或是xxx.com.cn),使用同一协议(例如都是 http)和同一端口(例如都是80),这样在两个页面中同时添加document.domain,就可以实

实现跨域访问

javascript跨域访问是web开发者经常遇到的问题,什么是跨域,一个域上加载的脚本获取或操作另一个域上的文档属性,下面将列出三种实现javascript跨域方法: 1.基于iframe实现跨域 基于iframe实现的跨域要求两个域具有aa.xx.com,bb.xx.com这种特点,也就是两个页面必须属于一个基础域(例如都是xxx.com,或是xxx.com.cn),使用同一协议(例如都是 http)和同一端口(例如都是80),这样在两个页面中同时添加document.domain,就可以实

javascript跨域訪问探索之旅

需求: ??????? 近期工作负责一个互联网应用A(我公司应用)与还有一个互联网应用B进行通讯.通讯的方式是这种:还有一个互联网应用某些表单信息须要从我公司的互联网应用获取.首先用户訪问互联网应用B.接着在表单编辑页面点击button创建新窗体显示互联网应用A内容.用户在应用A窗体选取好内容后点击button,应用A的窗体关闭.应用A选取好的内容填充到应用B特定的表单元素上. ?????? 这个问题最简化描写叙述就是,浏览器有两个不同站点(域)的页面,页面B须要获取页面A的信息. 问题解决过程

【JavaScript】frame跨域访问元素

什么是跨frame访问元素呢?比如main.html中有如下代码: <frameset cols="50%,*"> <frame src="frame1.html"> <frame src="frame2.html"> </frameset> 如果想在frame2.html的页面操作frame1.html中的元素,那么通过如下的js代码就可以完成: parent.frames[0].document