背景

ローカルで以下のようなhtmlファイルを作成

iframe.html

<html>
    <head>
    </head>
    <body>  
        <iframe src="iframe_content.html" width="200" height="300" id="iframe-01"></iframe>
    </body>
</html>

iframe_content.html

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    </head>
    <body>
        <h1>iframe内</h1>
        <div class="iframe-width"></div>
        <script>
          const win = window.window;
          $('.iframe-width').text('iframeの幅 : ' + win.innerWidth + 'px');
          console.log(win.parent);
        </script>
    </body>
</html>

そしてファイルパスを使って（/Users/.../iframe.html）アクセスしたところ，以下のようなエラーがコンソールで出てしまった．

Uncaught DOMException: Blocked a frame with origin "null" from accessing a cross-origin frame.

調べてみたところ，ローカルでサーバを立てて動かせばこのエラーが出ないっぽいので，やってみることにしました．（参考）

Dockerでnginxを起動

環境

OS : macOS
ブラウザ : Google Chrome（バージョン85）

ディレクトリ構成

*
├- Dockerfile
└- sample_html/
     ├- iframe.html
     └- iframe_content.html

Dockerfile作成

nginxのイメージを基に作成します．
sample_html 配下のフォルダを表示対象とします．

Dockerfile

FROM nginx
COPY sample_html /usr/share/nginx/html

docker imageの作成

sample というイメージ名で 1.0 というタグをつけて，カレントディレクトリにあるDockerfileを元にイメージを作成

$ docker build -t sample:1.0 .

dockerコンテナの生成・起動

バックグラウンドで sample というイメージ名で 1.0 というタグがついているdockerイメージを起動

$ docker run -d -p 8080:80 sample:1.0

docker run のオプションについて

-p : ホストのポート:コンテナのポート ポート番号の紐付けを宣言

アクセス確認

http://localhost:8080/iframe.html にアクセス
すると，コンソールにエラーが表示されずにiframeの親の情報を取得することができる．

ローカルのサーバを立ち上げてHTMLを開く

背景