ローカルに保存したJavascriptを実行できるようにする

Windows環境でも同様の起こるのかわかりませんが、MacBookAirのローカル環境でJavaScriptを実行しようと思った際、真っ白いページは表示されるものの何も実行されない…という事態に陥ってしまいました。

最初は「プログラムのせいかなー」と思っていたのですが、どうやらデフォルトではローカルのJavaScriptのファイルを実行できない状態になっている様です。今回はローカルに保存されているJavaScriptを手元のGoogle Chromeで実行するための手順をメモします。

※ 以下で紹介する方法は、運用によってはセキュリティ上問題があります。

Chrome JavaScriptコンソール

具体的に設定を行う前に、内部で何が起きているかをしるためにGoogleChromeのJavaScriptコンソールでエラーの内容を確認したいと思います。こいつもデフォルトではオフになっているので、表示設定を行う必要があります。

メニュー右端にある「その他」ボタンから「ツール>JavaScriptコンソール」を選択すると、ブラウザの下半分がJavaScriptの実行コンソールに変化します。

20140827001

このJavaScriptコンソールを表示した状態でJavaScriptをローカル実行してみると、以下のようなエラー文言で実行が失敗していることがわかります。

No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'null' is therefore not allowed access.

結論から言うと、どうやらChromeの実行時に「–allow-file-access-from-files」というオプションをつけるとローカルのJavaScriptを実行できるようです。僕は普段DockからChromeを起動しているので、以下の手順でこれを実現します。

Chromeに起動時オプションを設定する

  1.  Chromeを起動していたら、Chromeを終了する
  2. AppleScriptエディタを起動 (SpotlightにApple…とか入れるとでてきます)
  3. 下記のシェルコマンドを入力、実行
    do shell script "/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --allow-file-access-from-files"
    
  4. 正しく実行できていれば、このコマンドを入力後にChromeが起動し、
    そのChrome上でJavaScriptの実行が可能です。
  5. ファイル>保存で「アプリケーション」フォーマットで保存する。名前は適当。
  6. 保存した .app をアプリケーションフォルダに入れる。
    作成した.appを従来のGoogleChrome.appと入れ替える
  7. 今後は新しく作成した.appで実行するようにする

これで動きはしますが…

作成した.appファイルを叩きさえすれば、コマンドを常に叩いた状態でChromeを実行する状態を維持はできます。
しかし、調べていくうちにそもそもChromeのこのデフォルト設定はセキュリティ対策のためになされている制限だという事が分かりました。

便利にはなりますが、セキュリティ上問題がある方法ではあるので、
ローカルにApacheを立ててlocalhost越しにアクセスするほうが安全かなと思い始めました。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です