接続が拒否された

質問

下記画像URLを参照してください。
https://gyazo.com/888c5200b0a9718df09ef144c0a6136f

接続が拒否されたのはなぜですか

回答No.3

akira1720 · ベストアンサー

今回調べたいのは https://prog-8.com/ への GET リクエストおよびそれに対する prog-8.com の web サーバからの返答なので、まず CodePen の編集画面で HTML を入力し、プレビュー画面に Progate へのハイパーリンクが表示された状態にしてから、デベロッパーツールを起動し、Network タブを開きます。
その状態でプレビュー画面の Progate リンクをクリックすると、https://prog-8.com/ への GET リクエストおよびそれに対する prog-8.com の web サーバからの返答がデベロッパーツールに表示されます。おそらく4行ぐらい記録されると思います。それ以降の記録はいらないので、赤いボタンをクリックしてレコーディングを止めます。
おそらく記録された最初の行は "prog-8.com" と表示されていると思うので、それをクリックします。するとその HTTP リクエスト/レスポンスの詳細が表示されます。"Headers", "Preview", "Response" などのタブがあると思いますが、"Headers" を開き、スクロールダウンして "Response headers" のセクションを見ると、縦に cache-control: , content-type: , date: , などのヘッダ情報が並んでいると思います。それをずっと下まで見ていくと、"x-frame-options: SAMEORIGIN" という行があるのがわかると思います。

これにより、prog-8.com の web サーバは、トップページへの GET リクエストへの返答で、"x-frame-options: SAMEORIGIN" ヘッダを返していることがわかります。ネットでこのヘッダの意味を調べれば出てくると思いますが、このページがフレームの中で呼び出されているなら、フレームの外が同じサイトのときに限り表示してもいいですよ、という意味です。今回はフレームの外は prog-8.com のサイトではなく、codepen.io なので、prog-8.com のページは表示されません。

お礼

詳細な回答ありがとうございます。
が、私の現在の力では理解不能です。深入りはしないようにします。
ある程度の力のある方であれば、申し分ない回答
です。本当に申し訳ございません。

回答No.2

akira1720

> > そのように他のサイトに埋め込まれることをサーバ側は拒否することができます。
> これはCodePenの仕様になっているのですね。これはこちら側からすればどうしよもないことですね。

いえ、他サイトのフレームの中で呼び出されることを拒否しているのは prog-8.com の仕様です。(フレームの中にプレビューを表示するのは CodePen の仕様ですが。)

> ＞prog-8.com の場合、レスポンスでx-frame-options: SAMEORIGIN
> このような見分け方はChromeだとPage Sourseですかあるいはinspectですか。あるいは別のものですか

メニューから「その他のツール」>「デベロッパーツール」を開き、ネットワークタブを開きます。
そこでリンクをクリックするなどしてHTTPリクエストを投げると HTTP のリクエスト、レスポンスが記録されます。
x-frame-options はレスポンスヘッダなので、見たいリクエストの行をクリックし、Headers > Response Headers を見れば、
x-frame-options ヘッダが prog-8.com から返されていることがわかると思います。

補足

回答ありがとうございます。デベロッパーツールの見方がポイントですね。

下記画像URLを参照してください
https://gyazo.com/888c5200b0a9718df09ef144c0a6136f　１

下記画像URLからだと
https://gyazo.com/7510a3b413e5ba727132b09a0c637ed9
リンクをクリックだと１のURLのリンクのことですか

＞ HTTP のリクエスト、レスポンスが記録
これはNetworkのどこに出現されるのですか。

もし出現されるとすれば、下記もNetworkのところに出現されるのですか
＞x-frame-options～ prog-8.com から返されている

回答No.1

akira1720

スクリーンショットをもとに調べたのですが、codepen.io というオンラインの web 開発環境ですね。

開発環境自体がウェブページになっていて、プレビュー画面が HTML のフレームとして実装されています。なので、プレビュー画面でハイパーリンクをクリックして他のサイトのページをプレビュー画面に読み込もうとすると、codepen.io のウェブサイト内のフレームに、他のサイトのウェブページを埋め込んで表示することになります。

そのように他のサイトに埋め込まれることをサーバ側は拒否することができます。
prog-8.com の場合、レスポンスで
x-frame-options: SAMEORIGIN
というヘッダを返しています。このヘッダを正しく解釈できるブラウザであれば、このページが他のサイトのフレームの中で読み込まれようとしていた場合には、そのページを表示しません。つまり、実際には prog-8.com に接続を拒否されているわけではなく、ブラウザが、prog-8.com の希望通り、他サイトのフレーム内での表示をしなかった、ということです。

補足

>そのように他のサイトに埋め込まれることをサーバ側は拒否することができます。

これはCodePenの仕様になっているのですね。これはこちら側からすればどうしよもないことですね。

＞prog-8.com の場合、レスポンスでx-frame-options: SAMEORIGIN

このような見分け方はChromeだとPage Sourseですかあるいはinspectですか。あるいは別のものですか