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进行事件监听，事实上两个源还是隔离的，同时发送的消息由监听者决定如何处理。至此，我的问题已经解决了。

总结：

   1）做事方式上：遇到问题不能直接就百度、google、bing等，尤其是国内的搜索引擎，垃圾结果一大堆，首先是圈定问题域所在，然后再去查找相关技术知识，提高效率，这些技术知识是对解决方法进行判断的前提，不然你找来的解决办法可能隐藏着巨bug，同时随便百度都能找到的解决办法的说明只要找一个会百度的人都可以代替你，那么自己的价值体现在什么地方呢？

   2）基础是技术突破关键点，基础扎实可以推理出基于上层实现的技术，举一反三。