在 React 應用程式中顯示 iframe

1. 在 React 中使用 dangerouslySetInnerHTML 屬性顯示 iframe
2. 在 React 中為 iframe 建立自定義元件
3. 在 React 應用程式中放置 iframe 的效果

每個現代應用程式都需要一個 HTML 結構。React 開發人員使用 JSX 輕鬆構建應用程式的標記。JSX 的語法看起來很像 HTML，因此即使你是 React 的新手，也很容易編寫。

在 React 中使用 dangerouslySetInnerHTML 屬性顯示 iframe

在某些情況下，你需要將 HTML 程式碼注入現有標記。在本文中，我們將討論在你的應用程式中插入 iframe 標籤的情況。

從伺服器獲取預結構化 HTML 程式碼作為響應的情況並不少見。大多數情況下，它被格式化為字串。

將 iframe 插入 React 應用程式中最困難的部分是解析字串值以獲取其屬性，例如源、寬度和高度。如果從伺服器接收到的資料具有更多的結構並指定 iframe 的寬度、高度和來源，這會更容易一些。例如，它可以是具有與這些值對應的屬性的物件。

將 iframe 插入 React 應用程式的最簡單方法是使用 dangerouslySetInnerHTML 屬性。該屬性的值應該是一個帶有 __html 鍵和字串 HTML 值的物件。

讓我們看一個例子：

export default function App(props) {
  const {
    iframeSource = '<iframe src="https://codesandbox.io/"></iframe>'
  } = props;
  return <div className="App" dangerouslySetInnerHTML={{__html: iframeSource}}></div>;
}

這是一個相當簡單的演示。我們有一個帶有預設值的 iframeSource 屬性，一個字串形狀的 iframe 標籤。

我們只返回一個帶有 dangerouslySetInnerHTML 屬性的 div 元素，該屬性設定為帶有 __html 鍵和 HTML 字串的物件。

你可以在 codesandbox 上測試示例程式碼。

在 React 中為 iframe 建立自定義元件

根據原始碼的結構，建立一個不使用 dangerouslySetInnerHTML 的自定義元件可能會更好。如果諸如 source、width 和 height 之類的 iframe 屬性可用，你可以將它們作為 props 傳遞並完全避免使用 dangerouslySetInnerHTML。

讓我們看一個例子：

export default function Component(props){
   const {source, height, width} = this.props
   return (
   	<div>          
      <iframe src={source} height={height} width={width}/>         
    </div>
   ) 
}   

這是一個更簡單的解決方案。你可以在應用程式的任何地方使用這個元件，只要你有必要的值作為 props 傳遞。

有時你必須解析字串以提取 iframe 標籤的高度、寬度和來源等值。出於安全原因，最好避免使用 dangerouslySetInnerHTML 屬性，如下所述。

在 React 應用程式中放置 iframe 的效果

一般來說，在你的 React 應用程式中放置 iframe 被認為是一種不安全的做法。問題是你無法控制源頁面，它可以顯示任何內容。

iframe 中的頁面可能需要很長時間才能載入，這也會影響整個頁面的效能。

除此之外，dangerouslySetInnerHTML 屬性會將你的訪問者暴露給 XSS 攻擊。還有其他安全風險和潛在洩漏。

根據經驗，如果你的 React 應用程式必須包含 iframe 標籤，請確保你信任源頁面不會嘗試任何惡意行為。