在 React 應用程式中顯示 iframe

在 React 中顯示 iframe 時，若來源網址和尺寸是獨立資料，建議使用明確設定屬性的 <iframe> 元素。只有在輸入本身已是必須以標記形式插入的 HTML 字串時，才使用 dangerouslySetInnerHTML。

使用 React 元件從結構化資料建立 iframe

如果 iframe 的來源、標題和尺寸是分開的值，請將它們作為 props 傳入函式元件。這樣元件中的 iframe 屬性一目了然，也不必剖析 HTML 字串。常見的元件寫法如下：function IframeEmbed({ src, title, width = 640, height = 360 }) { return <iframe src={src} title={title} width={width} height={height} />; }；接著可用 <IframeEmbed src="https://example.com/embed" title="Example content" /> 這類值來呈現元件。

以下是這些值所對應的瀏覽器標記：

<iframe src="https://example.com/embed" title="Example content" width="640" height="360"></iframe>

在 React 元件中，直接傳入如上所示的值。請為 iframe 設定有意義的 title，讓使用輔助技術的使用者能辨識其內容。如果伺服器傳回的是字串，而非分開的欄位，只有在確實需要這種格式時才使用下方的 HTML 字串做法；若能要求伺服器提供結構化資料，就不必為了取回這些值而剖析標記。

這個 JavaScript 範例展示結構化資料的形狀，並印出標題和尺寸。若要將相同的值傳給元件，可呈現 <IframeEmbed {...iframe} />；展開運算子會將 src、title、width 和 height 作為 props 傳入：

const iframe = {
  src: "https://example.com/embed",
  title: "Example content",
  width: 640,
  height: 360
};

console.log(`${iframe.title}: ${iframe.width}×${iframe.height}`);

使用 dangerouslySetInnerHTML 從 HTML 字串嵌入 iframe

有些 API 會以字串傳回完整的 iframe 標籤。React 可以透過 dangerouslySetInnerHTML prop 插入這段標記；它的值是一個包含 __html 索引鍵的物件。例如，設定 const iframeSource = '<iframe src="https://example.com/embed" title="Example content" width="640" height="360"></iframe>';，再呈現 <div dangerouslySetInnerHTML={{ __html: iframeSource }} />。

這種寫法需要的是 HTML 標記，不是由 iframe 屬性組成的物件。請將字串視為受信任的 HTML：透過 dangerouslySetInnerHTML 呈現攻擊者控制的內容，可能導致跨網站指令碼攻擊（XSS）。請在適當的信任邊界驗證或清理資料，再進行呈現。對於新的整合，如果可行，請向伺服器要求結構化的 iframe 資料，並使用一般的 <iframe> 元素。

了解 iframe 的安全性與載入取捨

iframe 在 React 應用程式中並非天生不安全。瀏覽器的同源政策會限制跨來源的嵌入頁面讀取或變更父頁面的文件，不過兩個頁面仍可透過 postMessage 等機制通訊。除非受到限制，同來源的嵌入頁面可能會與父頁面互動。來源頁面仍然很重要：請選擇可信任的目的地，並在限制條件適合嵌入內容時使用 iframe 的 sandbox 屬性。沙箱會套用一些限制，例如限制指令碼或導覽；只加入內容所需的 sandbox 權限 token，因為某些組合可能會削弱隔離效果。

嵌入頁面可能需要時間和資源才能載入，進而影響整體頁面體驗。實際影響取決於嵌入網站、裝置，以及 iframe 的載入方式；效能不一定會受影響。在符合使用情境且瀏覽器支援的情況下，loading="lazy" 屬性可以延後載入畫面外的 iframe。請設定合適的尺寸以減少版面位移，並依照應用程式的安全政策測試嵌入頁面的行為。