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

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をそのままブラウザで動かしていたので怒られていたようですw

クロスオリジンフレームとは、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」と打ち込んで、実行してみたらうまくいきました。

いやぁぁ変なところで躓いたなぁ(;^^)

 



投稿日:2020-03-16    更新日:2020-03-17

[スポンサーリンク]

  
関連記事
勉強した内容を緩くメモする|JBの技術メモ
勉強した内容を緩くメモする|JBの技術メモ
勉強した内容を緩くメモする|JBの技術メモ
勉強した内容を緩くメモする|JBの技術メモ
勉強した内容を緩くメモする|JBの技術メモ
勉強した内容を緩くメモする|JBの技術メモ
サイト内検索
プロフィール

プロフィール

[Name : じゃぶじゃぶ(@jbjb_2019)]
都内で社内SEをしているおじさん。
仕事で得られる知識だけでは限界を感じ、 WEBの勉強がてらITブログを開始。
サーバからWEBサイトまでフルスクラッチで開発しました。
現在は勉強のモチベーションを保つために活用中。
興味があることを雑記的に書いていきます。

[スポンサーリンク]

[スポンサードリンク]