HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLのiframe要素にsandbox属性で追加のセキュリティ制限を有効にする方法

HTMLでは、<iframe>要素にsandbox属性を指定することで、埋め込まれたコンテンツに対して追加のセキュリティ制限を有効にできます。

sandbox属性が指定されると、ブラウザはiframe内のコンテンツを独自のオリジンから読み込まれたものとして扱い、スクリプトの実行、フォーム送信、プラグインの使用などがデフォルトでブロックされます。これにより、信頼できない外部コンテンツによるセキュリティリスクを大幅に軽減できます。

基本的な使い方

以下のコードは、sandbox属性を実装する例です。実際に動作を確認してみてください。

<!DOCTYPE html>
<html>
<body>
  <iframe src="new.htm" sandbox>
    <p>お使いのブラウザはiframeに対応していません。</p>
  </iframe>
</body>
</html>

制限を部分的に緩和する方法

sandbox属性に値を指定すると、特定の機能だけを選んで許可できます。主な値は以下のとおりです。

  • allow-scripts：JavaScriptの実行を許可します
  • allow-same-origin：元のオリジンとしての扱いを許可します
  • allow-forms：フォームの送信を許可します
  • allow-popups：ポップアップウィンドウの表示を許可します

記述例：<iframe src="new.htm" sandbox="allow-scripts">

このようにsandbox属性を活用することで、外部コンテンツを安全に埋め込みながら、必要な機能だけを柔軟に許可することが可能です。

  1. 【HTML入門】select要素のドロップダウンリストにデフォルト値（初期選択）を設定する方法

    HTMLでは、<select>要素を使うことで、フォーム内に簡単なドロップダウンリスト（セレクトボックス）を作成し、ユーザーに入力してもらうことができます。セレクトボックスは「プルダウンメニュー」とも呼ばれ、複数の選択肢を一覧形式で表示できる便利な部品です。さらに、このドロップダウンリストにはデフォルト値（初期状態で選択されている項目）を設定することも可能です。方法はとてもシンプルで、あらかじめ選択しておきたい項目の<option>タグに selected属性 を追加するだけです。selected属性の基本的な使い方以下のように、初期表示したい選択肢にselectedを

  2. HTMLで要素の幅を設定する方法【width属性の使い方を解説】

    HTMLでは、width属性を使用することで要素の幅を設定できます。この属性は、<canvas>、<embed>、<img>、<input>、<video> などの要素と組み合わせて利用可能です。 width属性の基本的な使い方 width属性には、ピクセル単位の数値を指定します。例えば「width=300」と記述すると、要素の幅は300ピクセルに設定されます。高さを指定したい場合は、height属性を併用します。 width属性が使える主な要素 <img> … 画像の表示幅を指定 <video> … 動