はじめに
「安全なwebアプリケーションの作り方 第2版」の「3.2 同一オリジンポリシー」の学習を進めている中で、つまずいたところと解決法をメモしておきます。
具体的には、iframeの内側のコンテンツを外側からJavaScriptにより取得できる例にて、その通りに動かなかった時、どう解決したのかを説明します。
直面した問題
「3.2 同一オリジンポリシー」の「同一オリジンポリシー」項にて、仮想マシンでwebサーバを起動し ブラウザで/32/32-001.html を表示させる[1]と「パスワード→」ボタンをクリックできるページになります。この「パスワード→」ボタンを押せばiframeの内側のコンテンツすなわち「password1」が「パスワード→」ボタンの右隣に表示される、という例です。しかし、以下の画像のように怒られてしまいます。
「accessing a cross-origin frame」とあります。。。
[1]詳しくは本を買ってください。本記事はあくまで私自身のメモの役割が大きいです。。
解決
本を読み進めるときサンプルがうまく動作しないからといって立ち止まってはいけません。とりあえず、次に進みましょう。読み進めると「同一オリジンである条件」が記載されていました。
- URLのホスト(FQDN)が一致している
- スキーム(プロトコル)が一致している
- ポート番号が一致している
なるほど「URLのホストが一致している」を満たしてなさそうです。なぜなら、私は、URLを
http://192.168.56.101/32/32-001.html
としていました。これが間違いです。32-001.html内でiframeタグは
<iframe name="iframe1" width="300" height="80" src="http://example.jp/32/32-002.html">
</iframe><br>
となっていました。つまり、iframe内ではexample.jpのコンテンツを表示するようになっているのでブラウザに入力するURLにおけるホスト名もexample.jpとしなければなりません。hostsファイルで192.168.56.101とexample.jpを紐づける設定をしていたので、webページは正しく表示されたのですが、ホスト名が一致していないので同一オリジンである条件を満たしていなかったと考えられます。わざわざIPアドレスを打ち込んだ私のミスでした。
そこでURLを正しく、
http://example.jp/32/32-001.html
としてアクセスし、「パスワード→」ボタンを押すと、以下の画像のように正しく動作しました。
蛇足かもしれませんが、これでもうまく動作しないときはURLが「http」じゃなくて「https」になっていないか、などの確認をしましょう。
まとめ
「安全なwebアプリケーションの作り方 第2版」で学習を進めている中で、つまずいたところをメモしておきました。
本の学習でのコツは、「つまずいても、とりあえず先に進んでみる」ことです。そうすることで今回のように気がづくことがあるかもしれません。