HTMLのiframeタグの使い方とは？主な5つの属性やセキュリティ上の注意点を解説

「iframeタグの基本的な使い方を知りたい」
「具体的な活用例や設置方法を知りたい」

iframeタグを活用したいと考えている方は、上記のような悩みを抱えている場合も多いのではないでしょうか。

そこで、本記事ではHTMLのiframeタグの基本的な使い方・記述方法、主な5つの属性、活用できる4つの場面を解説します。セキュリティリスクと対処法もご紹介しますので、最後までご覧ください。

また、フォームをノーコードで簡単に埋め込むなら、フォーム作成ツール「formrun」がおすすめです。formrunを使用するメリットは主に下記の7つです。

• プログラミング不要でデザイン性の高いフォームを作成できる
• 条件分岐機能で回答に合わせて設問を出しわけ可能
• 入力補助機能がついているので、回答しやすいフォームがクリックだけで作れる
• マウス操作でデザイン設定可能
• お問い合わせ管理、メール対応も可能
• iframe埋め込みが簡単にできる
• 有料プランも無料でトライアル可能、→その後自動で請求始まることはなく安心

以上の機能が完備されており、基本料金は無料です。
ビジネス用フォーム作成ツール「formrun」では、複数人でデザイン性の高いフォームを管理できます。

HTMLのiframeタグは、Webページ内に別のWebページや外部コンテンツを埋め込むためのタグです。

iframeタグは、src属性で埋め込みたいページやコンテンツのURLを指定し、widthやheight属性で表示する領域のサイズを設定します。これにより、ユーザーがページを離れることなく、外部の情報や動画などをページ内で直接閲覧できるようになります。

たとえば、YouTube動画を埋め込む場合は以下のように記述しましょう。

<iframe src="https://www.youtube.com/embed/動画ID" width="560" height="315"></iframe>

よく使うiframeタグの属性は下記の通りです。

• src
• width / height
• title
• name
• sandbox

それぞれの属性を詳しく解説します。

iframeタグのsrc属性は、フレーム内に表示したい外部ページや別ファイルのURLを指定するための基本的な属性です。

src属性に指定したURLのWebページやコンテンツがiframeの中に読み込まれて表示されます。これにより、ユーザーは現在のページから移動せずに、別のページや外部サービスの情報・動画・地図などを閲覧可能です。

たとえば、絶対URLで指定する場合は下記のように記述しましょう。

<iframe src="https://example.com/sample.html"\>\</iframe>

iframeタグのwidth属性とheight属性は、埋め込みフレームの横幅と縦幅を指定するための属性です。ピクセル数やパーセントで設定できます。

width属性とheight属性を使えば、iframe内に表示されるコンテンツの表示領域を自由に調整可能です。ピクセルで指定すれば固定サイズ、パーセントで指定すれば親要素に対する割合でサイズを設定できます。

幅500ピクセル、高さ300ピクセルで外部ページを表示する場合は、下記のように記述します。

<iframe src="外部ページのURL" width="500" height="300"></iframe>

iframeタグのtitle属性は、iframe内で表示されるコンテンツの内容や役割を簡潔かつ明確に説明するための属性です。

title属性を設定すれば、スクリーンリーダーなどの支援技術を利用するユーザーが、iframeにどのような情報が埋め込まれているかを把握しやすくなります。これにより、複数のiframeがあるページでもユーザーが迷わず内容を理解でき、Webアクセシビリティの向上につながります。

Googleマップを埋め込む場合は、下記のように記述しましょう。

<iframe src="https://www.google.com/maps/..." title="東京駅のGoogle Map"></iframe>

iframeタグのname属性は、iframeに固有の名前を付けるための属性であり、主にリンクやフォームのターゲット先として、iframeを指定する場合などに利用可能です。

name属性を設定すると、a要素やform要素のtarget属性で、そのiframeをターゲットとして指定できるようになります。また、JavaScriptからもname属性でiframeを参照できるため、動的な操作にも役立ちます。

リンクのターゲットとしてiframeを指定する場合は、下記のように記述しましょう。

<ul>
<li><a href="page1.html" target="myFrame">Page1</a></li>
<li><a href="page2.html" target="myFrame">Page2</a></li>
</ul>
<iframe src="page1.html" name="myFrame" width="500" height="300"></iframe>

iframeタグのsandbox属性は、埋め込んだコンテンツの動作を制限し、セキュリティを強化するための属性です。

sandbox属性を指定すると、iframe内で実行されるスクリプトやフォーム送信・ポップアップ表示などがデフォルトで無効化されます。これにより、外部コンテンツによる予期しない動作や攻撃から親ページを守れます。

すべての機能を制限する場合は、下記のように記述しましょう。

<iframe src="sample.html" sandbox></iframe>

iframeタグが活用できる主な場面は下記の通りです。

• 動画の埋め込み
• 地図の埋め込み
• SNS投稿やタイムラインの表示
• 外部フォームやウィジェットの設置

それぞれの場面を詳しく見ていきましょう。

iframeタグは、YouTubeなどの外部動画サービスの動画を自分のWebページに埋め込む際に活用できます。

iframeタグは、動画サービスが提供する埋め込み用URLをコピーしてHTMLに貼り付けるだけで利用可能です。そのため、HTMLの知識が浅い初心者でも手軽に動画を掲載できます。

また、動画の実体は外部サービス側で管理されるため、自社サーバーにも負担がかかりません。さらに、動画の内容を変更したい場合も元の動画サービス側で差し替えるだけで、Webページの修正は不要です。

iframeタグは、Googleマップなどの地図サービスを自分のWebページに簡単に埋め込む際に活用できます。

iframeタグを使えば、地図サービスが提供する埋め込み用コードをHTMLに貼り付けるだけで、店舗や施設の所在地を視覚的に分かりやすく案内できます。APIキーや複雑な設定が不要で、無料・無登録で利用できる点もメリットです。

また、レスポンシブ対応のCSSを組み合わせれば、スマートフォンやタブレットなどさまざまなデバイスでも見やすい地図表示が可能です。

iframeタグは、FacebookやX（旧Twitter）、Instagramなど主要なSNSの投稿やタイムラインをWebページに簡単に表示する際に活用できます。

SNS各社が公式に埋め込み用のiframeコードを発行しており、これをHTMLに貼り付けるだけで、最新の投稿やタイムラインを自動で表示可能です。そのため、サイト運営者は手間なく最新情報を発信できます。

また、外部SNSのデザインや機能をそのまま活用できるため、ユーザーはSNSアカウントを訪れずともWebサイト上でダイレクトに情報を確認できます。

frameタグは、Googleフォームや外部アンケート、チャットボットなどの外部フォームやウェジェットを自分のWebページに簡単に設置する際に活用できます。

iframeタグを使えば、外部サービスで作成したフォームやウェジェットの埋め込み用URLをHTMLに貼り付けるだけで設置が完了します。これにより、自社でフォームやウィジェットの開発・保守を行う必要がありません。

また、外部サービス側で内容や仕様を変更した場合も、iframeのURLが変わらなければ自動的に最新状態が反映されるため、運用負担も軽減されます。

iframeタグのセキュリティリスクに対する対処法は下記の通りです。

• sandbox属性を活用する
• クリックジャッキング対策をする
• HTTPSを徹底する
• 信頼できる外部コンテンツのみ埋め込む

それぞれの対処法を詳しく見ていきましょう。

iframeは外部サイトのページやコンテンツを自サイトに埋め込むため、悪意のあるスクリプトや不正な操作が親ページに影響を及ぼすリスクがあります。

sandbox属性を利用すると、iframe内のJavaScript実行やフォーム送信、ポップアップ表示などを細かく制御でき、意図しない挙動や攻撃を防ぐことが可能です。

たとえば、sandbox属性を値なしで指定すると、iframe内のスクリプト実行やフォーム送信、ポップアップなどがすべて禁止されます。これにより、外部コンテンツによる被害リスクを下げられます。

クリックジャッキングは、iframeタグを悪用し、ユーザーが意図しないボタンやリンクをクリックさせて、商品購入や送金などの被害を発生させる攻撃です。

iframeによるページの埋め込み自体をHTTPレスポンスヘッダで制限すれば、攻撃の根本原因を遮断可能です。

具体的には、Webサーバーやアプリケーションのレスポンスヘッダに「X-Frame-Options: DENY」または「X-Frame-Options: SAMEORIGIN」を設定します。これにより、すべてのiframeによる埋め込み、または同一オリジン以外からのiframe埋め込みを禁止できます。

iframeでHTTPのまま外部サイトを埋め込むと、通信内容が暗号化されず、第三者による盗聴や改ざんの可能性が高まります。とくに、iframe内で個人情報や認証情報がやり取りされる場合、悪意ある攻撃者に情報を抜き取られるリスクがあるため注意が必要です。

HTTPSを徹底すれば、通信経路の安全性が確保され、iframeを悪用した攻撃による被害も防ぎやすくなります。さらに、WebサーバーやCDNの設定でHTTP通信をHTTPSにリダイレクトすれば、意図しない非暗号化通信を防げます。

iframeで外部サイトを埋め込む場合、埋め込んだ先のコンテンツに悪意のあるスクリプトやプログラムが含まれていると、クロスサイトスクリプティングなどの攻撃を受けるリスクが高まります。

