Skip to main content

HTML5の新しい 'IFRAME'要素を理解する

HTML5入門 レッスン15 Divタグ (六月 2026)

HTML5入門 レッスン15 Divタグ (六月 2026)
Anonim

要素によって、他のWebページをWebページに直接埋め込むことができます。しかし、iframeを使用する場合、HTML 4.01では対応していないいくつかのセキュリティおよび設計上の問題があります。 HTML5では、これらの問題に対処するために、この要素に3つの新しい属性が追加されています。

サンドボックス属性

サンドボックス の属性 IFRAME 要素はiframeの非常に有用なセキュリティ機能です。あなたがそれを IFRAME 要素を使用する場合、サイトエージェントとそのユーザーにセキュリティリスクを引き起こす可能性のある機能を禁止するようにユーザーエージェントに指示しています。

例えば:

sandbox = "" >

セキュリティリスクの可能性があるすべての機能をブラウザに許可しないようブラウザに指示します。具体的には、プラグインは使用できません。フォームは提出できません。 Sスクリプトは実行されず、 IFRAME 許可されていません。最後に、同じドメイン(起点)上のCookie、ローカルストレージ、その他のページへのアクセスは許可されません。

次に、 サンドボックス いくつかの機能を再度有効にすることができます。これらのキーワードは次のとおりです。

  • 許可フォームフォーム提出可
  • 同じ原点を許す - 同じ原点ドメインからのクッキーのようなコンテンツにアクセスするスクリプト
  • 許可スクリプト - このスクリプトを実行するには IFRAME
  • 許可トップナビゲーション〜できます IFRAME リンクとスクリプトを _上 ターゲット

両方を設定することはお勧めできません。 許可スクリプト そして 同じ原点を許す 同じキーワードをまとめて IFRAME。これを行うと、埋め込みページは サンドボックス セキュリティ上の利点を否定します。

srcdoc属性

srcdoc 属性は、Webデザイナーに、より安全なだけでなく、iframeをより詳細に制御できるようにする属性です。 Webデザイナーは、別のURLのWebページにリンクする代わりに、表示するHTMLを IFRAME 内部 srcdoc 属性。

最初は、「これはページ内にHTMLを置くこととはどのように違うのですか?」と思っているかもしれません。そして、いくつかの点では、それほど違うわけではありません。しかし、あなたは、その機能の1つを心に留めなければなりません。 IFRAME これは、信頼できないデータをサイトの他の部分と分離しておくことです。

フォームなどの信頼できないソースによって作成されたHTMLを IFRAME 信頼できないコンテンツを「サンドボックス」して、ページに表示することができます。ブログコメントは一例です。ほとんどのブログには、コメントでコメントに使用できるHTMLタグの数が限られています。しかし、これらのコメントをサンドボックスに入れて IFRAME を使用して srcdoc コメントはより強固になり、サイト全体を保護することができます。

セキュリティとiframe

上記の2つの属性は、 IFRAME しかし、それらはすべての悪質なサイトに対して証明するものではありません。悪意のあるサイトが(ブラウザにURLを入力するなどして)悪意のあるコンテンツに直接アクセスするようにユーザーに納得させることができれば、攻撃を受ける可能性があります。

可能であれば、サンドボックスに入っているコンテンツを設定することをお勧めします IFRAME として text / html-sandboxed MIMEタイプ。

シームレスな属性

シームレス attributeはブール値の属性で、ブラウザに IFRAME あたかもそれが親文書の一部であったかのように。あなたが IFRAME シームレスに表示するには、この属性を要素に含めます。

シームレス >

しかし、 IFRAME シームレスは見た目だけではなく、ページがフレームとどのようにやりとりするかということです。例えば:

  • のリンク IFRAME 親ウィンドウで開きます。 IFRAME ページには目標があります _自己 セット。
  • CSSは IFRAME ドキュメント全体のカスケードに追加されます。
  • のルート要素 IFRAME ページはそのページの子とみなされます IFRAME.
  • の幅と高さ IFRAME 他のブロックレベル要素の設定方法と同様に設定されます。
  • 親文書をスクリーンリーダーのような音声レンダリングツールで見ると、 IFRAME それを別個の文書として発表することなく読むことができる。
  • 親文書のスクリプトはすべて、 IFRAME 同じ方法で文書を作成します。たとえば、スクリプトがページのすべてのフレームを一覧表示した場合、 IFRAME 同様にリストされるだろう。

言い換えれば、 シームレス 属性は、境界線を境界線から削除するだけではありません。 IFRAME。設定する場合は、 IFRAME シームレスにするためには、悪意のあるサイトを埋め込むことによってWebサイトにセキュリティ上のリスクを加えないように、内容を十分に理解しておく必要があります。