欢迎登陆真网站，您的到来是我们的荣幸。 登陆 注册 忘记密码？ ☆设为首页 △加入收藏
欢迎加入真幸福QQ群
电脑知识: 基础知识 网络技术 操作系统 办公软件 电脑维修 电脑安全 windows7 windows8 windows10 服务器教程 平板电脑 视频播放教程 网络应用 互联网 工具软件 浏览器教程 QQ技巧 输入法教程 影视制作 YY教程 wps教程 word教程 Excel教程 PowerPoint
云南西双版纳特产小花糯玉米真空包装
电脑安全    更多
电脑知识    更多


做好Web服务器的日常维护必备常识
ssl最新漏洞曝光 可通过wifi可攻击ios设备
115网盘怎么用 115网盘下载方法步骤详解
如何应用份认证模块和.htaccess文件保证Web安全
你所不知道的XML安全
arp断网攻击怎么办 arp断网攻击解决办法
电脑病毒的危害与预防措施
以安全方式将Android设备接入企业Wi-Fi
找回MD5加密的密码及MD5加密数据库中数据
对称加密之AES及压缩加密解密解压综合实战
Web安全技术之浏览器的跨域访问
【 来源：网络 】【 点击：7 】 【 发布时间：2017_03_03 08:59:59 】

 一、浏览器介绍

对于Web应用来说，浏览器是最重要的客户端。

目前浏览器五花八门多得不得了，除了Chrome、IE、Firefox、Safari、Opera这些国外的浏览器外，百度、腾讯、360、淘宝、搜狗、傲游之类的，反正能做的都做了。

浏览器虽然这么多，但浏览器内核主要就以下4种：

Trident：IE使用的内核。

Gecko：Firefox使用的内核。

WebKit：Safair和Chrome使用的内核。WebKit由苹果发明，Chrome也用了，但是Google又开发了V8引擎替换掉了WebKit中的Javascript引擎。

Presto：Opera使用的内核。

国内的浏览器基本都是双核浏览器，使用基于WebKit的内核高速浏览常用网站，使用Trident内核兼容网银等网站。

二、同源策略

同源策略是浏览器最基本的安全策略，它认为任何站点的内容都是不安全的，所以当脚本运行时，只被允许访问来自同一站点的资源。

同源是指域名、协议、端口都相同。

如果没有同源策略，就会发生下面这样的问题：

恶意网站用一个iframe把真实的银行登录页放到他的页面上，当用户使用用户名密码登录时，父页面的javascript就可以读取到银行登录页表单中的内容。

甚至浏览器的1个Tab页打开了恶意网站，另一个Tab页打开了银行网站，恶意网站中的javascript可以读取到银行网站的内容。这样银行卡和密码就能被轻易拿走。

三、跨域访问

由于同源策略的原因，浏览器对跨域访问做了很多限制，但有时我们的确需要做跨域访问，那要怎么办?主要有以下几种情况：

1. iframe的跨域访问

同域名下，父页面可以通过document.getElementById(‘_iframe’).contentWindow.document访问子页面的内容，但不同域名下会出现类似下面的错误：

Uncaught SecurityError: Blocked a frame with origin “http://a.com” from accessing a frame with origin “http://b.com”. Protocols, domains, and ports must match.

有两种解决方法：

1). 当主域名相同，子域名不同时，比较容易解决，只需设置相同的document.domain即可。

如http://a.a.com/a.html使用iframe载入http://b.a.com/b.html，且在a.html中有Javascript要修改b.html中元素的内容时，可以像下面的代码那样操作。

a.html

  1. <html> 
  2.   <head> 
  3.     <script> 
  4.       document.domain = 'a.com';  
  5.       function changeIframeContent() {  
  6.         var _iframe = document.getElementById('_iframe');  
  7.         var _p = _iframe.contentWindow.document.getElementById('_p');  
  8.         _p.innerHTML = 'Content from a.html';  
  9.       }  
  10.     </script> 
  11.   </head> 
  12.   <body> 
  13.     <iframe id="_iframe" src="http://b.a.com/demo/iframe/subdomain/b.html"></iframe> 
  14.     <br> 
  15.     <input type="button" value="Change iframe content" onclick="changeIframeContent();"/> 
  16.   </body> 
  17. </html> 

b.html

  1. <html> 
  2.   <head> 
  3.     <script> 
  4.       document.domain = 'a.com';  
  5.     </script> 
  6.   </head> 
  7.   <body> 
  8.     <p id="_p">b.html</p> 
  9.   </body> 
  10. </html> 

