web-dev-qa-db-ja.com

ローカルファイルを開けません - Chrome：ローカルリソースを読み込めません

テストブラウザ：Chromeのバージョン：52.0.2743.116

それは 'C：\ 002.jpg'のようにローカルから画像ファイルを開くことであるという単純なJavaScriptです。

function run(){

   var URL = "file:///C:\002.jpg";

   window.open(URL, null);

}
run();

これが私のサンプルコードです。 https://fiddle.jshell.net/q326vLya/3/ /

適切な提案をください。

javascriptjquerygoogle-chromewebwindow.open
59
KBH

これは古くからあることを知っていますが、このような多くの質問を参照してください...

私たちは教室でChromeを多用しています、そしてそれはローカルファイルを扱うことにとって必須です。

私たちが使ってきたのは「Chrome用Webサーバー」です。あなたはそれを起動し、使用したいフォルダを選択してURLに行きます（127.0.0.1：あなたが選んだポートのように）

これは単純なサーバーであり、PHPを使用することはできませんが、単純な作業のためには、あなたの解決策になるでしょう。

https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb

39
Woody

さて、私はこのエラーメッセージの背後にあるセキュリティ上の理由を完全に理解しています、しかし時々、私たちは回避策を必要とします...そしてここに私のものです。この質問の基になっていたJavaScriptではなくASP.Netを使用していますが、誰かに役立つことを期待しています。

当社の社内アプリには、ユーザーが当社のネットワーク全体に広がる便利なファイルへのショートカットのリストを作成できるWebページがあります。彼らがこれらのショートカットの1つをクリックするとき、私たちはこれらのファイルを開きたいです…しかしもちろん、Chromeのエラーがこれを防ぎます。

enter image description here

このWebページではAngularJS 1.xを使用してさまざまなショートカットを一覧表示しています。

もともと私のWebページはファイルを指す<a href..>要素を直接作成しようとしていましたが、ユーザーがこれらのリンクの1つをクリックしたときに "Not allowed to load local resource"エラーが発生しました。

<div ng-repeat='sc in listOfShortcuts' id="{{sc.ShtCut_ID}}" class="cssOneShortcutRecord" >
    <div class="cssShortcutIcon">
        <img ng-src="{{ GetIconName(sc.ShtCut_PathFilename); }}">
    </div>
    <div class="cssShortcutName">
        <a ng-href="{{ sc.ShtCut_PathFilename }}" ng-attr-title="{{sc.ShtCut_Tooltip}}" target="_blank" >{{ sc.ShtCut_Name }}</a>
    </div>
</div>

解決策は、これらの<a href..>要素をこのコードに置き換えて、my Angular controller内の関数を呼び出すことでした...

<div ng-click="OpenAnExternalFile(sc.ShtCut_PathFilename);" >
    {{ sc.ShtCut_Name }}
</div>

機能自体はとても単純です...

$scope.OpenAnExternalFile = function (filename) {
    //
    //  Open an external file (i.e. a file which ISN'T in our IIS folder)
    //  To do this, we get an ASP.Net Handler to manually load the file, 
    //  then return it's contents in a Response.
    //
    var URL = '/Handlers/DownloadExternalFile.ashx?filename=' + encodeURIComponent(filename);
    window.open(URL);
}

そして私のASP.Netプロジェクトに、このコードを含むDownloadExternalFile.aspxというHandlerファイルを追加しました：

