跨子域页面间的 JavaScript

当某个互联网运营商的网站上规模之后,他们都会考虑将网站部署到主域名相同,子域名不同的服务器集群上,以此来构建一个聚合的应用。同时,希望能够利用 JavaScript,在不同子域的网页间相互操作,实现一个对用户来说“无缝”的应用。这时,跨域操作的技术难点,仿佛一下子从服务器后台,转移到了浏览器前台。因为,浏览器将承载跨子域访问的任务。为什么会这么说呢?因为,我们已经步入了集成化的 RIA 时代。
一般情况下,通过运用 DOM 对象模型,不同窗口和框架里的内容可以通过 JavaScript 互相作用。但是,由于浏览器可以同时在窗口或框架中显示不同的页面,甚至是不同域下的页面。为了保证数据的完整性和信息的安全性,就必须建立起一种强制规则,来保证跨域的数据不会被非法的获取和修改。
多数情况下,只有相同域下的页面才能相互作用。比如,一个位于 www.microsoft.com 域下的页面,可以自由地通过 JavaScript 读写 www.microsoft.com 域下的其它页面,但却不能读写 home.microsoft.com 域下的页面,或是 www.google.com 域下的页面。完全的跨域访问(比如,www.microsoft.com 域下的页面访问 www.google.com 域下的页面),在 JavaScript 开发中是被完全禁止的,没有任何商量的余地。但是,DOM 为 document 对象提供了一个 domain 属性,可以授权“同主域但不同子域”页面间的数据访问,这正好可以应付那些“集团军”式的前台部署。
跨子域设置的规则:当两个二级域名,URL 协议,端口都相同的网页,自身都通过 JavaScript 显示地设置了相同的 document.domain 值,并且此值至少等于自身的二级域名,它们之间才可以相互作用。(注意,此规则只适用大于二级域名的页面,并且千万别指望 http 页面可以与 https 页面相互作用。)
也就是说,当网页作者指定 document.domain 属性为域名的后半部分时,读写许可将扩展至二级域名。例如:http://www.microsoft.com 下的某个页面,将 document.domain 属性设置成 microsoft.com,同时 http://home.microsoft.com 下的某个页面,也将 document.domain 属性设置成 microsoft.com,它们之间即可完成跨子域的访问。因为,只有以 microsoft.com 结尾的站点上的文档,才可能将其 document.domain 属性设置为 microsoft.com,这样就确保了同一个服务提供者的页面,才能互相提供权限,从而完成交互操作。
注意,document.domain 属性值不能比二级域名更短(比如“com”,浏览器将禁止这种设置,并认为此操作是无效的)。但是,对于如 www.microsoft.co.jp 这样的域名,实际的最大操作权限应该是二级域名 microsoft.co.jp(而不是一级域名“co.jp”,浏览器不会像限制“com”那样,将“co.jp”认为是无效的。但如果你真这样做了,带来的风险可想而知)。
在窗口、对话框、框架(frameset,frame,iframe),甚至是 IE 的 popup 窗口之间(通过 IE 特有的 window.createPopup 方法创建),只要它们涉及到了相互读写,都要考虑 document.domain 问题。这仿佛是“一损俱损,一荣俱荣”的事情,一旦你在某个地方设置了 document.domain,你必须小心应对。因为,你不知道在哪个角落里,会出现“没有权限”的脚本错误。
让窗口或框架在不同域页面之间跳转,是件很寻常的事情,所以跳转操作总是被允许的。只有试图读写页面内容时,才会受到 domain 限制。例如:window.location 可以用来设置地址间的跳转,但是不能用它来读取在不同域下的地址。因为,这会使一个页面知道浏览者去过哪些地方,而这会暴露浏览者的隐私。
在不同域间的页面制约包括
window.location 可以设置,但不能读取。其它的 location 属性和方法被禁止访问;
document.href 可以设置,但不能读取。其它的 document 属性和方法被禁止访问;
的 src 可以设置,但不能读取; <BR>浏览器为什么要加入跨域限制? <BR>浏览器的跨域网页限制,是出于安全角度考虑的,为什么会这么说呢?请想像一下,如果没有域之间的安全限制,一个无赖网页可以“偷窥”别人浏览的页面,然后通过 Ajax 方式,将“偷窥”后的数据发送到某台不为人知的服务器上,它便实现了无耻的侵略行为。 <BR>再或者,这个无赖网页可以通过 DHTML 来更改别人页面的内容。比如:编写一个监视脚本,把用户已经打开的所有页面改换背景色,版权文字,以及放入一些自制的 banner,这样就可以把别人的整个站点变成“自己的”了。 <BR><BR>本文转自 <BR><A href="http://www.diybl.com/course/1_web/javascript/jsjs/2008515/116170.html">http://www.diybl.com/course/1_web/javascript/jsjs/2008515/116170.html</A> </div> <!-- Baidu Button BEGIN --> <div class="bdsharebuttonbox tracking-ad" style="float: right;" data-mod="popu_172"> <a href="#" class="bds_more" data-cmd="more" style="background-position:0 0 !important; background-image: url(http://bdimg.share.baidu.com/static/api/img/share/icons_0_16.png?v=d754dcc0.png) !important"></a> <a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间" style="background-position:0 -52px !important"></a> <a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"style="background-position:0 -104px !important"></a> <a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"style="background-position:0 -260px !important"></a> <a href="#" class="bds_renren" data-cmd="renren" title="分享到人人网"style="background-position:0 -208px !important"></a> <a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"style="background-position:0 -1612px !important" ></a> </div> <script>window._bd_share_config = { "common": { "bdSnsKey": {}, "bdText": "", "bdMini": "1", "bdMiniList": false, "bdPic": "", "bdStyle": "0", "bdSize": "16" }, "share": {} }; with (document) 0[(getElementsByTagName('head')[0] || body).appendChild(createElement('script')).src = 'http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion=' + ~(-new Date() / 36e5)];</script> <!-- Baidu Button END --> <link rel="stylesheet" href="http://static.blog.csdn.net/css/blog_detail.css" /> <!--172.16.140.11--> <!-- Baidu Button BEGIN --> <script type="text/javascript" id="bdshare_js" data="type=tools&uid=1536434" ></script> <script type="text/javascript" id="bdshell_js"></script> <script type="text/javascript"> document.getElementById("bdshell_js").src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?cdnversion=" + Math.ceil(new Date()/3600000) </script> <!-- Baidu Button END --> <div id="digg" ArticleId="3022873"> <dl id="btnDigg" class="digg digg_disable"> <dt>顶</dt> <dd>0</dd> </dl> <dl id="btnBury" class="digg digg_disable"> <dt>踩</dt> <dd>0</dd> </dl> </div> <ul class="article_next_prev"> <li class="prev_article"><span onclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_shangyipian']);location.href='/zi_jin/article/details/3017745';">上一篇</span><a href="/zi_jin/article/details/3017745" onclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_shangyipian'])">javascript事件列表解说</a></li> <li class="next_article"><span onclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_xiayipian']);location.href='/zi_jin/article/details/3389907';">下一篇</span><a href="/zi_jin/article/details/3389907" onclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_xiayipian'])">javascript 扩展Function对象 获取函数名称</a></li> </ul> <div style="clear:both; height:10px;"></div> <div class="similar_article" style="display:none"> <h4>我的同类文章</h4> <div class="similar_c"style="margin:20px 0px 0px 0px"> <div class="similar_c_t"> <label class="similar_cur"> <span style="cursor:pointer" onclick="GetCategoryArticles('390875','zi_jin','foot','3022873');">JavaScript<em>(30)</em></span> </label> </div> <div class="similar_wrap tracking-ad" data-mod="popu_141" style="max-height:195px;"> <a href="http://blog.csdn.net" style="display:none">http://blog.csdn.net</a> <ul class="similar_list fl"> </ul> <ul class="similar_list fr"> </ul> </div> </div> </div> <script type="text/javascript"> $(function () { GetCategoryArticles('390875', 'zi_jin','foot','3022873'); }); </script> </div> <div id="suggest"></div> <script language="javascript" type='text/javascript'> $(function(){ $.get("/zi_jin/svc/GetSuggestContent/3022873",function(data){ $("#suggest").html(data); }); }); </script> <style> .blog-ass-articl dd { color: #369; width: 99%; /*修改行*/ float: left; overflow: hidden; font: normal normal 12px/23px "SimSun"; height: 23px; margin: 0; padding: 0 0 0 10px; margin-right: 30px; background: url(http://static.blog.csdn.net/skin/default/images/blog-dot-red3.gif) no-repeat 0 10px; } </style> <dl class="blog-ass-articl" id="res-relatived" > <dt><span>猜你在找</span></dt> <div id="adCollege" style="width: 42%;float: left;"> <script src="http://csdnimg.cn/jobreco/job_reco.js" type="text/javascript"></script> <script type="text/javascript"> csdn.position.showEdu({ sourceType: "blog", searchType: "detail", searchKey: "3022873", username: "", recordcount: "5", containerId: "adCollege" //容器DIV的id。 }); </script> </div> <div id="res" data-mod="popu_36" class="tracking-ad" style="width: 42%;float: left;margin-right: 30px;"></div> </dl> <script type="text/javascript"> $(function () { setTimeout(function () { var searchtitletags = '跨子域页面间的 JavaScript' + ',' + $("#tags").html(); searchService({ index: 'blog', query: searchtitletags, from: 5, size: 5, appendTo: '#res', url: 'recommend', his: 2, client: "blog_cf_enhance", tmpl: '<dd style="background:url(http://static.blog.csdn.net/skin/default/images/blog-dot-red3.gif) no-repeat 0 10px;"><a href="#{ url }" title="#{ title }" strategy="#{ strategy }">#{ title }</a></dd>' }); }, 500); }); </script> <div id="ad_cen"> <!--AdForward Begin:--> <script type="text/javascript" src="http://csdnim.qtmojo.com/main/s?user=csdn|blog|banner2&db=csdnim&border=0&local=yes&js=ie" charset="gbk"></script> <!--AdForward End--> </div> <div class="comment_class"> <div id="comment_title" class="panel_head"> <span class="see_comment">查看评论</span><a name="comments"></a></div> <div id="comment_list"> </div> <div id="comment_bar"> </div> <div id="comment_form"> </div> <div class="announce"> * 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场<a name="reply"></a><a name="quote"></a></div> </div> <script type="text/javascript"> var fileName = '3022873'; var commentscount = 0; var islock = false </script> <script type="text/javascript" src="http://static.blog.csdn.net/scripts/comment.js"></script> <div id="ad_bot"> </div> <div id="report_dialog"> </div> <div id="d-top" style="bottom:60px;"> <a id="quick-reply" class="btn btn-top q-reply" title="快速回复" style="display:none;"> <img src="http://static.blog.csdn.net/images/blog-icon-reply.png" alt="快速回复"> </a> <a id="d-top-a" class="btn btn-top backtop" style="display: none;" title="返回顶部" onclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_huidaodingbu'])" style=""> <img src="http://static.blog.csdn.net/images/top.png" alt="TOP"> </a> </div> <script type="text/javascript"> $(function () { $("#ad_frm_0").height("90px"); setTimeout(function(){ $("#ad_frm_2").height("200px"); },1000); }); </script> <style type="text/css"> .tag_list { background: none repeat scroll 0 0 #FFFFFF; border: 1px solid #D7CBC1; color: #000000; font-size: 12px; line-height: 20px; list-style: none outside none; margin: 10px 2% 0 1%; padding: 1px; } .tag_list h5 { background: none repeat scroll 0 0 #E0DBD3; color: #47381C; font-size: 12px; height: 24px; line-height: 24px; padding: 0 5px; margin: 0; } .tag_list h5 a { color: #47381C; } .classify { margin: 10px 0; padding: 4px 12px 8px; } .classify a { margin-right: 20px; white-space: nowrap; } </style> <div class="tag_list" style="display:none"></div> <script language="javascript" type='text/javascript'> $(function(){ setTimeout(function(){ $.get("/zi_jin/svc/GetTagContent",function(data){ $(".tag_list").html(data).show(); }); }); },500); </script> <div id="pop_win" style="display:none ;position: absolute; z-index: 10000; border: 1px solid rgb(220, 220, 220); top: 222.5px; left: 630px; opacity: 1; background: none 0px 0px repeat scroll rgb(255, 255, 255);"> </div> <div id="popup_mask"></div> <style> #popup_mask { position: absolute; width: 100%; height: 100%; background: #000; z-index: 9999; left: 0px; top: 0px; opacity: 0.3; filter: alpha(opacity=30); display: none; } </style> <script type="text/javascript"> $(function(){ setTimeout(function(){ $(".comment_body:contains('回复')").each(function(index,item){ var u=$(this).text().split(':')[0].toString().replace("回复","") var thisComment=$(this); if(u) { $.getJSON("https://passport.csdn.net/get/nick?callback=?", {users: u}, function(a) { if(a!=null&&a.data!=null&&a.data.length>0) { nick=a.data[0].n; if(u!=nick) { thisComment.text(thisComment.text().replace(u,nick)); } } }); } }); },200); setTimeout(function(){ $("a img[src='http://js.tongji.linezing.com/stats.gif']").parent().css({"position":"absolute","left":"50%"}); },300); }); function loginbox(){ var $logpop=$("#pop_win"); $logpop.html('<iframe src="https://passport.csdn.net/account/loginbox?service=http://static.blog.csdn.net/callback.htm" frameborder="0" height="600" width="400" scrolling="no">'); $('#popup_mask').css({ opacity: 0.5, width: $( document ).width() + 'px', height: $( document ).height() + 'px' }); $('#popup_mask').css("display","block"); $logpop.css( { top: ($( window ).height() - $logpop.height())/ 2 + $( window ).scrollTop() + 'px', left:($( window ).width() - $logpop.width())/ 2 } ); setTimeout( function () { $logpop.show(); $logpop.css( { opacity: 1 } ); }, 200 ); $('#popup_mask').unbind("click"); $('#popup_mask').bind("click", function(){ $('#popup_mask').hide(); var $clopop = $("#pop_win"); $("#common_ask_div_sc").css("display","none"); $clopop.css( { opacity: 0 } ); setTimeout( function () { $clopop.hide(); }, 350 ); return false; }); }

你可能感兴趣的:(JavaScript,框架,浏览器,服务器,脚本,domain)