Help us understand the problem. What is going on with this article?

ローカル(file:///)上で外部ファイル読み込みのセキュリティ制約を回避するいくつかの方法

More than 3 years have passed since last update.

Aさん「AjaxでCSVファイルを読み込んで動かすJavaScriptのプログラムを作りました」

Bさん「HTMLファイルをPC上で直接開いても動作しますか?」

上記のような場合、ブラウザのセキュリティ制約によりファイルの読み込みがブロックされてしまい、うまく動かすことができません。

この文書では、上記のような場合にどういう方法を用いればセキュリティ制約を回避できるかの例を紹介します。

※基本的な対象ブラウザはIE11と2016/12時点のFirefox, Chrome, Edgeです。最後の方の方法は前提条件を満たさない方法になってしまっていますが、参考として記載しています。

読み込む外部ファイルをHTMLと同フォルダか同フォルダの下層に配置(Firefox) + Ajaxに Microsoft.XMLHTTP を使用する (IE)

Firefoxでは、外部ファイルをHTMLと同フォルダか同フォルダの下層に配置しておけばAjax (XMLHttpRequest) でファイルを読み込むことができます。(Same-origin policy for file: URIs | MDN)

IEでは、AjaxにActiveXObject("Microsoft.XMLHTTP") (以下Microsoft.XMLHTTP) を使うとセキュリティ制約を回避できます。

<!DOCTYPE html>
<html lang="ja"><head><meta charset="UTF-8"></head>
<body>
<script>
var xhr = null; // 使える場合はMicrosoft.XMLHTTP, 使えない場合はXMLHttpRequest
try { xhr = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { xhr = new XMLHttpRequest(); }

var path = "test.csv"; // 読み込む外部ファイル
xhr.open("GET", path, true);
xhr.onreadystatechange = function(){
    if(xhr.readyState === 4) {
        var data = xhr.responseText; // 外部ファイルの内容
        console.log(data);
    }
};
xhr.send();
</script>
</body>
</html>

もし jQuery 1系 (1.9.1など) を使用している場合は、ローカル(file:///)かつIE10以下であれば $.ajax() などで自動的に Microsoft.XMLHTTP が使われます。

IE11の場合は、Ajaxに使用するオブジェクトをjQuery.ajaxSetup()で調整することで同じような対応ができます。
(標準状態では、IE11では Microsoft.XMLHTTP が使用されません)

<!DOCTYPE html>
<html lang="ja"><head><meta charset="UTF-8"></head>
<body>
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$.ajaxSetup({
    xhr: function() { // 使える場合はMicrosoft.XMLHTTP, 使えない場合はXMLHttpRequest
        try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { return new XMLHttpRequest(); }
    }
});
var path = "test.csv"; // 外部ファイル
$.ajax(path, {
    complete: function(e){
        var data = e.responseText; // 外部ファイルの内容
        console.log(data);
    }
});
</script>
</body>
</html>

※ jQuery 3系の場合は上記方法は使えません。(jQuery 3.1.1にはAjaxの処理中に使用中のAjaxオブジェクト(xhr).onloadにコールバック関数をセットするコードがあり、Microsoft.XMLHTTPにonloadをセットするとエラーになる)

※ Microsoft.XMLHTTP は MSXML2.XMLHTTPでもよいと思いますが、この文書では jQuery 1.9.1に合わせて Microsoft.XMLHTTP を使用しています。

起動オプション --allow-file-access-from-files を使用する (Chrome)

Chromeには、ローカルファイルのアクセスを許可する起動オプション「--allow-file-access-from-files」があります。

Chromeの起動オプションを設定してもよい場合は、この方法を使うと元のプログラムのコードを変えずに対応することができます。

(人のPCで動かすプログラムの場合はできるだけ避けたほうがよいです)

参考: 【小ネタ】Chromeのローカルセキュリティポリシーの回避 | Developers.IO

<object> や <iframe> で外部ファイルを読み込んで内容を取得する (IE, Firefox, Edge)

Edgeには Microsoft.XMLHTTP を生成するための ActiveXObjectがなく、XMLHttpRequestでの読み込みも制限されてしまいますが、<object> や <iframe> 経由だと外部ファイルの読み込みと取得ができるようでした。

<!DOCTYPE html>
<html lang="ja"><head><meta charset="UTF-8"><title></title></head>
<body>
<!-- 外部ファイル (.csvだと保存ダイアログが表示されてしまうため.txtにしています。display:noneは外部CSSなどに移してもよいです) -->
<object data="test.txt" type="text/plain" id="obj" style="display:none"></object>
<script>
    var obj = document.getElementById("obj");
    obj.onload = function(){
        var data = obj.contentDocument.documentElement.textContent; // 外部ファイルの内容
        console.log(data);
    }
</script>
</body>
</html>

IE, Firefoxでも上記で読み込み可能ですが、Chromeは前述の起動オプションを付けない限りエラーになります。

読み込む外部ファイルのみWebサーバに配置する (全ブラウザ対応)

  1. HTML等はローカル配置のままで、Ajax読み込みする外部ファイルだけ外部のWebサーバに上げておく
  2. 読み込みたい外部ファイルのレスポンスヘッダに「 Access-control-allow-origin: * 」を追加して、Ajaxのアクセス制限(Same-Origin Policy)を外す

とすると、ローカルのファイルを読み込むのではなくなるためブラウザのセキュリティ制約にかからなくなります。

※インターネット接続できない環境での動作は諦める必要があります。IE9なども対応に含めようとするとXDomainRequestが必要になってきて厄介になると思います…

HTMLにファイルの内容を埋め込む (外部ファイル化を諦める。全ブラウザ対応)

「ファイル数が少ない」「データが少ない」という場合は、外部化自体を諦めてHTMLにファイルの内容を埋め込んでしまったほうが手っ取り早いです。(ブラウザの挙動の違いを気にする必要がないです)

<!DOCTYPE html>
<html lang="ja"><head><meta charset="UTF-8"></head>
<body>
<!-- 外部ファイル化したかったCSV(type指定しない場合JavaScriptとして扱われてエラーが起きます) -->
<script type="text/csv" id="csv">
test,1
</script>

<script>
    // 外部ファイル化したかった内容
    var data = document.getElementById("csv").text.trim();
    console.log(data);
</script>
</body>
</html>

上記は<script>に埋め込んでいますが、<div>などにして隠して(display:none)おいてもよいです。

ローカルでWebサーバを動かす (file:/// を諦める。全ブラウザ対応)

「HTMLファイルをPC上で直接開いても動作しますか?」の回答としては「すみません、動作しません…」という回答になってしまいますが、ローカルでサーバプログラムを動かすことを許可してもらい、file:/// ではなく http://localhost で動作させるとセキュリティ制約が無くなります。

※ローカルでサーバプログラムを動かす方法は許可してもらいづらいと思うので、JavaScriptのプログラムを直すのが状況的に難しい場合の最終手段だと思います。

「動作させるPCをなるべく汚さないようにしたい」「Webサーバを自作したくない」場合は、Mongoose(Cesanta Mongoose)というファイル1つで動く軽量Webサーバプログラムを使うと便利です。

Windowsの場合、動作させたいHTMLと同じフォルダにexeを配置して実行するだけでローカルサーバが立ち上がってindex.htmlが表示されます。(終了したい場合はタスクトレイのアイコンからExitするだけです)

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした