web-dev-qa-db-ja.com

ウェブサイトがiframeに読み込まれないようにブロックする方法

最近、YouTubeのWebサイトをiframeにロードしようとしましたが、機能していないことを確認しました。私はこの単純なコードを使用しました。

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<iframe width="1000px" height="700px" src="http://www.youtube.com" ></iframe>
</body>
</html>

  1. 知りたいのですが、なぜ私のウェブページはYouTubeのウェブサイトをiframeに読み込めないのですか。

  2. 私のウェブページにYouTubeウェブサイトをロードするために使用するコード。

  3. どのように私は私のウェブサイトで同じtechniqを使用するので、誰も私のウェブサイトをiframeに追加できません。

javascriptjqueryhtmliframeyoutube
17
Rishi Kumar

最新のブラウザーでは、ヘッダーでX-Frame-Optionsを有効にする必要があります。x-frame-optionsヘッダーは、Webサーバーの構成設定で実装できます。

下の画像のように、ヘッダーにX-Frame-Optionsを表示できます enter image description here

リファレンス： https://www.keycdn.com/blog/x-frame-options/

お使いのブラウザがサポートしていない場合、クリックジャッキング対策は行われず、HTTPヘッダーフィールドX-Frame-Optionsを使用できます。

  <meta http-equiv="X-Frame-Options" content="deny">

X-Frame-Optionsには次の3つの値があります。

拒否-サイトがフレームを表示しようとするかどうかに関係なく、ページをフレームに表示することはできません。

SAMEORIGIN-ページは、ページ自体と同じOriginのフレームにのみ表示できます。

ALLOW-FROM uri-ページは、指定されたOriginのフレームにのみ表示できます。

32
Krish R

2016年4月の時点で、 Krish R による承認済みの回答は機能しなくなりました。 ほとんどのブラウザRFC 7034 が推奨するメタタグを無視するようになりました。

このヘッダーを実装する正しい方法は、サーバーがドキュメントと共に送信することです。詳細は、Mozillaのドキュメント X-Frame-Options を参照してください。

19
mwoodman