浏览器的跨域问题以及解决方案Web安全技术之浏览器的跨域访问
一、浏览器介绍
对于Web应用来说，浏览器是最重要的客户端。
目前浏览器五花八门多得不得了，除了Chrome、IE、Firefo、Safari、Opera这些国外的浏览器外，百度、腾讯、360、淘宝、搜狗、傲游之类的，反正能做的都做了。
浏览器虽然这么多，但浏览器内核主要就以下4种：
Trident：IE使用的内核。
Gecko：Firefo使用的内核。
WebKit：Safair和Chrome使用的内核。WebKit由苹果发明，Chrome也用了，但是Google又开发了V8引擎替换掉了WebKit中的script引擎。
Presto：Opera使用的内核。
国内的浏览器基本都是双核浏览器，使用基于WebKit的内核高速浏览常用网站，使用Trident内核兼容网银等网站。
二、同策略
同策略是浏览器最基本的安全策略，它认为任何站点的内容都是不安全的，所以当脚本运行时，只被允许访问来自同一站点的资。
同是指域名、协议、端口都相同。
如果没有同策略，就会发生下面这样的问题：
恶意网站用一个iframe把真实的银行登录页放到他的页面上，当用户使用用户名密码登录时，父页面的script就可以读取到银行登录页表单中的内容。
甚至浏览器的1个Tab页打开了恶意网站，另一个Tab页打开了银行网站，恶意网站中的script可以读取到银行网站的内容。这样银行卡和密码就能被轻易拿走。
iframe参数传递三、跨域访问
由于同策略的原因，浏览器对跨域访问做了很多限制，但有时我们的确需要做跨域访问，那要怎么办?主要有以下几种情况：
1.iframe的跨域访问
同域名下，父页面可以通过ElementById(“iframe”).contentdowument访问子页面的内容，但不同域名下会出现类似下面的错误：
Uncaught SecurityError: Blocked a frame with orin “” from accessing a frame with orin “”.Protocols, domains, and ports must match.
有两种解决方法：
1).当主域名相同，子域名不同时，比较容易解决，只需设置相同的document.domain即可。
如/a.使用iframe载入/b.，且在a.中有script要修改b.中元素的内容时，可以像下面的代码那样操作。
a.
document.domain = "";  function changeIframeContent {  var iframe = ElementById("iframe");  var p = ElementById("p");  p.inner = "Content from a.";  }               
b.
document.domain = "";        b.   
2).当主域名不同时，就非常麻烦了。大致的方法像下面描述的那样：
下有a.   
a.创建iframe加载下的b.，可在加载b.时通过?或#将参数传递到b.中   
b.加载后，可以通过提取location.search或location.hash中的内容获取a.传过来的参数   
b.创建一个iframe，加载下的c.，并且参数也通过?或#传给c.   
因为c.和a.是相同域名，所以c.可以使用parent.parent访问到a.的对象，这样也就可以将b.需要传递的参数传回到a.中。
2.Aja的跨域访问
Aja主要通过MLRequest对象实现，但是如果通过MLRequest访问不同域名下的数据，浏览器会出现类似下面的错误：
这时可由以下两种方法解决：
1).使用script代替MLRequest，也就是JSONP的方法。利用script标签的src下加载的js不受同策略限制，并且加载后的js运行在当前页面的域下，所以可自由操作当前页面的内容。
下面的代码演示了在下的a.通过下的b.js中的内容来更新自身的p标签。
下面的代码演示了在下的a.通过下的b.js中的内容来更新自身的p标签。
a.
function updatep (content) {  ElementById(“p”).inner = content;  }  function getFromB {  var script = ateElement(“script”);  pe = “tet/script”;  script.src = “/demo/aja/b.js”;  ElementsByTagName(“head”)[0].endChild(script)
;  }        a.     
b.js
updatep(“content from b.js”);
在实际使用中，通常a.会将updatep以callback参数名传递给的服务器，服务器动态生成数据后，再用callback参数值包起来作为响应回传给a.。
2).在的服务器返回信息中增加以下头信息：
Access-Control-Allow-Orin:
Access-Control-Allow-Methods: GET
此时浏览器便允许读取使用GET请求的内容。
对于flash来说，会要求在网站根目录下放一个名为crossdomain.ml的文件，以指明允许访问的域名来。文件中的内容类似下面的样子：
3.使用5的postMessage方法实现跨域访问
5增加了跨文档消息传输，下面的例子实现了使用postMessage在不同域间传递消息：
a.
function updateb  {  var iframe = ElementById(“iframe”);  tdow.postMessage(“content from a.”, “”);  }               
b.
dow.addEventListener(“message”, function (event) {  ElementById(“p”).inner = event.data;  }, false);        b.   
在postMessage中要指定接收方的域名，如果发现目标页面的域名不正确，将抛出类似下面这样的错误：
Failed to eecute “postMessage” on “DOMdow”: The target orin provided (“”) does not match the recipient dowrs;s orin (“”).
浏览器对跨域访问的限制是出于安全考虑的，所以在使用一些方法实现跨域访问时要特别小心。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。