利用代理頁面解決html iframe跨域通路網站問題

利用代理頁面解決html iframe跨域通路網站問題

【問題描述】

在鄒縣的數字鄒電項目中由于許多頁面都是連接配接到其他項目的頁面。由菜單連接配接到其他域頁面，再在其他域頁面上調用本項目的js用iframe顯示其他域的頁面，這樣就會涉及到安全性問題即跨域問題。報錯資訊如下

浏覽器控制台跨域報錯資訊：Unsafe JavaScript attempt to access frame with URLxxx from frame with URL xxx Domains, protocols and ports must match.

【分析思路】

要想解決問題就必須得還原問題本身，那就是重制問題。對于這個問題我就單獨寫了兩個項目來進行模拟測試，并使用iframe來嵌套調用兩個項目的頁面，把這兩個項目分别放在兩個不同端口的tomcat下。由于端口不同是以浏覽器就會抛出安全異常即跨域問題。

    成功的重制問題後，接下來就是根據錯誤資訊在網上搜尋答案。根據網上給的答案大多數都是設定頁面document.domain為同一域，這個方法倒是能解決，但是需要所有頁面都這樣設定，但在實際項目中往往會有很多頁面而無法每個頁面都設定，逐放棄之。後來幾經琢磨想到了利用代理頁面，就好像通路本項目頁面一樣，再結合之前弄列印頁面采用自動建立iframe來加載别的頁面(即中間頁面/代理頁面)，結果通過這種方式還真有效。

【具體解決方法】

把site1和site2項目分别放在不同端口的tomcat下運作，通路site1的index.html頁面，這是入口頁面。在site1的index.html頁面中用iframe通路顯示site2的index.html頁面，再通過操作site2的index.html頁面調用site1的index.html頁面中的方法excute，要調用此方法就要利用到中間代理頁面site1中的iframe.html，這個是一個關鍵頁面，因為所有需要跨域的通路都要通過這個頁面來調用site1項目中的代碼。這樣就形成了自己調用自己的代碼也就不會出現跨域了。在這個執行過程中site2的index.html頁面中的crossFrame方法起到了關鍵作用，就是通過它來調用代理頁面的。

項目結構圖：

Site1/index.html

Site2/index.html

Site1/iframe.html

通路site1/index.html

運作截圖：

本文檔附帶項目檔案，如項目意外丢失請在這個位址進行下載下傳：http://www.zuidaima.com/share/1854884509142016.htm

【參考資料】

什麼是跨域？

我們經常會在頁面上使用ajax請求通路其他伺服器的資料,此時,用戶端會出現跨域問題.

跨域問題是由于javascript語言安全限制中的同源政策造成的.

簡單來說,同源政策是指一段腳本隻能讀取來自同一來源的視窗和文檔的屬性,這裡的同一來源指的是主機名、協定和端口号的組合.

例如:

URL	說明	是否允許通信
http://www.a.com/a.js  http://www.a.com/b.js	同一域名下	允許
http://www.a.com/lab/a.js  http://www.a.com/script/b.js	同一域名下不同檔案夾	允許
http://www.a.com:8000/a.js  http://www.a.com/b.js	同一域名，不同端口	不允許
http://www.a.com/a.js  https://www.a.com/b.js	同一域名，不同協定	不允許
http://www.a.com/a.js  http://70.32.92.74/b.js	域名和域名對應ip	不允許
http://www.a.com/a.js  http://script.a.com/b.js	主域相同，子域不同	不允許
http://www.a.com/a.js  http://a.com/b.js	同一域名，不同二級域名（同上）	不允許（cookie這種情況下也不允許通路）
http://www.zuidaima.com/a.js  http://www.a.com/b.js	不同域名	不允許