2). 当主域名不同时，就非常麻烦了。大致的方法像下面描述的那样：

a.com下有a.html;

a.html创建iframe加载b.com下的b.html，可在加载b.html时通过?或#将参数传递到b.html中;

b.html加载后，可以通过提取location.search或location.hash中的内容获取a.html传过来的参数;

b.html创建一个iframe，加载a.com下的c.html，并且参数也通过?或#传给c.html;

因为c.html和a.html是相同域名，所以c.html可以使用parent.parent访问到a.html的对象，这样也就可以将b.html需要传递的参数传回到a.html中。

2. Ajax的跨域访问

Ajax主要通过XMLHttpRequest对象实现，但是如果通过XMLHttpRequest访问不同域名下的数据，浏览器会出现类似下面的错误：

Ajax的跨域访问

这时可由以下两种方法解决：

1). 使用script代替XMLHttpRequest，也就是JSONP的方法。利用script标签的src下加载的js不受同源策略限制，并且加载后的js运行在当前页面的域下，所以可自由操作当前页面的内容。

下面的代码演示了在a.com下的a.html通过b.com下的b.js中的内容来更新自身的p标签。

下面的代码演示了在a.com下的a.html通过b.com下的b.js中的内容来更新自身的p标签。

a.html

 

 

 

 

 

 

 

  1. <html> 
  2.   <head> 
  3.     <script> 
  4.       function update_p (content) {  
  5.         document.getElementById("_p").innerHTML = content;  
  6.       }  
  7.       function getFromB() {  
  8.         var _script = document.createElement("script");  
  9.         _script.type = "text/javascript";  
  10.         _script.src = "http://b.com/demo/ajax/b.js";  
  11.         document.getElementsByTagName("head")[0].appendChild(_script);  
  12.       }  
  13.     </script> 
  14.   </head> 
  15.   <body> 
  16.     <p id="_p">a.html</p> 
  17.     <input type="button" value="Get from b.com" onclick="getFromB()"/> 
  18.   </body> 
  19. </html> 

 

 

 

b.js

update_p("content from b.js");

在实际使用中，通常a.html会将update_p以callback参数名传递给b.com的服务器，服务器动态生成数据后，再用callback参数值包起来作为响应回传给a.html。

2). 在b.com的服务器返回信息中增加以下头信息：

Access-Control-Allow-Origin: http://a.com

Access-Control-Allow-Methods: GET

此时浏览器便允许a.com读取使用GET请求b.com的内容。

对于flash来说，会要求在网站根目录下放一个名为crossdomain.xml的文件，以指明允许访问的域名来源。文件中的内容类似下面的样子：

  1. <cross-domain-policy> 
  2.   <allow-access-from domain="*.a.com" /> 
  3. </cross-domain-policy> 

 

 

 

3. 使用HTML5的postMessage方法实现跨域访问

HTML5增加了跨文档消息传输，下面的例子实现了使用postMessage在不同域间传递消息：

a.html

  1. <html> 
  2.   <head> 
  3.     <script> 
  4.       function update_b () {  
  5.         var _iframe = document.getElementById("_iframe");  
  6.     _iframe.contentWindow.postMessage("content from a.html", "http://b.com");  
  7.       }  
  8.     </script> 
  9.   <head> 
  10.   <body> 
  11.     <iframe id="_iframe" src="http://b.com/demo/html5/b.html"></iframe> 
  12.     <br> 
  13.     <input type="button" value="Update b.html" onclick="update_b()"></input> 
  14.   </body> 
  15. </html> 

b.html

  1. <html> 
  2.   <head> 
  3.     <script> 
  4.       window.addEventListener("message", function (event) {  
  5.         document.getElementById("_p").innerHTML = event.data;  
  6.       }, false);  
  7.     </script> 
  8.   </head> 
  9.   <body> 
  10.     <p id="_p">b.html</p> 
  11.   </body> 
  12. </html> 

在postMessage中要指定接收方的域名，如果发现目标页面的域名不正确，将抛出类似下面这样的错误：

Failed to execute ‘postMessage’ on ‘DOMWindow’: The target origin provided (‘http://c.com’) does not match the recipient window’s origin (‘http://b.com’).

浏览器对跨域访问的限制是出于安全考虑的，所以在使用一些方法实现跨域访问时要特别小心。

友情连接：千岛家园 富康真幸福COM 富康真幸福CN
本网站由川南居提供技术支持，fkzxf版权所有 浙ICP备12031891号
淳安分站 淳安分站