與iframe進行跨域互動的解決方案(推薦)

2023-03-15 06:01:19

前言

在Web開發中，為了避免安全漏洞，瀏覽器會實行同源策略（Same-Origin Policy），即只允許同源網頁之間進行互動，而跨域的互動是被禁止的。但是，有時我們需要在不同域名的頁面之間進行資料傳遞和互動。

使用 postMessage() 方法

通過 postMessage() 方法可以在兩個不同的視窗之間傳遞訊息，包括不同域名的 iframe。在父頁面中使用 postMessage() 方法傳送訊息，在子頁面中使用 addEventListener() 方法監聽訊息。需要注意的是，需要在兩個頁面中都新增相應的程式碼才能實現跨域互動。

在父頁面中：

// 傳送訊息到 iframe
var iframe = document.getElementById('my-iframe');
iframe.contentWindow.postMessage('Hello from parent', '*');
 
// 接收子頁面發來的訊息
window.addEventListener('message', function(event) {
  if (event.origin !== 'http://example.com') return; // 驗證訊息來源
  console.log('Received message from iframe:', event.data);
}, false);

在子頁面中：

// 傳送訊息到父頁面
window.parent.postMessage('Hello from iframe', '*');
 
// 接收父頁面發來的訊息
window.addEventListener('message', function(event) {
  if (event.origin !== 'http://example.com') return; // 驗證訊息來源
  console.log('Received message from parent:', event.data);
}, false);

使用location.hash

在父頁面中設定一個定時器，用於檢測目標頁面的URL雜湊值是否發生變化

setInterval(function() {
  if (document.getElementById("myIframe").contentWindow.location.hash) {
    // 子頁面URL雜湊值發生變化，執行相應的操作
  }
}, 100);

在子頁面中設定一個定時器，用於檢測父頁面URL雜湊值是否發生變化

setInterval(function() {
  if (window.location.hash) {
    // 父頁面URL雜湊值發生變化，執行相應的操作
  }
}, 100);

父頁面中通過改變iframe的src屬性來向目標頁面傳送訊息

document.getElementById("myIframe").src = "http://www.example.com/target-page#" + message;

子頁面中通過改變location.hash來向父頁面傳送訊息

window.location.hash = message;

使用location.hash和iframe進行跨域互動的方式存在一些限制和安全風險，例如URL雜湊值的長度限制、URL雜湊值被篡改等問題，因此需要謹慎使用，確保資料的安全性和完整性

document.domain屬性

子頁面中設定document.domain屬性，將其設定為父頁面的域名，以便子頁面和父頁面具有相同的域名，從而實現跨域互動。

document.domain = "example.com";

父頁面通過iframe元素的contentWindow屬性獲取子頁面的window物件，從而可以存取子頁面的內容和方法。

var iframe = document.getElementById("myFrame");
var childWindow = iframe.contentWindow;

子頁面可以通過window.parent屬性獲取父頁面的window物件，從而可以存取父頁面的內容和方法。

var parentWindow = window.parent;

注：設定domain屬性是關鍵！！！

使用window.name 屬性

可以利用 iframe 的 window.name 屬性來進行跨域互動。由於 window.name 屬性在同一視窗中是唯一的，因此可以將需要傳遞的資料儲存在該屬性中，在父頁面中讀取。

在父頁面中：

<iframe id="myIframe" src="http://www.b.com"></iframe>
<script>
window.addEventListener('message', function(e) {
  // 處理從子頁面傳送過來的訊息
  console.log(e.data);
});
 
function onLoad() {
  var iframe = document.getElementById('myIframe');
  var iframeWindow = iframe.contentWindow;
  // 獲取 iframe 的 window 物件
  iframeWindow.name = 'hello from A';
  // 在 iframe 的 window 物件中設定 name 屬性
}
</script>

在子頁面中：

// 傳送訊息給父頁面
window.top.postMessage(window.name, 'http://www.a.com');

在子頁面中，我們設定了 window.name 的值，並使用 window.top.postMessage 方法向父頁面傳送訊息。在父頁面中，我們通過監聽 window.message 事件來接收這個訊息。注意，postMessage 方法中的第二個引數必須是父頁面的域名，否則瀏覽器會拒絕傳送訊息。

需要注意的是，使用 window.name 屬性進行跨域互動可能存在一些安全風險，因此需要謹慎使用,window.name也有2M容量的限制

CORS

CORS（Cross-Origin Resource Sharing）是一種跨域資源共用的機制，它通過在伺服器端設定響應頭來實現跨域通訊。通過在響應頭中設定 Access-Control-Allow-Origin、Access-Control-Allow-Methods 等欄位，可以允許指定的源、方法等跨域存取資源。在使用者端中，可以像存取同域資源一樣存取跨域資源。

使用JSONP

JSONP 是一種通過動態新增 <script> 標籤來實現跨域通訊的方法。它的原理是在伺服器端返回一個函數呼叫，這個函數的引數是需要傳遞的資料。在使用者端中，通過動態建立 <script> 標籤並指定 src 屬性來呼叫這個函數，從而實現跨域通訊。需要注意的是，使用 JSONP 時需要信任提供資料的伺服器端，因為它會執行伺服器端返回的程式碼。

使用WebSocket

WebSocket 是一種雙向通訊協定，可以在使用者端和伺服器端之間建立一個持久化的連線。與 HTTP 不同，WebSocket 不會遵循同源策略，因此可以實現跨域通訊。在使用者端中，可以使用 WebSocket 物件與伺服器端建立連線，並通過 send() 方法傳送資料。在伺服器端中，可以監聽 WebSocket 連線，並在接收到使用者端的資料時進行處理。