namespace MikesProject.Handlers
{
    /// <summary>
    /// Summary description for DownloadExternalFile
    /// </summary>
    public class DownloadExternalFile : IHttpHandler
    {
        //  We can't directly open a network file using Javascript, eg
        //      window.open("\\SomeNetworkPath\ExcelFile\MikesExcelFile.xls");
        //
        //  Instead, we need to get Javascript to call this groovy helper class which loads such a file, then sends it to the stream.  
        //      window.open("/Handlers/DownloadExternalFile.ashx?filename=//SomeNetworkPath/ExcelFile/MikesExcelFile.xls");
        //
        public void ProcessRequest(HttpContext context)
        {
            string pathAndFilename = context.Request["filename"];               //  eg  "\\SomeNetworkPath\ExcelFile\MikesExcelFile.xls"
            string filename = System.IO.Path.GetFileName(pathAndFilename);      //  eg  "MikesExcelFile.xls"

            context.Response.ClearContent();

            WebClient webClient = new WebClient();
            using (Stream stream = webClient.OpenRead(pathAndFilename))
            {
                // Process image...
                byte[] data1 = new byte[stream.Length];
                stream.Read(data1, 0, data1.Length);

                context.Response.AddHeader("Content-Disposition", string.Format("attachment; filename={0}", filename));
                context.Response.BinaryWrite(data1);

                context.Response.Flush();
                context.Response.SuppressContent = true;
                context.ApplicationInstance.CompleteRequest();
            }
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }

以上です。

ここで、ユーザーが私のショートカットリンクの1つをクリックすると、この.ashxファイルを開くOpenAnExternalFile関数が呼び出され、開きたいファイルのパスとファイル名が渡されます。

このHandlerコードはファイルをロードしてから、その内容をHTTP応答に返します。

そして、仕事が完了したら、Webページは外部ファイルを開きます。

あー！繰り返しますが、Chromeがこの "Not allowed to load local resources"例外をスローするのには理由がありますので、慎重に検討してください...しかし、これはこの制限を回避するためのかなり簡単な方法であることを示すためだけに示しています。

最後のコメントです。最初の質問はファイル "C:\002.jpg"を開くことを望んでいました。あなたは できません これはできません。あなたのウェブサイトは（それ自身のC：ドライブを備えた）一つのサーバーに置かれ、あなた自身のユーザーのC：ドライブに直接アクセスすることはできません。だからあなたができる最善のことは私のようなコードを使ってネットワークドライブ上のどこかのファイルにアクセスすることです。

14
Mike Gledhill

セキュリティ上の理由から、Chromeはローカルファイルへのアクセスをこのように明確にブロックします。

これがChromeのフラグを回避するための（そして脆弱性にあなたのシステムを開放するための）記事です：

http://www.chrome-allow-file-access-from-file.com/ /

12
Scott

Chrome用Webサーバー を使用した回避策があります。
これが手順です。

  1. 拡張機能をクロムに追加します。
  2. フォルダ （C：\ images） を選択して、希望のポートでサーバーを起動します。

今すぐ簡単にあなたのローカルファイルにアクセスします。

function run(){
   // 8887 is the port number you have launched your serve
   var URL = "http://127.0.0.1:8887/002.jpg";

   window.open(URL, null);

}
run();

PS：クロスオリジンアクセスエラーが発生した場合は、詳細設定からCORSヘッダーオプションを選択する必要があります。

4
Shwetabh Shekhar

1）端末を開いて入力

npm install -g http-server

2）ファイルを提供したいルートフォルダに行き、次のように入力します。

http-server ./

3）端末の出力を読むと、何かhttp://localhost:8080が現れます。

そこにあるすべてのものが手に入ることを許されるでしょう。例：

background: url('http://localhost:8080/waw.png');

4
Marcelo Rafael

プロジェクトディレクトリの外やユーザーレベルのディレクトリからイメージをロードすることはできません。そのため、「ローカルリソースにアクセスできません」という警告が表示されます。

しかし、もしあなたがmyProject\Content\のようにあなたのプロジェクトのルートフォルダにそのファイルを置き、そのようにそれを参照するならば：

<img src="/Content/myfolder/myimage.jpg" />
3
Liam Appleyard

あなたがこれを行うことができれば、あなたがあなたのファイルシステムにアクセスし、潜在的にそこで利用可能なデータに作用することができるので、それは大きなセキュリティ問題を表します。

ローカルリソースにアクセスする必要がある場合は、マシン上でWebサーバを起動しようとすることができます。この場合、メソッドは機能します。 Chromeの設定に基づいて行動するなど、他の回避策も考えられますが、ローカルWebサーバーを別のポートにインストールすることをお勧めします（いいえ、それほど難しいことではありません）。

また見なさい：

1
Prak

この問題は、サーバー側の言語としてPHPを使用しているときに発生します。回避策は、結果をクライアントに送信する前に、イメージのbase64エンコーディングを生成することでした。

$path = 'E:/pat/rwanda.png';
$type = pathinfo($path, PATHINFO_EXTENSION);
$data = file_get_contents($path);
$base64 = 'data:image/' . $type . ';base64,' . base64_encode($data);

誰かが自分の作品を作り出すアイデアを与えるかもしれないと思います

ありがとう

1
Ruberandinda Patience