背景
ローカルで以下のような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の親の情報を取得することができる．
