IFRAMEのコンテンツ、セキュリティ、およびデザイン属性
要素によって、他のWebページをWebページに直接埋め込むことができます。 しかし、 iframeを使用する場合、HTML 4.01では対応していないいくつかのセキュリティおよび設計上の問題があります。 HTML5では、これらの問題に対処するために、この要素に3つの新しい属性が追加されています。
サンドボックス属性
IFRAME要素のサンドボックス属性は、iframeの非常に有用なセキュリティ機能です。 IFRAME要素に配置するときは、サイトとそのユーザーにセキュリティリスクを引き起こす可能性のある機能を禁止するようにユーザーエージェントに指示しています。
例えば:
セキュリティリスクの可能性があるすべての機能をブラウザに許可しないようブラウザに指示します。 具体的には、プラグインは使用できません。 フォームは提出できません。 Sスクリプトは実行されず、IFRAME外のリンクは許可されません。 最後に、同じドメイン(起点)上のCookie、ローカルストレージ、その他のページへのアクセスは許可されません。
次に、サンドボックスのキーワード値を使用して、一部の機能を再度有効にすることができます。 これらのキーワードは次のとおりです。
- allow-forms -allowフォームの提出
- allow-same-origin -allowスクリプトは、同じオリジンドメインからのクッキーのようなコンテンツにアクセスする
- allow-scripts - このIFRAMEでスクリプトを実行する
- allow-top-navigation - IFRAMEリンクとスクリプトを_topターゲットに許可する
allow-scriptsとallow-same-originの両方のキーワードを同じIFRAMEにまとめて設定することはお勧めできません。 これを行うと、埋め込みページはサンドボックス属性を完全に削除し、セキュリティ上のメリットを無効にすることができます。
srcdoc属性
srcdoc属性は、Webデザイナーに、より安全なiframeとより多くのコントロールを与える属性です。 別のURLのWebページにリンクするのではなく、Webデザイナーは、IFRAMEに表示するHTMLをsrcdoc属性内に配置します。
最初は、「これはページ内にHTMLを置くこととはどのように違うのですか?」と思っているかもしれません。そして、いくつかの点では、それほど違うわけではありません。
しかし、あなたは、信頼できないデータをサイトの他の部分と区別しないようにするために、IFRAME要素の機能の1つを覚えておく必要があります。
フォームなどの信頼できないソースによって作成されたHTMLをIFRAMEに配置すると、信頼できないコンテンツを「サンドボックス」してページに表示することができます。 ブログコメントは一例です。 ほとんどのブログには、コメントでコメントに使用できるHTMLタグの数が限られています。 しかし、srcdoc属性を使用してこれらのコメントをサンドボックス化されたIFRAMEに配置することで、コメントはより強固になり、サイト全体を保護することができます。
セキュリティとiframe
上記の2つの属性は、IFRAME要素のセキュリティを提供しますが、すべての悪意のあるサイトに対する証明ではありません。 悪意のあるサイトが(ブラウザにURLを入力するなどして)悪意のあるコンテンツに直接アクセスするようにユーザーに納得させることができれば、攻撃を受ける可能性があります。
可能であれば、サンドボックス化されたIFRAMEにあるコンテンツをtext / html-sandboxed MIMEタイプとして設定するのが最善です。
シームレスな属性
継ぎ目のない属性は、親ドキュメントの一部であるかのようにIFRAMEを表示するようにブラウザに指示するブール値属性です。 IFRAMEをシームレスに表示するには、この属性を要素に含めます。
しかし、IFRAMEをシームレスにすることは、見た目だけでなく、ページがフレームとどのようにやり取りするかということです。 例えば:
- IFRAMEページにターゲット_SELFが設定されていない限り、IFRAME内のリンクが親ウィンドウで開きます 。
- IFRAME内のCSSがドキュメント全体のカスケードに追加されます。
- IFRAMEページのルート要素は、IFRAMEの子と見なされます。
- IFRAMEの幅と高さは、 他のブロックレベル要素の設定方法と同様に設定されます。
- 親文書がスクリーンリーダーのような音声レンダリングツールによって見られるとき、IFRAMEはそれを別個の文書として発表せずに読み取られる。
- 親文書のスクリプトは、同じ方法でIFRAME文書に影響します。 たとえば、スクリプトがページ上のすべてのフレームをリストした場合、IFRAME内のリンクも同様にリストされます。
言い換えれば、継ぎ目のない属性は、IFRAMEから枠線を削除するだけではありません。 IFRAMEをシームレスに設定する場合は、内容を十分に理解して、悪意のあるサイトを埋め込むことによってセキュリティリスクをWebサイトに追加しないようにする必要があります。