信頼性の低いサイトを埋め込むと、ユーザーの個人情報が盗まれたり、意図しない操作をさせられるなど、深刻な被害につながる可能性もあるため注意が必要です。

たとえば、YouTubeやGoogleマップなど広く利用されている信頼性の高いサービスのコンテンツのみをiframeで埋め込むことが推奨されます。

iframeタグに関するよくある質問を整理しました。詳しく知りたい方はこちらもご覧ください。

iframeで外部サイトやコンテンツを埋め込む場合、埋め込まれる側のWebサイトが「X-Frame-Options」や「Content-Security-Policy」などのHTTPヘッダーで、iframe内での表示を禁止している場合が多いです。これにより、何も表示されなくなります。

また、HTMLの文法エラーや非推奨属性の使用が原因で表示されない場合もあります。さらに、クロスドメイン制約やブラウザのセキュリティ設定によるブロックも影響するため注意が必要です。

複数のiframeタグは同じページに設置可能です。

iframeはHTMLの要素の一つであり、1ページ内に何個でも配置可能です。各iframeに異なる外部ページやコンテンツを埋め込めるため、複数の動画や地図などを一つのページにまとめて表示する用途に適しています。

また、レスポンシブデザイン対応やスマートフォン・パソコンで高さを調整したい場合でも、class名を分けて複数のiframeに個別設定できます。

フォームをノーコードで簡単に埋め込むなら、フォーム作成ツール「formrun」がおすすめです。formrunには主に下記の3つの特徴があります。

• フォーム共有や埋め込みが簡単
• フォーム作成が簡単にできる
• 万全のセキュリティ

それぞれの特徴を詳しく解説します。

formrun（フォームラン）で作成したフォームは簡単に共有・サイトへ埋め込みできます。

フォームランではフォームを作成したあと自動でフォームのQRコードやURLを生成できますしてくれます。発行されたURLの一部はお好きな文字列に書き換えることも可能です。

また、サイト内に設置も可能なのでコーポレートサイトのお問い合わせページや、ファーストビューにリード獲得用フォームなどを埋め込んでご利用いただけます。

設置方法も簡単で、フォーム作成後に発行できるHTML要素（スクリプト）をサイトにコピー＆ペーストで貼り付けるだけで埋め込みができます。

非エンジニアでもマウスだけの簡単な操作が中心でフォームが作成できるため、フォーム利用までに準備期間が短い場合にも役立ちます。

同じフォーム作成ツールのGoogleフォームと比べてもセキュリティ条件が高く、細かい設定まで機能が豊富となっているため、ビジネス利用目的では、formrunのユーザーのうち7割がGoogleフォームから変更しています。

メールアドレスがあれば無料登録可能！無期限で無料プランが利用できるのでformrunでぜひフォームを作成してみてください。

テンプレートはこちらをご覧ください。
>> テンプレート一覧

セキュリティが高いのもformrun(フォームラン)の魅力のポイントです。「ISO 27001 (ISMS)」の認証取得やプライバシーマークの付与認定、SSL/ TLSによる暗号化通信、24時間365日のサーバー監視体制などさまざまな対策がとられています。

フォームは、名前や住所、メールアドレスなど重要な個人情報を取り扱います。ユーザーに安心してフォームを利用してもらうためにも、フォームのセキュリティはとても重要です。

安全なフォーム運用や個人情報の取り扱いは、顧客からの信用に大きく影響するため、セキュリティを重視している方にはformrunの利用がおすすめです。

HTMLのiframeタグは、Webページ内に別のWebページや動画、地図などの外部コンテンツを埋め込むための要素です。iframeを使う際は、まずsrc属性に表示したいコンテンツのURLを指定します。

たとえば、<iframe src="https://example.com"\>\</iframe>のように記述すると、そのURLがページ内に表示されます。幅や高さはwidth属性とheight属性で指定可能です。

iframeタグを正しく使ってWebページを充実させましょう。

しかし、フォームをノーコードで簡単に埋め込みたい場合には、現在使用しているフォーム作成ツールの機能が不十分に感じられることもあるでしょう。その場合、formrunを使えば下記の7つのメリットがあります。

• プログラミング不要でデザイン性の高いフォームを作成できる
• 条件分岐機能で回答に合わせて設問を出しわけ可能
• 入力補助機能がついているので、回答しやすいフォームがクリックだけで作れる
• マウス操作でデザイン設定可能
• お問い合わせ管理、メール対応も可能
• iframe埋め込みが簡単にできる
• 有料プランも無料でトライアル可能で、その後自動で請求始まることはなく安心

無料での利用も可能なため、ぜひ一度、試してみてはいかがでしょうか。
Sansan、BASE、hey、DMMなど幅広い規模の企業に導入されており、自社に最適なフォームを作ることが可能です。