クロスドメインにiframeを使うのは難しかった

iframeは実務でも趣味でも使う機会が全く無く、これに関しては無知だったのですが 先日Unity(WebGL)とiframeを組み合わせて自作ゲームを制作する機会があり、結果見事に頓挫したのでiframeについて調べた記録を残しておきたいと思います。

慣れた方にとってはアタリマエの話かもしれませんが…。

異なるドメインのページをiframeで表示するには制約がある

基本的にクロスドメインのページはiframeで表示する程度しかできませんでした。

描写されたDOM要素を参照、操作しようと試みることは禁止という考え方のようです。

iframeで表示中のURLを取得し、別途立てたLambda関数にURLを渡してスクレイピングをして頻出単語を抜き出す…といったゲームのアイデアを考えていたのですが、残念ながら無理でした。

サーバ側の設定によってiframeの使用が拒否される時がある

表示しようとしたウェブサイトのサーバのレスポンスヘッダにX-Frame-Options: DENYが指定されていると、iframe内で一切ページが表示されなくなります。

Googleや大手のサイトはこの対策が施されているケースが多く、iframeが使い物になりませんでした。

個人ブログやマイナーなニュースサイト、あと検索エンジンだとBingは表示できました。

developer.mozilla.org

iframeで表示中のURLの取得はできない

これはできそう！とずっと今まで思っていましたが、なんとできません。

例えば下記のようにlocation.hrefでURLを取得しようすると、コンソールにクロスドメインによるエラーが出ます。

<iframe id="iframe" src="https://**************" width="500" height="500"></iframe>

<script>
  const iframe = document.getElementById("iframe");
  console.log(iframe.location.href);
</script>

ページ遷移イベントの取得

現在のiframeのURLが取得できないのならば、せめてiframeでページ遷移した時に発火するイベントを用意したい… と思ったのですがそのようなイベントは用意されておらず、出来ませんでした😂

【悪あがき】iframeの代わりにwindow.open()を使ってみた

window.open()で新しいタブを開くと、戻り値にWindowオブジェクトのラッパーであるWindowProxyオブジェクトが返ります。

Windowオブジェクトはlocationプロパティを持つので、これで新しいタブで表示中のURLを取得できるのでは？と期待し、下記のコードを実行してみました。

var window = window.open(url, windowName, [windowFeatures]);
console.log(window.location.href);

結果はiframeと同様にダメでした😭 クロスドメインによるエラーとなります。

クロスドメインでは、どうあがいても外部からの直接的な処理は受け付けてくれないようですね。

開発者の意図しないコードが外部から実行されてしまうことを防ぐ為の制限ですので、致し方ありません。