2. 程式人生 > >javascript同源策略和跨域實驗及其跨域解決辦法

javascript同源策略和跨域實驗及其跨域解決辦法

阿新 • • 發佈：2019-02-17

二、問題分析： 應用A採用域名http://trade.alibaba.com ，應用B採用的域名 http://56.alibaba.com。屬於相同主域下的不同子域。牽涉出跨域是否能操作其他文件
三、問題延伸： 瞭解跨域，我們先了解一下javascript的同源策略，同源策略阻止從一個源載入的文件或指令碼獲取或設定另一個源載入的文件的屬性。如果它們的協議、埠（如果指明瞭的話）和主機名都相同。則他們屬於同源。深入瞭解同源策略對我們解決問題有很大幫助。
四、實驗目的： 
    1、證明同源策略在各大瀏覽器下的表現是否統一 
    2、不同載入方式對同源策略的是否有不同的影響（包括父視窗開啟子視窗、父視窗iframe子視窗、ajax呼叫其他域下的文件載入）
    3、探尋解決跨域問題的辦法
五、實驗準備：

 
1、根據實驗的目的，我們把我們需要做的實驗用列表的方式展現出來，方便得出結論。結論填入下表

1 型別 頁面A 頁面B 頁面關係和瀏覽器表現
（N為出錯，Y為正常）
open iframe ajax
ie ff g ie ff g ie ff g
2 協議、埠、域均相同

http://www.alibaba.com/

domain1/a.htm

http://www.alibaba.com/

domain2/b.htm

 Y Y Y Y Y Y Y Y Y
3 協議、埠、域均相同

http://www.alibaba.com:8080/

domain1/a.htm

http://www.alibaba.com:8080/

domain2/b.htm

 Y Y Y Y Y Y Y Y Y
4 協議不同

http://www.alibaba.com/

domain1/a.htm

https://www.alibaba.com/

domain2/b.htm
5 埠不同

http://www.alibaba.com/

domain1/a.htm

http://www.alibaba.com:8080/

domain2/b.htm

 N N N N N N N N N
6 域不同

http://www.alibaba.com/

domain1/a.htm

http://www.alisoft.com/

domain2/b.htm

 N N N N N N N N N
7 子域（主機名）不同

http://56.alibaba.com/

domain1/a.htm

http://trade.alibaba.com/

domain2/b.htm

 N N N N N N N N N
8 子域（主機名）不同,子域為空

http://alibaba.com/

domain1/a.htm

http://56.alibaba.com/

domain2/b.htm

 N N N N N N N N N
9

子域不同設定

document.domain

="alibaba.com"

屬性後

http://56.alibaba.com/

domain1/a.htm

http://trade.alibaba.com/

domain1/a.htm

 Y Y Y Y Y Y N N N
10 域不同，IP相同

http://56.alibaba.com/

domain1/a.htm

http://127.0.0.1/

domain2/b.htm

 N N N N N N N N N

       
                      

通過上面的表格，能確定同源策略在各個瀏覽器的支援程度，並檢驗各種頁面引入方式對同源策略的影響。

2、其中A頁面和B頁面關係三種情況如下圖：

  


圖2-1 window.open開啟子視窗

其中A頁面原始碼如下：

Html程式碼  收藏程式碼
  1. <html>  
  2. <head>  
  3. <title>Page A</title>  
  4. <script>  
  5.     alert("domain is:"+document.domain);  
  6.     var openerWindow=function(url){  
  7.             window.open(url);          
  8.     }  
  9. </script>  
  10. </head>  
  11. <body>  
  12.     <h1 style="text-align:center;font-size:100px;">A</h1>  
  13.     <div style="text-align:center"><input type="text" id="mytext" value="I'm page A"/><br/>  
  14.     <button onclick="openerWindow('http://www.alibaba.com/domain2/b.htm')">開啟子視窗</button><!--url根據跨域更改-->  
  15.     </div>  
  16. </body>  
  17. </html>  
 

 
其中B頁面原始碼如下：

Html程式碼  收藏程式碼
  1. <html>  
  2. <head>  
  3. <title>Page B</title>  
  4. <script>  
  5. alert("domain is:"+document.domain);  
  6.     var refleshOpener=function(){  
  7.         window.opener.location.reload();  
  8.     }  
  9. </script>  
  10. </head>  
  11. <body>  
  12.     <h1 style="text-align:center;font-size:100px;">B</h1>  
  13.     <div style="text-align:center"><input type="text" id="mytext" value="I'm page B"/><br/>  
  14.     <button onclick="refleshOpener()">重新整理父視窗</button>  
  15.     </div>  
  16. </body>  
  17. </html>  
 






圖2-2 iframe引入子視窗

