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 タグがあります。

__html キーと HTML 文字列を使用してオブジェクトに設定された dangerouslySetInnerHTML 属性を持つ div 要素を 1つだけ返します。

サンプルコードは codesandbox でテストできます。

React で Iframe のカスタムコンポーネントを作成する

ソースの構造によっては、dangerouslySetInnerHTML を使用しないカスタムコンポーネントを作成する方がよい場合があります。source、width、height などの iframe プロパティが利用可能な場合は、それらをプロップとして渡し、dangerouslySetInnerHTML の使用を完全に回避できます。

例を見てみましょう：

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

これははるかに簡単なソリューションです。プロップとして渡すために必要な値がある限り、アプリケーションのどこでもこのコンポーネントを使用できます。

場合によっては、文字列を解析して、iframe タグの高さ、幅、ソースなどの値を抽出する必要があります。以下で説明する安全上の理由から、dangerouslySetInnerHTML 属性の使用は避けることをお勧めします。

React アプリケーションに iframe を配置することの効果

一般に、React アプリケーションに iframe を配置することは危険な行為と見なされます。問題は、ソースページを制御しておらず、何でも表示される可能性があることです。

iframe のページは読み込みに時間がかかりすぎる可能性があり、ページ全体のパフォーマンスにも影響を与える可能性があります。

それに加えて、dangerouslySetInnerHTML 属性は訪問者を XSS 攻撃にさらします。セキュリティと潜在的なリークのリスクも他にもあります。

経験則として、React アプリケーションに iframe タグを含める必要がある場合は、悪意のあることを試みないようにソースページを信頼していることを確認してください。