document.referrerでiframeからクロスドメインの親ページのURLを取得できる理由について

気になったので調べた内容をまとめた。

iframeからクロスドメインの親ページのURLを取得する

• document.referrerでできる（ほとんどのブラウザで動作するっぽい。Chrome, Firefox, Safari, Edge, IE11の最新版はどれも動いた）
• 同一ドメインの場合はdocument.location.hrefでもいける
• この違いは何なのか気になったので調べた

そもそもdocument.referrerは何を取得しているのか

• document.referrerはHTMLファイルの取得のために発行したHTTPリクエストのHTTPリファラを取得する

HTTPリファラとは何か

HTTPリファラ（英: HTTP referer）あるいは単にリファラは、HTTPヘッダの1つで、インターネット上の1つのウェブページまたはリソースから見て、それにリンクしているウェブページやリソースのアドレスを指す。

HTTPリファラ - Wikipediaより引用

• このブログを開いた際に発行されるHTTPリクエストのヘッダーにもHTTPリファラが含まれている

なぜdocument.referrerでiframeの親ページのURLを取得できるのか

• 親ページからiframeの内容を取得するために発行されるHTTPリクエストのヘッダーにHTTPリファラが含まれている場合が多いから（もしHTTPリファラが含まれていない場合は取得できない）
• 例えばiframeのタグは下記のようになるが、src属性にURLが指定されているのでページ描画時にリソース読み込みの対象になる

<iframe src="https://..."></iframe>

document.referrerにクロスドメイン制約がないのはなぜか

• document.referrerは値を書き換えてもHTTPリクエストは発行しない（既に発行済のHTTPリクエストのヘッダー情報を参照しているだけなので）
  • そもそもJavaScriptからは書き換えられない

document.location.hrefにクロスドメイン制約があるのはなぜか

• document.location.hrefで取得されるURLと実行時のURLのドメインが異なるとクロスドメイン制約に当たる
• そもそもクロスドメイン制約は、悪意あるJavaScriptが異なるドメインに対してリクエストを発行することを防ぐためにある
• document.location.hrefの値を書き換えると任意のURLに対してHTTPリクエスト(GET)を発行出来てしまうのでクロスドメインの場合は参照不可の仕様と思われる

HTTPリファラを制限できないか

• 外部に公開したくないURLからHTTPリクエストを発行する場合等、HTTPリファラを制限したいことがある
• ページ全体、リソース毎に柔軟に設定できる。詳細は下記にまとめられている。
  • Referrer を制御する - Qiita

所感

まだまだHTTPリクエストのヘッダーは分からない属性が多いので1つずつ理解していきたい