2023-08-12 14:57:22 55 0

- N +

iframe嵌套頁面跨域問題 iframe嵌入第三方網(wǎng)站跨域

大家好,今天小編來為大家解答以下的問題，關(guān)于iframe嵌套頁面跨域問題，iframe嵌入第三方網(wǎng)站跨域這個很多人還不知道，現(xiàn)在讓我們一起來看看吧！

iframe的跨域解決方法

設(shè)備顯示iframe的跨域表現(xiàn)為系統(tǒng)閃退，原因和解決方法如下

原因有很多，可以參考下，

1、緩存垃圾太多。

2、內(nèi)存不足。

3、系統(tǒng)不兼容。

解決問題：

第一，刪除多余軟件，清理空間。

第二，清理緩存垃圾。

第三，卸載這個軟件，重新安裝。

第四，禁止不需要的開機啟動項，騰出運行空間。

啟動這個軟件，如果還不行，就卸載所有軟件包括輸入法，在啟動這個軟件。

用redis實現(xiàn)單點登錄是否可行

用redis實現(xiàn)單點登錄是可行的。首先，session的大部分實現(xiàn)都是通過cookie的，所以跨域session是不可能的。但跨域的認證還是可以有OAuth等實現(xiàn)方法，不太推薦OAuth項目。

其次，跨域有點難，但放在同一域下的不同項目是可以共享session的，CAS也不算復(fù)雜。可以上github搜一下redis-session這個項目，只有一個源代碼文件，它給出了redis下session的一種nodejs實現(xiàn)，就是設(shè)置redis的超時來模擬session的超時。

再次，跨域也是可以的，就是使用iframe，在登錄時，在多個域下同時寫cookie，注意瀏覽器差異。綜上，完全可行。

a網(wǎng)站被另一個b網(wǎng)站iframe，那么a網(wǎng)站能獲取那些訪問b網(wǎng)站用戶的ip嗎

能的，和正常訪問網(wǎng)站一樣。

如何實現(xiàn)跨域及其原理

一、什么是跨域？1.什么是同源策略及其限制內(nèi)容？

同源策略是一種約定，它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，瀏覽器很容易受到XSS、CSRF等攻擊。所謂同源是指"協(xié)議+域名+端口"三者相同，即便兩個不同的域名指向同一個ip地址，也非同源。同源策略限制內(nèi)容有：

Cookie、LocalStorage、IndexedDB等存儲性內(nèi)容DOM節(jié)點AJAX請求發(fā)送后，結(jié)果被瀏覽器攔截了

但是有三個標簽是允許跨域加載資源：

<imgsrc=XXX><linkhref=XXX><scriptsrc=XXX>2.常見跨域場景

當(dāng)協(xié)議、子域名、主域名、端口號中任意一個不相同時，都算作不同域。不同域之間相互請求資源，就算作“跨域”。

特別說明兩點：

第一：如果是協(xié)議和端口造成的跨域問題“前臺”是無能為力的。

第二：在跨域問題上，僅僅是通過“URL的首部”來識別而不會根據(jù)域名對應(yīng)的IP地址是否相同來判斷。“URL的首部”可以理解為“協(xié)議,域名和端口必須匹配”。

這里你或許有個疑問：請求跨域了，那么請求到底發(fā)出去沒有？

跨域并不是請求發(fā)不出去，請求能發(fā)出去，服務(wù)端能收到請求并正常返回結(jié)果，只是結(jié)果被瀏覽器攔截了。你可能會疑問明明通過表單的方式可以發(fā)起跨域請求，為什么Ajax就不會?因為歸根結(jié)底，跨域是為了阻止用戶讀取到另一個域名下的內(nèi)容，Ajax可以獲取響應(yīng)，瀏覽器認為這不安全，所以攔截了響應(yīng)。但是表單并不會獲取新的內(nèi)容，所以可以發(fā)起跨域請求。同時也說明了跨域并不能完全阻止CSRF，因為請求畢竟是發(fā)出去了。

二、跨域解決方案1.jsonp1)JSONP原理

利用<script>標簽沒有跨域限制的漏洞，網(wǎng)頁可以得到從其他來源動態(tài)產(chǎn)生的JSON數(shù)據(jù)。JSONP請求一定需要對方的服務(wù)器做支持才可以。

2)JSONP和AJAX對比

JSONP和AJAX相同，都是客戶端向服務(wù)器端發(fā)送請求，從服務(wù)器端獲取數(shù)據(jù)的方式。但AJAX屬于同源策略，JSONP屬于非同源策略（跨域請求）

3)JSONP優(yōu)缺點

JSONP優(yōu)點是簡單兼容性好，可用于解決主流瀏覽器的跨域數(shù)據(jù)訪問的問題。缺點是僅支持get方法具有局限性,不安全可能會遭受XSS攻擊。