其中A頁面原始碼如下：

Html程式碼  收藏程式碼
  1. <html>  
  2. <head>  
  3. <title>Page A</title>  
  4. <script>  
  5.     alert("domain is:"+document.domain);  
  6.     var getValue=function(){  
  7.         alert("子視窗中值為："+window.frames['little_frame'].document.getElementById('mytext').value);   
  8.     }  
  9. </script>  
  10. </head>  
  11. <body>  
  12.     <h1 style="text-align:center;font-size:100px;">A</h1>  
  13.     <div style="text-align:center">  
  14.     <iframe id="little_frame" name="little_frame" width="300" height="300"  src="http://www.alibaba.com/domain2/b.htm"></iframe><br/>  
  15.     <input type="text" id="mytext" value="I'm page A"/><br/>  
  16.     <button onclick="getValue()">獲取子視窗屬性</button>  
  17.     </div>  
  18. </body>  
  19. </html>  

 
其中B頁面原始碼如下：

Html程式碼  收藏程式碼
  1. <html>  
  2. <head>  
  3. <title>Page B</title>  
  4. <script>  
  5. alert("domain is:"+document.domain);  
  6.     var getValue=function(){  
  7.         alert("父視窗中值為："+top.document.getElementById('mytext').value);     
  8.     }  
  9. </script>  
  10. </head>  
  11. <body>  
  12.     <h1 style="text-align:center;font-size:100px;">B</h1>  
  13.     <div style="text-align:center"><input type="text" id="mytext" value="I'm page B"/><br/>  
  14.     <button onclick="getValue()">獲取父視窗屬性</button>  
  15.     </div>  
  16. </body>  
  17. </html>  

 



圖2-3 ajax的load方法載入B.htm的內容

其中A頁面原始碼如下：

Page a程式碼  收藏程式碼
  1. <html>  
  2. <head>  
  3. <title>Page A</title>  
  4. <script src="jquery-1.3.2.js"></script>  
  5. <script>  
  6.     alert("domain is:"+document.domain);  
  7.     var loadB=function(){  
  8.         $('#loadContentDiv').load("http://www.alibaba.com/domain2/b_ajax.htm");  
  9.     }  
  10. </script>  
  11. </head>  
  12. <body>  
  13.     <h1 style="text-align:center;font-size:100px;">A</h1>  
  14.     <div style="text-align:center">  
  15.     <input type="text" id="mytext" value="I'm page A"/><br/><br/>  
  16.     <div id="loadContentDiv">這裡載入Page B</div>  
  17.     <button onclick="loadB()">Ajax載入Page B</button>  
  18.     </div>  
  19. </body>  
  20. </html>  
 

其中B頁面原始碼如下：

Page b程式碼  收藏程式碼
  1. <html>  
  2. <head>  
  3. <title>Page B</title>  
  4. <script>  
  5. </script>  
  6. </head>  
  7. <body>  
  8.     <h1 style="text-align:center;font-size:100px;">B</h1>  
  9. </body>  
  10. </html>  
 

3、伺服器和頁面部署： 

    頁面位置如下：

    



    伺服器採用tomcat，在tomcat安裝目錄下conf\Catalina\localhost\ 新建domain1.xml、domain2.xml

    配置分別如下：

Domain1程式碼  收藏程式碼
  1. <?xml version="1.0" encoding="UTF-8"?> <Context docBase="D:/experiment/domain1" path="domain1" reloadable="true"></Context>  
  Domain2程式碼  收藏程式碼
  1. <?xml version="1.0" encoding="UTF-8"?> <Context docBase="D:/experiment/domain2"  
  2. path="domain2" reloadable="true"></Context>  
 


4、通過host繫結來模擬跨域請求。 
  通過修改C:/windows/system32/drivers/etc/hosts檔案

   如在測試第5組時的繫結為：

   127.0.0.1 www.alibaba.com
   127.0.0.1 www.alisoft.com

    

六、實驗過程 
實驗過程有些枯燥，對於協議或埠不同的情況，需要在本地架設兩套伺服器。

        其中需要值得說明的是子域的情況：

        在驗證http://alibaba.com/domain1/a.htm和http://56.alibaba.com/domain2/b.htm的跨域的跨域過程中，有點令人費解的地方。即，頁面a.htm不設定document.domain的值，預設為alibaba.com，在b.htm中設定document.domain='alibaba.com'。按道理應該可以繞過跨域的問題，但是這個時候，發現跨域的問題任然存在。於是在a.html中寫入 document.domain=document.domain之後，跨域問題就解決了。是不是空的子域跟主域瀏覽器還是認為有差別呢。


七、實驗結論 
通過實驗，我們可以得出結論

