は、ローカルファイルを開くことができません - Chromeを：クロームの バージョン：ローカルリソース

Question

テストブラウザをロードするために許可されていません52.0.2743.116

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

function run(){ 

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

    window.open(URL, null); 

} 
run(); 

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

私に任意の適切な提案をお願いします。

Answer 1

クローム特異的にブロックするローカルファイルへのアクセス、セキュリティ上の理由から、この方法を。ここで

がChromeでフラグを回避（と脆弱性へのあなたのシステムを開く）する記事です：

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

Answer 2

あなたがこれを行うことができれば、それはあなたがあなたのファイルシステムにアクセスできるよう、大きなセキュリティ上の問題を表しており、潜在的に存在し、利用可能なデータに基づいて行動します...幸いにも、それはあなたが何をしようとして行うことはできません。あなたがアクセスするローカルリソースを必要とする場合

は、あなたのマシン上のWebサーバーを起動しようとすることができ、この場合には、あなたの方法を動作します。 Chromeの設定で動作するなどの他の回避策は可能ですが、私はいつも清潔な方法、ローカルWebサーバーのインストール、別のポート（おそらく、それほど難しいことではありません）を好みます。

も参照してください：

• Open local files(file://) using Chrome
• Opening local files from chrome

Answer 3

わかりました人々、私は完全にこのエラーメッセージの背後にあるセキュリティ上の理由を理解し、時には、我々回避策が必要です...ここに私のものがあります。これはASP.Netを使用しています（JavaScriptではなく、この質問に基づいています）が、うまくいけば誰かに役立つでしょう。

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

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

もともと、私のWebページには、直接ファイルを指し<a href..>要素を作成しようとしましたが、ユーザーがこれらのリンクをクリックしたとき、これは「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> 

ソリューションは

$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); 
} 

...機能自体は非常に簡単です

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

...私の角コントローラ内の関数を呼び出すために、このコードを持つもの<a href..>の要素を交換することでした

そして、私のASPで 。

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; 
      } 
     } 
    } 

そして、それはそれだ：ネットプロジェクト、私はこのコードを含まDownloadExternalFile.aspxと呼ばれるハンドラファイルを追加しました。

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

このハンドラコードはファイルを読み込み、その内容をHTTP応答に戻します。

そして、ジョブが完了し、ウェブページが外部ファイルを開きます。

Phew！ここでもChromeがこの "Not allowed to load local resources"例外をスローする理由がありますので、これを慎重に実行してください...しかし、私はこのコードをこの制限を回避するためのかなり簡単な方法であることを示すために投稿しています。

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

Answer 4

たちは教室でたくさんChromeを使用して、それがローカルファイルでの作業に必要不可欠である...

を、これは古いの一種である知っているが、このような多くの質問を参照してください。

私たちが使っているのは "Webサーバーfor Chrome"です。あなたはそれを起動し、作業したいフォルダを選択してURLに行きます（127.0.0.1:portのように選択します）

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

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

Answer 5

Web Server for Chromeを使用して回避策があります。
手順は次のとおりです。

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