4)JSONP的實現(xiàn)流程聲明一個回調(diào)函數(shù)，其函數(shù)名(如show)當(dāng)做參數(shù)值，要傳遞給跨域請求數(shù)據(jù)的服務(wù)器，函數(shù)形參為要獲取目標數(shù)據(jù)(服務(wù)器返回的data)。創(chuàng)建一個<script>標簽，把那個跨域的API數(shù)據(jù)接口地址，賦值給script的src,還要在這個地址中向服務(wù)器傳遞該函數(shù)名（可以通過問號傳參:?callback=show）。服務(wù)器接收到請求后，需要進行特殊的處理：把傳遞進來的函數(shù)名和它需要給你的數(shù)據(jù)拼接成一個字符串,例如：傳遞進去的函數(shù)名是show，它準備好的數(shù)據(jù)是show('我不愛你')。最后服務(wù)器把準備的數(shù)據(jù)通過HTTP協(xié)議返回給客戶端，客戶端再調(diào)用執(zhí)行之前聲明的回調(diào)函數(shù)（show），對返回的數(shù)據(jù)進行操作。

在開發(fā)中可能會遇到多個JSONP請求的回調(diào)函數(shù)名是相同的，這時候就需要自己封裝一個JSONP函數(shù)。

上面這段代碼相當(dāng)于向http://localhost:3000/say?wd=Iloveyou&callback=show這個地址請求數(shù)據(jù)，然后后臺返回show('我不愛你')，最后會運行show()這個函數(shù)，打印出'我不愛你'

5)jQuery的jsonp形式

JSONP都是GET和異步請求的，不存在其他的請求方式和同步請求，且jQuery默認就會給JSONP的請求清除緩存。

2.cors

CORS需要瀏覽器和后端同時支持。IE8和9需要通過XDomainRequest來實現(xiàn)。

瀏覽器會自動進行CORS通信，實現(xiàn)CORS通信的關(guān)鍵是后端。只要后端實現(xiàn)了CORS，就實現(xiàn)了跨域。

服務(wù)端設(shè)置Access-Control-Allow-Origin就可以開啟CORS。該屬性表示哪些域名可以訪問資源，如果設(shè)置通配符則表示所有網(wǎng)站都可以訪問資源。

雖然設(shè)置CORS和前端沒什么關(guān)系，但是通過這種方式解決跨域問題的話，會在發(fā)送請求時出現(xiàn)兩種情況，分別為簡單請求和復(fù)雜請求。

1)簡單請求

只要同時滿足以下兩大條件，就屬于簡單請求

條件1：使用下列方法之一：

GETHEADPOST

條件2：Content-Type的值僅限于下列三者之一：

text/plainmultipart/form-dataapplication/x-www-form-urlencoded

請求中的任意XMLHttpRequestUpload對象均沒有注冊任何事件監(jiān)聽器；XMLHttpRequestUpload對象可以使用XMLHttpRequest.upload屬性訪問。

2)復(fù)雜請求

不符合以上條件的請求就肯定是復(fù)雜請求了。復(fù)雜請求的CORS請求，會在正式通信之前，增加一次HTTP查詢請求，稱為"預(yù)檢"請求,該請求是option方法的，通過該請求來知道服務(wù)端是否允許跨域請求。

我們用PUT向后臺請求時，屬于復(fù)雜請求，后臺需做如下配置：

接下來我們看下一個完整復(fù)雜請求的例子，并且介紹下CORS請求相關(guān)的字段

上述代碼由http://localhost:3000/index.html向http://localhost:4000/跨域請求，正如我們上面所說的，后端是實現(xiàn)CORS通信的關(guān)鍵。

3.postMessage

postMessage是HTML5XMLHttpRequestLevel2中的API，且是為數(shù)不多可以跨域操作的window屬性之一，它可用于解決以下方面的問題：

頁面和其打開的新窗口的數(shù)據(jù)傳遞多窗口之間消息傳遞頁面與嵌套的iframe消息傳遞上面三個場景的跨域數(shù)據(jù)傳遞

postMessage()方法允許來自不同源的腳本采用異步方式進行有限的通信，可以實現(xiàn)跨文本檔、多窗口、跨域消息傳遞。

otherWindow.postMessage(message,targetOrigin,[transfer]);

message:將要發(fā)送到其他window的數(shù)據(jù)。targetOrigin:通過窗口的origin屬性來指定哪些窗口能接收到消息事件，其值可以是字符串"*"（表示無限制）或者一個URI。在發(fā)送消息的時候，如果目標窗口的協(xié)議、主機地址或端口這三者的任意一項不匹配targetOrigin提供的值，那么消息就不會被發(fā)送；只有三者完全匹配，消息才會被發(fā)送。transfer(可選)：是一串和message同時傳遞的Transferable對象.這些對象的所有權(quán)將被轉(zhuǎn)移給消息的接收方，而發(fā)送一方將不再保有所有權(quán)。

接下來我們看個例子：http://localhost:3000/a.html頁面向http://localhost:4000/b.html傳遞“我愛你”,然后后者傳回"我不愛你"。

