Javascript

【Javascript】エラー「Blocked a frame with origin "null" from accessing a cross-origin frame.」の対処法

Javascriptのエラー対処の記録をここにメモしておきます。

エラー内容

javascriptで簡単なサンプルを書いていたら以下のようなエラーに遭遇しました。

「Blocked a frame with origin "null" from accessing a cross-origin frame.」

ちなみに書いていたのは、ウィンドウ操作系のプログラムです。

サンプル

<meta http-equiv="content-type" charset="utf-8">

<script type="text/javascript">
<!--
  function openGrandChildWindow(url, name) {
    window.open(url, name, 'width=400,height=300');
  }


  function sendParent() {
    // 親ウィンドウの存在チェック
    if(!window.opener || window.opener.closed){
       window.alert('親ウィンドウがありません。');
       return false;
    }
    // 子ウィンドから親ウィンドウへ値を渡す
    window.opener.document.getElementById("pr_name").innerHTML = document.getElementById("chl_name").value;
    window.opener.document.getElementById("pr_age").innerHTML  = document.getElementById("chl_age").value;
  }
-->
</script>

<b>子ウィンドウ</b>
<p>氏名：<input type="text" id="chl_name"></p>
<p>年齢：<input type="text" id="chl_age"></p>
<p><a href="javascript:void(0);" onclick="sendParent()">親ウィンドウにデータを送る</a></p>
<p><a href="javascript:void(0);" onclick="openGrandChildWindow('grandchild_window.html', 'grandchild_window')">孫ウィンドウを開く</a></p>
<p><a class="close" href="">ウィンドウを閉じる</a></p

対処

上記サンプルの17行目でエラーになっているようです。丁度子ウィンドウから親ウィンドウへ値を渡す部分になります。

取り合ず、エラーにメッセージをGoogle翻訳にかけてみたところ、、

 内容
原点が「null」のフレームがクロスオリジンフレームにアクセスするのをブロックしました。

う～ん、なんのこっちゃ意味が分かりません。。。

さらに調べてみたところ、原因が分かりました！

どうやらローカル環境にあるHTMLをそのままブラウザで動かしていたので怒られていたようですｗ。

クロスオリジンフレームとは、URLに「http://」とドメインホストが含まれ、ポートが80のものを言うらしい。確かにローカルのHTMLファイルを実行していたから、ブラウザのURLがファイルパスになっていたのでエラーになったのかな？

とりあえずXAMPPのApacheを使って検証してみます。

バーチャルホストの設定に以下を追記して、XAMPPからApacheを起動します。

[XAMPPのインストール先]/apache/conf/extra/httpd-vhosts.conf

 ######## テスト環境用 ########
 <VirtualHost *:80>
     ServerAdmin postmaster@dummy-host2.localhost
     DocumentRoot "C:/cygwin64__/home/user/test/"
     ServerName test.local
     <Directory "C:/cygwin64__/home/user/test/">
         Require all granted
     </Directory>
     <IfModule mod_rewrite.c>
         RewriteEngine on
         # trailing slash
         RewriteCond %{REQUEST_URI} !/$
         RewriteCond %{REQUEST_URI} !^{HTTP_HOST}$
         RewriteCond %{REQUEST_URI} !\.[^/\.]+$
         RewriteRule ^(.*)$ $1/ [R=301,L]
         # Ignore http TRACE method
         RewriteCond %{REQUEST_METHOD} ^TRACE
         RewriteRule .* - [F]
     </IfModule>
 </VirtualHost>

最後に、ブラウザのURL「http://test.local/javascript/window/grandchild/parent_window.html」と打ち込んで、実行してみたらうまくいきました。

いやぁぁ変なところで躓いたなぁ（；＾＾）

-Javascript