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

Cannot open local file - Chrome: Not allowed to load local resource


質問 written by julienc @2017-01-21 15:37:41Z

: 59 : 8 : 214

テストブラウザ: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/

適切な提案をください。

コメント 1

ローカルのリソースにアクセスするには<input type=file>を使用してください2016

written by dandavis @2016-08-17 22:55:00Z

回答 1 written by Woody @2017-09-29 02:45:50Z
39

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

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

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

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

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

コメント 1

ウッディ:どうもありがとう!このアプローチは私を助けました。Windows 10上でローカルTomcat +ローカルAWS S3バケットを実行します。これで、稼働中のAWSサーバーとローカルのAWSサーバーを切り替えることができます。乾杯。Q

written by user1723453 @2017-10-04 15:57:32Z

回答 2 written by Mike Gledhill @2017-06-23 08:04:30Z
14

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

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

ここに画像の説明を入力してください

この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..>要素をこのコードに置き換えて、Angularコントローラの関数を呼び出すこと<a href..>

The solution was to replace those <a href..> elements with this code, to call a function in my Angular controller...

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

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

そして私のASP.Netプロジェクトで、私はこのコードを含んでいるDownloadExternalFile.aspxと呼ばれるHandlerファイルを追加しました:

The function itself is very simple...

以上です。

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

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

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

あー! 繰り返しますが、Chromeがこの「 Not allowed to load local resources 」という例外Not allowed to load local resourcesスローするのは理由があるため、慎重に検討してください。ただし、この制限を回避するための非常に単純な方法であることを示すためにこのコードを掲載します。

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

回答 3 written by Scott @2016-08-17 22:40:22Z
12

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

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

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

コメント 1

私は解決策 "c:\ path \ chrome.exe"に従うことを試みました - ファイルアクセスからの許可 - しかし私はそれを開くことができません。このウェブサイトfiddle.jshell.net/q326vLya/3をテストしてください。何がおかしいのですか?

written by KBH @2016-08-18 15:38:00Z

コメント 2

これは私のためには動作しません、同じ正確なエラー

written by rgorr @2017-06-27 15:55:36Z

コメント 3

私のためにも働いていません

written by pappu_kutty @2017-07-04 12:09:09Z

コメント 4

あまりにも私のために働いていない:(

written by ShaileshDev @2018-04-19 16:31:29Z

コメント 5

GoogleChrome 66では動作していません。Chromeはそのフラグで始まりますが、それでもローカルファイルを開くことができないことを示しています。

written by Radon8472 @2018-06-06 14:11:30Z

回答 4 written by Shwetabh Shekhar @2018-02-01 12:22:08Z
4

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ヘッダーオプションを選択する必要があります。

回答 5 written by Marcelo Rafael @2018-06-21 19:15:19Z
4

1)端末を開いて入力

npm install -g http-server

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

http-server ./

3)端末の出力を読むと、 http://localhost:8080と表示されます。

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

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

回答 6 written by Liam Appleyard @2018-11-01 14:02:03Z
3

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

しかし、 myProject\Content\ようにプロジェクトのルートフォルダにファイルを配置し、そのように参照したとします。

<img src="/Content/myfolder/myimage.jpg" />
回答 7 written by Community @2017-05-23 10:30:55Z
1

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

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

また見なさい:

コメント 1

規則の理由は技術的より社会的です。ブラウザは既にドメイン外のリソース(SOP、CDNスクリプト、ディープリンクIMGタグなど)へのプログラムによるアクセスを防ぐのには良い仕事をします。スクリプトはそれが何を表示しているのかません...

written by わかり @2016-08-17 23:09:27Z

コメント 2

@ dandavisはい、その通りです。それでもこれを防ぐのは良いことだと思います。いくつかの実装のバグ(あなたがローカルリソースを開くことができないなら、おそらくもっと安全である)を除いて、他の人々があなたのスクリーンを見ているいくつかの特定のシナリオがありえます。あなたのローカルファイルシステム上の場所を推測することができるいくつかのウェブサイトを訪問することによってあなたのイメージ(潜在的にクレジットカードまたはプライベートイメージ)を開くことができないことを望みません...

written by Prak @2016-08-17 23:55:39Z

回答 8 written by Ruberandinda Patience @2019-01-08 09:43:07Z
1

この問題は、サーバー側の言語として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);

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

ありがとう