4.websocket

Websocket是HTML5的一個持久化的協(xié)議，它實現(xiàn)了瀏覽器與服務(wù)器的全雙工通信，同時也是跨域的一種解決方案。WebSocket和HTTP都是應(yīng)用層協(xié)議，都基于TCP協(xié)議。但是WebSocket是一種雙向通信協(xié)議，在建立連接之后，WebSocket的server與client都能主動向?qū)Ψ桨l(fā)送或接收數(shù)據(jù)。同時，WebSocket在建立連接時需要借助HTTP協(xié)議，連接建立好了之后client與server之間的雙向通信就與HTTP無關(guān)了。

原生WebSocketAPI使用起來不太方便，我們使用Socket.io，它很好地封裝了webSocket接口，提供了更簡單、靈活的接口，也對不支持webSocket的瀏覽器提供了向下兼容。

我們先來看個例子：本地文件socket.html向localhost:3000發(fā)生數(shù)據(jù)和接受數(shù)據(jù)

5.Node中間件代理(兩次跨域)

實現(xiàn)原理：同源策略是瀏覽器需要遵循的標準，而如果是服務(wù)器向服務(wù)器請求就無需遵循同源策略。代理服務(wù)器，需要做以下幾個步驟：

接受客戶端請求。將請求轉(zhuǎn)發(fā)給服務(wù)器。拿到服務(wù)器響應(yīng)數(shù)據(jù)。將響應(yīng)轉(zhuǎn)發(fā)給客戶端。

我們先來看個例子：本地文件index.html文件，通過代理服務(wù)器http://localhost:3000向目標服務(wù)器http://localhost:4000請求數(shù)據(jù)。

上述代碼經(jīng)過兩次跨域，值得注意的是瀏覽器向代理服務(wù)器發(fā)送請求，也遵循同源策略，最后在index.html文件打印出{"title":"fontend","password":"123456"}

6.nginx反向代理

實現(xiàn)原理類似于Node中間件代理，需要你搭建一個中轉(zhuǎn)nginx服務(wù)器，用于轉(zhuǎn)發(fā)請求。

使用nginx反向代理實現(xiàn)跨域，是最簡單的跨域方式。只需要修改nginx的配置即可解決跨域問題，支持所有瀏覽器，支持session，不需要修改任何代碼，并且不會影響服務(wù)器性能。

實現(xiàn)思路：通過nginx配置一個代理服務(wù)器（域名與domain1相同，端口不同）做跳板機，反向代理訪問domain2接口，并且可以順便修改cookie中domain信息，方便當(dāng)前域cookie寫入，實現(xiàn)跨域登錄。

先下載nginx，然后將nginx目錄下的nginx.conf修改如下:

最后通過命令行nginx-sreload啟動nginx

7.window.name+iframe

window.name屬性的獨特之處：name值在不同的頁面（甚至不同域名）加載后依舊存在，并且可以支持非常長的name值（2MB）。

其中a.html和b.html是同域的，都是http://localhost:3000;而c.html是http://localhost:4000

b.html為中間代理頁，與a.html同域，內(nèi)容為空。

總結(jié)：通過iframe的src屬性由外域轉(zhuǎn)向本地域，跨域數(shù)據(jù)即由iframe的window.name從外域傳遞到本地域。這個就巧妙地繞過了瀏覽器的跨域訪問限制，但同時它又是安全操作。

8.location.hash+iframe

實現(xiàn)原理：a.html欲與c.html跨域相互通信，通過中間頁b.html來實現(xiàn)。三個頁面，不同域之間利用iframe的location.hash傳值，相同域之間直接js訪問來通信。

具體實現(xiàn)步驟：一開始a.html給c.html傳一個hash值，然后c.html收到hash值后，再把hash值傳遞給b.html，最后b.html將結(jié)果放到a.html的hash值中。同樣的，a.html和b.html是同域的，都是http://localhost:3000;而c.html是http://localhost:4000

9.document.domain+iframe

該方式只能用于二級域名相同的情況下，比如a.test.com和b.test.com適用于該方式。只需要給頁面添加document.domain='test.com'表示二級域名都相同就可以實現(xiàn)跨域。

實現(xiàn)原理：兩個頁面都通過js強制設(shè)置document.domain為基礎(chǔ)主域，就實現(xiàn)了同域。

我們看個例子：頁面a.zf1.cn:3000/a.html獲取頁面b.zf1.cn:3000/b.html中a的值

三、總結(jié)CORS支持所有類型的HTTP請求，是跨域HTTP請求的根本解決方案JSONP只支持GET請求，JSONP的優(yōu)勢在于支持老式瀏覽器，以及可以向不支持CORS的網(wǎng)站請求數(shù)據(jù)。不管是Node中間件代理還是nginx反向代理，主要是通過同源策略對服務(wù)器不加限制。日常工作中，用得比較多的跨域方案是cors和nginx反向代理