1、主要瀏覽器對javascript的同源特性的支援良好，不存在有的瀏覽器不行的情況。
        2、對於不同的載入關係，包括open、iframe、ajax方式，也都表現統一。但是ajax載入的時候，在設定document.domain過程中，由於js在載入進來的時候未執行，所以被load頁面的document.domain沒有生效，造成該方式不能解決ajax的子域跨域問題。但是能用去其他兩種開啟關係解決子域的跨域。

八、跨域解決辦法探討

      1、子域的跨域問題，上面的實驗已經解決了兩中情況，但是ajax載入的情況，還是得不到解決

      2、我們經常引用其他站點的js，比如YUI的庫，可以直接在yahoo網站上引用進來，並可以在本頁面得到執行。也就是說<script>標籤提供跨域特性，那麼我們在頁面A寫入<script src='http://www.domain2.com/getData.jsp'></script>，那麼該段js會跨域載入domain2下getData.jsp輸出的內容。但是需要保證該輸出為js允許的格式，比如是json串。這也就是jsonp的原理了。主要用於ajax跨域請求。但是對於操作跨域開啟的視窗和iframe包含的視窗中的內容時，該方法也是力不從心。

     3、我們開啟一個頁面或者嵌入iframe，再或者寫入一個連線，經常會用到錨點這個概念。比如<a href='http://www.alibaba.com/b.htm#section1'>第一章節</a>這個#號後面跟的便是錨點的位置，用於頁面級的定位。在js裡面可以通過hash讀取改值。ok,在跨域開啟頁面或者iframe頁面的時候，我們也可以通過該方式寫入這個hash值，完成跨域頁面間的通訊。但是隻能父視窗跟子視窗傳值，如果子視窗還需要傳給父視窗值，那麼還需要在子視窗中嵌入iframe，該iframe跟最上面的父視窗同域。這樣就可以完成跨域頁面的雙向通訊了。但是相互操作頁面dom還是不可行的。如果有頁面間的通訊機制，其實很多跨域的問題就已經得到解決了。

     當然，跨域的解決途徑不僅僅只有上面提到的這三種方式。或者你可以也可以想想什麼標籤的什麼特性可以用於跨域呢。

相關推薦

javascript同源策略和跨域實驗及其跨域解決辦法

二、問題分析： 應用A採用域名http://trade.alibaba.com ，應用B採用的域名 http://56.alibaba.com。屬於相同主域下的不同子域。牽涉出跨域是否能操作其他文件三、問題延伸： 瞭解跨域，我們先了解一下javascript的同源策略，同源策略阻止從一個源載入的文件或指令

第二百七十四節，同源策略和跨域訪問

ron 使用 outlook 是否 secure .com 相對 100% wid 同源策略和跨域訪問 什麽是同源策略 盡管瀏覽器的安全措施多種多樣，但是要想黑掉一個Web應用，只要在瀏覽器的多種安全措施中找到某種措施的一個漏洞或者繞過一種安全措施的方法即可。瀏覽器

Django 【第十九篇】JS實現的ajax、同源策略和前端jsonp解決跨域問題

學習 tab頁 hello shortcuts 就會 coo 功能介紹 onclick decorator 一、回顧jQuery實現的ajax 首先說一下ajax的優缺點 優點： AJAX使用Javascript技術向服務器發送異步請求； AJAX無須刷新整個頁面；

Django - - 同源策略和跨域解決方案

url link 交互 功能 出了 tex 鏈接 不能 header 目錄 同源策略 一個源的定義 同源策略是什麽 舉個例子 jQuery中getJSON方法 JSONP應用 1， 同源策略 1.1 一個源的定義 如果兩個頁面的協議，端口（如果有指定）和域名都

django中同源策略和跨域解決方案

一  同源策略 1.1何謂同源? 如果兩個頁面的協議，埠（如果有指定）和域名都相同，則兩個頁面具有相同的源。 舉個例子： 下表給出了相對http://a.xyz.com/dir/page.html同源檢測的示例:  1.2什麼是同源策略? 同源策略是瀏覽

同源策略和跨域訪問

1. 什麼是同源策略      理解跨域首先必須要了解同源策略。同源策略是瀏覽器上為安全性考慮實施的非常重要的安全策略。    何謂同源:        URL由協議、域名、埠和路徑組成，如果兩個URL的協議、域名和埠相同，則表示他們同源。    同源策略:       

解說同源策略和跨域訪問

  同源策略又名同域策略，通俗易懂的來說，同源就是（主機名+協議+埠號【若存在】）三者相同。也就是說javascript只可以操作自己域下的東西，不能操作其他域下的東西。比如百度下javascript是不可操作谷歌下的頁面。

