1

以下のコードで左は表示されますが、右は「接続が拒否されました。」と表示されます。どうしたらよろしいでしょうか?

因みに、Chrome拡張機能でサイトをブラウザ内で左右に表示し、左を日本語、右を英語といったことをやろうと思っています。

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    font-family: Arial, sans-serif;
}
.container {
    display: flex;
    width: 100%;
    height: 100vh; /* ここを修正して、containerが画面全体を占めるようにします */
}
.left-content, .right-content {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #ccc;
    height: 100%; /* ここを追加して、左右のコンテンツが高さ100%になるようにします */
}
.center-bar {
    width: 10px;
    background-color: #000;
    height: 100%; /* ここを追加して、center-barが高さ100%になるようにします */
}
.iframe-container {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%; /* ここを修正して、iframe-containerが高さ100%になるようにします */
}
.iframe-container iframe {
    width: 100%;
    height: 100%;
    border: none;
}
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>中央にバーを置き、左右にコンテンツを表示</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="left-content">
        <div class="iframe-container">
            <iframe src="https://magazine.techacademy.jp"></iframe>
        </div>
    </div>
    <div class="right-content">
        <div class="iframe-container">
            <iframe src="https://academy.hackthebox.com"></iframe>
        </div>
    </div>
</body>
</html>

1 件の回答 1

5

"表示できない" 方の URL はレスポンスヘッダーの x-frame-optionsSAMEORIGIN = 同一オリジンのみが許可されている状態なので、外部サイトから iframe で読み込むことは許可されていません。

第三者が好き勝手に埋め込み表示を行うのはセキュリティ上の懸念があるため、このような仕組みが設けられています。

対象サイトのレスポンスヘッダー (抜粋):

$ curl --head -- https://academy.hackthebox.com
x-frame-options: SAMEORIGIN

参考:
https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/X-Frame-Options

X-Frame-Options は HTTP のレスポンスヘッダーで、ブラウザーがページを <frame><iframe><embed><object> の中に表示することを許可するかどうかを示すために使用します。サイトはコンテンツが他のサイトに埋め込まれないよう保証することで、クリックジャッキング攻撃を防ぐために使用することができます。

1
  • 返答が遅れてしまいすみません。回答ありがとうございます。 調べたのですが、Edgeのブラウザ内画面分割をchrome拡張機能で再現するには、 x-frame-optionsを回避するためにリバースプロキシ?Nginx?の設定を行う必要があるという認識で合っていますでしょうか? Commented 6月13日 3:07

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。