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

轉自:http://www.zuidaima.com/share/1854884509142016.htm


在做項目的時候遇到跨域問題,經過自己的一番摸索終於找到一種解決iframe跨域問題的方案,或許很多人也會遇到這樣頭疼的問題,希望能儘自己綿薄之力幫助大家。如果不清楚或者有問題的可以留言和私信我,謝謝。

【問題描述】

    在項目中由於許多頁面都是連接到其他項目的頁面。由菜單連接到其他域頁面,再在其他域頁面上調用本項目的js用iframe顯示其他域的頁面,這樣就會涉及到安全性問題即跨域問題。報錯信息如下

瀏覽器控制檯跨域報錯信息:Unsafe JavaScript attempt to access frame with URL xxx 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方法起到了關鍵作用,就是通過它來調用代理頁面的。

項目截圖

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

Site1/index.html

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

Site2/index.html

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

Site1/iframe.html

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

 

訪問site1/index.html

運行截圖:

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

參考資料:

什麼是跨域

我們經常會在頁面上使用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
不同域名 不允許

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章