web前端面試-------同源策略和解決跨域問題的九種方法

什麼是同源策略？ 兩個頁面地址中的協議、域名和埠號一致，則表示同源。 同源策略的限制： 儲存在瀏覽器中的資料，如localStroage、Cooke和IndexedDB不能通過指令碼跨域訪問 不能通過指令碼操作不同域下的DOM 不能通過aja

同源策略和跨域問題

index dom 接口 dex 阻止 nodes strong 策略 服務器 1.同源策略 　　指瀏覽器對不同源的腳本或者文本的訪問方式進行的限制。比如源a的js不能引入源b的元素屬性。 　　所謂的同源是指兩個頁面具有相同的協議、主機（也是常說的域名）、端口，三個元素

瀏覽器的同源策略和跨域詳解（內含故事解析）

前言 去年這個時候有寫過一篇文章叫《ajax中的json和jsonp詳解》，寫這個文章是因為我朋友學習前端剛好遇到了這個問題，但是就在昨天，他在學習java的時候又遇到同樣的問題，看來我又要操作一波了。（實則我就他這一個朋友）(๑￫ܫ￩) 提綱內容 重述一遍何為同源策略(因為之前講過) 跨域的三種方式 剖析

跨域問題及其簡單的解決方案

1、什麼是跨域       當請求不同域名下的資源時,就會產生跨域請求問題。 2、跨域請求的產生的原因       瀏覽器的同源策略造成了跨域問題(同源策略嚴格限制不同域名下的文件、指令碼之間的互動)

ECSHOP中transport.js和jquery的沖突的簡單解決辦法

order adding fun ring func 資源 代碼 spa pac ECSHOP中transport.js和jquery的沖突的簡單解決辦法 一流資源網近日在ECSHOP網站加入了幾個JS特效代碼，在谷歌、火狐下正常，在各版本IE下都不常，左思不得其解。

關於IE和Firefox兼容性問題及解決辦法

解決辦法 select 警告 性問題 strong 多個 obj style 高度 1、//window.eventIE:有window.event對象FF:沒有window.event對象。可以通過給函數的參數傳遞event對象。如onmousemove=doMouseM

Windows下python2和python3共存時pip失效的解決辦法

python ins win style color python3安裝 解決 pan python3 同時有python2和python3的時候,使用pip install命令系統不能檢測出對應的python,所有不能再用pip install安裝包.改用以下命令: 為p

win7加域報1058錯誤的解決辦法

win7 1058錯誤 win7 系統無法加入域，提示1058錯誤，netlogon服務一直無法啟動。 解決辦法： 開始－－－運行－－－gpedit.msc-----計算機配置－－－Windows設置－－－安全設置－－－本地策略－－－安全選項－－－在右邊找到“網絡訪問：本地賬戶的共享和安全模式”－－－

ScrollView（Listview）和Viewpager（banner）的衝突解決辦法

原文地址：https://blog.csdn.net/qq_36255612/article/details/77987947 其實就是在onInterceptTouchEvent中做處理即可： 也可以直接使用下面的自定義： public class MyScrollView exte

複製中釋出伺服器和訂閱伺服器內容不一致的解決辦法 （轉載）

在事務複製的過程中，有時候會由於各種各樣的原因導致釋出伺服器和訂閱伺服器的資料不一致，造成這種情況往往是由於以下幾種原因之一： 某個Agent執行出現錯誤或者Agent程序崩潰 比較大型的釋出是使用了備份還原，而不是快照複製初始化，而備份後釋出端修改了資料 非Distribution Agen

vi編輯器方向鍵和backspace鍵顯示不正常的解決辦法和ubuntu的root密碼

網上看了很多方法，最簡單粗暴的莫過於改vim的配置檔案。方法如下： 首先改配置檔案要先切換到root賬戶，而今天使用ubuntu時想起來自己並沒有建立root賬號，更不用說密碼了。 然後我們只需要輸入 sudo passwd root 然後按提示輸入賬戶密碼，設定ro

linux ubuntu 16.04和18.04 忘記登入密碼的解決辦法

今天開啟虛擬機器，需要使用者密碼，好久不用，突然給忘記了，這就特別的尷尬了。不過我們可以重新修改我們的密碼來解決這個問題。 1：開機按Shift鍵，出現如下介面。（手速要快，Shift鍵要按時間久一點） 選擇第二項 2：按回車鍵進入如下介面，然後選中有recovery

SpannableString同時設定ClickableSpan和ForegroundColorSpan時ForegroundColorSpan不生效的解決辦法

SpannableString同時設定了ClickableSpan和ForegroundColorSpan後，發現ForegroundColorSpan不生效。 原因：ClickableSpan將Fo