「HTMLのsandbox属性でGoogleマップやYouTubeをセキュリティ制限をかけて埋め込む方法」のご紹介| Webデザイン参考記事まとめアプデ

2023年12月19日(火)

HTMLのsandbox属性でGoogleマップやYouTubeをセキュリティ制限をかけて埋め込む方法

0

6

2

2

GoogleマップやYouTubeの埋め込みなど、外部サービスをiframeで読み込んでいる場合、脆弱性診断でそれらが引っ掛かることがあります。

各サービスからコピーできる埋め込みソースでは脆弱性の対策ができてないことが多く、セキュリティ対策としてsandbox属性を追記する必要があります。

脆弱性の対応として、GoogleマップとYouTubeの埋め込みでsandbox属性を付ける機会があったので、必要な属性値ふくめ備忘録として紹介してみます。

sandbox属性

sandbox属性は、iframeなどHTMLの埋め込み要素にセキュリティ制限をかけることができる属性です。

値を空の状態で指定すると、すべての制限を適用します。

値を空にしてsandbox属性を追加すると、様々なセキュリティの制限が掛かることになり、だいたいのサービスは正常に表示されなくなってしまうので、属性値を使って必要なものを許可する必要があります。

sandbox属性では必要な制限のみ許可することができるようになっていて、以下のような属性値を指定してコントロールします。
allow-forms フォームの送信を許可します。 allow-modals モーダルダイアログの表示を許可...

マークアップエンジニア矢次悟郎さんによる、jQueryをはじめとしたWebサイト制作に役立つで技術やサービスの情報発信ブログBlackFlagの記事『HTMLのsandbox属性でGoogleマップやYouTubeをセキュリティ制限をかけて埋め込む方法』についてまとめています。

この記事は特にjavascript・ダウンロード・HTML5・Google・youtube・動画・Webサービスについて書かれており、気になるWebデザインの記事やまとめを見つけたら「本文を読む」をクリックすると、記事配信元のBlackFlagで全文を閲覧することができます。RSS Sourceの「このサイトの記事一覧」をクリックするとBlackFlagの記事をまとめて表示することができます。また閲覧数や各SNSのシェア状況を目安に、他の人たちが記事をどのように評価しているのか推測することができます。Webデザインにとって有益な記事をまとめていますので、ぜひリンク先をチェックしてみてください。