Lokale Datei kann nicht geöffnet werden - Chrome: Lokale Ressource darf nicht geladen werden

Testbrowser: Version von Chrome: 52.0.2743.116

Es ist ein einfaches Javascript, mit dem eine Bilddatei von lokal wie 'C: \ 002.jpg' geöffnet wird.

function run(){

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

   window.open(URL, null);

}
run();

Hier ist mein Beispielcode. https://fiddle.jshell.net/q326vLya/3/

Bitte geben Sie mir geeignete Vorschläge.

Wissen Sie, dass dies etwas alt ist, aber sehen Sie viele Fragen wie diese ...

Wir verwenden Chrome häufig im Klassenzimmer und es ist ein Muss, mit lokalen Dateien zu arbeiten.

Was wir verwendet haben, ist "Webserver für Chrome". Sie starten es, wählen den Ordner aus, mit dem Sie arbeiten möchten, und gehen zur URL (wie 127.0.0.1:port, den Sie ausgewählt haben).

Es ist ein einfacher Server und kann kein PHP verwenden, aber für einfache Arbeit könnte dies Ihre Lösung sein:

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

Okay Leute, ich verstehe die Sicherheitsgründe für diese Fehlermeldung vollständig, aber manchmal brauchen wir eine Problemumgehung ... und hier ist meine. Es verwendet ASP.Net (anstelle von JavaScript, auf dem diese Frage basiert), aber es wird hoffentlich für jemanden nützlich sein.

Unsere interne App verfügt über eine Webseite, auf der Benutzer eine Liste mit Verknüpfungen zu nützlichen Dateien erstellen können, die über unser Netzwerk verteilt sind. Wenn sie auf eine dieser Verknüpfungen klicken, möchten wir diese Dateien öffnen ... aber natürlich verhindert der Chrome-Fehler dies.

Diese Webseite verwendet AngularJS 1.x, um die verschiedenen Verknüpfungen aufzulisten.

Ursprünglich versuchte meine Webseite, direkt ein <a href..>Element zu erstellen , das auf die Dateien verweist. Dies führte jedoch zu dem Not allowed to load local resourceFehler " ", wenn ein Benutzer auf einen dieser Links klickte.

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

Die Lösung bestand darin, diese <a href..>Elemente durch diesen Code zu ersetzen und eine Funktion in meinem Angular-Controller aufzurufen ...

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

Die Funktion selbst ist sehr einfach ...

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

Und in meinem ASP.Net-Projekt habe ich eine Handler-Datei namens aufgerufen, DownloadExternalFile.aspxdie diesen Code enthielt:

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

Und das ist es.

Wenn ein Benutzer auf einen meiner Verknüpfungslinks klickt, ruft er die OpenAnExternalFileFunktion auf, die diese .ashx-Datei öffnet und ihr den Pfad + Dateinamen der Datei übergibt, die wir öffnen möchten.

Dieser Handler-Code lädt die Datei und gibt ihren Inhalt in der HTTP-Antwort zurück.

Und wenn die Arbeit erledigt ist, öffnet die Webseite die externe Datei.

Puh! Wieder - es gibt einen Grund, warum Chrome diese " Not allowed to load local resources" Ausnahme auslöst. Gehen Sie also vorsichtig damit um ... aber ich poste diesen Code nur, um zu demonstrieren, dass dies ein ziemlich einfacher Weg ist, um diese Einschränkung zu umgehen.

Nur ein letzter Kommentar: Die ursprüngliche Frage wollte die Datei " C:\002.jpg" öffnen . Das kannst du nicht machen. Ihre Website befindet sich auf einem Server (mit eigenem Laufwerk C:) und hat keinen direkten Zugriff auf das eigene Laufwerk C: Ihres Benutzers. Das Beste, was Sie tun können, ist, Code wie meinen zu verwenden, um auf Dateien irgendwo auf einem Netzwerklaufwerk zuzugreifen.

Chrome blockiert aus Sicherheitsgründen speziell den lokalen Dateizugriff auf diese Weise.

Hier ist eine Problemumgehung, um das Flag in Chrome zu aktivieren (und Ihr System für Schwachstellen zu öffnen):

c: \ Programme (x86) \ google \ chrome \ Application \ chrome.exe - Erlaubt den Dateizugriff aus Dateien

1) Öffnen Sie Ihr Terminal und geben Sie ein

npm install -g http-server

2) Wechseln Sie zu dem Stammordner, in dem Sie Ihre Dateien bereitstellen möchten, und geben Sie Folgendes ein:

http-server ./

3) Lesen Sie die Ausgabe des Terminals, http://localhost:8080es erscheint etwas .

Alles dort darf bekommen werden. Beispiel:

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

Es gibt eine Problemumgehung mit Web Server für Chrome .
Hier sind die Schritte:

1. Fügen Sie die Erweiterung zu Chrome hinzu.
2. Wählen Sie den Ordner (C: \ images) und starten Sie den Server an Ihrem gewünschten Port.

Greifen Sie jetzt einfach auf Ihre lokale Datei zu:

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: Möglicherweise müssen Sie die Option CORS-Header aus der erweiterten Einstellung auswählen, falls ein Fehler beim Zugriff zwischen verschiedenen Ursprüngen auftritt.

Sie können kein Image außerhalb des Projektverzeichnisses oder aus einem Verzeichnis auf Benutzerebene laden, daher wird die Warnung "Zugriff auf lokale Ressourcen nicht möglich" angezeigt.

Wenn Sie die Datei jedoch wie in einem Stammordner Ihres Projekts ablegen {rootFolder}\Content\my-image.jpgund wie folgt referenzieren würden:

<img src="/Content/my-image.jpg" />

Dieses Problem tritt auf, wenn ich PHP als serverseitige Sprache verwende und das Problem darin bestand, eine Base64-Codierung meines Images zu generieren, bevor das Ergebnis an den Client gesendet wird

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

Ich denke, vielleicht gibt es jemandem eine Idee, seine eigene Arbeit zu kreieren

Vielen Dank

In Google Chrome können lokale Ressourcen aus Sicherheitsgründen nicht geladen werden. Chrome benötigt eine http-URL. Mit Internet Explorer und Edge können lokale Ressourcen geladen werden, mit Safari, Chrome und Firefox können jedoch keine lokalen Ressourcen geladen werden.

Gehen Sie zum Dateispeicherort und starten Sie den Python-Server von dort aus.

python -m SimpleHttpServer

dann setzen Sie diese URL in Funktion:

function run(){
var URL = "http://172.271.1.20:8000/" /* http://0.0.0.0:8000/ or http://127.0.0.1:8000/; */
window.open(URL, null);
}

Wenn Sie PHP installiert haben, können Sie den eingebauten Server verwenden. Öffnen Sie einfach das Zielverzeichnis mit Dateien und führen Sie es aus

php -S localhost:8001

Wenn Sie dies tun könnten, würde dies ein großes Sicherheitsproblem darstellen, da Sie auf Ihr Dateisystem zugreifen und möglicherweise auf die dort verfügbaren Daten reagieren können ... Glücklicherweise ist es nicht möglich, das zu tun, was Sie versuchen.

Wenn Sie auf lokale Ressourcen zugreifen müssen, können Sie versuchen, einen Webserver auf Ihrem Computer zu starten. In diesem Fall funktioniert Ihre Methode. Andere Problemumgehungen sind möglich, z. B. das Eingreifen in Chrome-Einstellungen, aber ich bevorzuge immer die saubere Methode, einen lokalen Webserver zu installieren, möglicherweise an einem anderen Port (nein, das ist nicht so schwierig!).

Siehe auch:

• Öffnen Sie lokale Dateien (Datei: //) mit Chrome
• Öffnen lokaler Dateien aus Chrome

Sie müssen nur alle Bildnetzwerkpfade durch Bytezeichenfolgen in gespeicherten codierten HTML-Zeichenfolgen ersetzen. Dazu benötigen Sie HtmlAgilityPack, um die HTML-Zeichenfolge in ein HTML-Dokument zu konvertieren. https://www.nuget.org/packages/HtmlAgilityPack

Suchen Sie den folgenden Code, um jeden Bild-src-Netzwerkpfad (oder lokalen Pfad) in Byte-Sting zu konvertieren. Es werden definitiv alle Bilder mit Netzwerkpfad (oder lokalem Pfad) in IE, Chrome und Firefox angezeigt.

string encodedHtmlString = Emailmodel.DtEmailFields.Rows[0]["Body"].ToString();

// Decode the encoded string.
StringWriter myWriter = new StringWriter();
HttpUtility.HtmlDecode(encodedHtmlString, myWriter);
string DecodedHtmlString = myWriter.ToString();

//find and replace each img src with byte string
HtmlDocument document = new HtmlDocument();
document.LoadHtml(DecodedHtmlString);
document.DocumentNode.Descendants("img")
    .Where(e =>
    {
        string src = e.GetAttributeValue("src", null) ?? "";
        return !string.IsNullOrEmpty(src);//&& src.StartsWith("data:image");
    })
    .ToList()
    .ForEach(x =>
        {
        string currentSrcValue = x.GetAttributeValue("src", null);                                
        string filePath = Path.GetDirectoryName(currentSrcValue) + "\\";
        string filename = Path.GetFileName(currentSrcValue);
        string contenttype = "image/" + Path.GetExtension(filename).Replace(".", "");
        FileStream fs = new FileStream(filePath + filename, FileMode.Open, FileAccess.Read);
        BinaryReader br = new BinaryReader(fs);
        Byte[] bytes = br.ReadBytes((Int32)fs.Length);
        br.Close();
        fs.Close();
        x.SetAttributeValue("src", "data:" + contenttype + ";base64," + Convert.ToBase64String(bytes));                                
    });

string result = document.DocumentNode.OuterHtml;
//Encode HTML string
string myEncodedString = HttpUtility.HtmlEncode(result);

Emailmodel.DtEmailFields.Rows[0]["Body"] = myEncodedString;

Diese Lösung hat bei mir in PHP funktioniert. Es öffnet die PDF im Browser.

// $path is the path to the pdf file
public function showPDF($path) {
    if($path) {
        header("Content-type: application/pdf");
        header("Content-Disposition: inline; filename=filename.pdf");
        @readfile($path);
    }
}

Chrome und andere Browser beschränken aus Sicherheitsgründen den Zugriff eines Servers auf lokale Dateien. Sie können den Browser jedoch im zulässigen Zugriffsmodus öffnen. Öffnen Sie einfach das Terminal und gehen Sie zu dem Ordner, in dem chrome.exe gespeichert ist, und schreiben Sie den folgenden Befehl.

chrome.exe --allow-file-access-from-files

Lesen Sie dies für weitere Details

Diese Methode hat jedoch bei mir nicht funktioniert, sodass ich für jede Datei in einem bestimmten Verzeichnis eine andere Route erstellt habe. Zu diesem Pfad zu gehen bedeutete daher, diese Datei zu öffnen.

function getroutes(list){ 
    list.forEach(function(element) { 
        app.get("/"+ element, function(req, res) { 
            res.sendFile(__dirname + "/public/extracted/" + element); 
       }); 
   }); 
}

Ich habe diese Funktion aufgerufen und die Liste der Dateinamen im Verzeichnis übergeben. __dirname/public/extractedFür jeden Dateinamen, den ich auf der Serverseite rendern konnte, wurde eine andere Route erstellt.

Ich bin auf dieses Problem gestoßen, und hier ist meine Lösung für Angular. Ich habe den Asset-Ordner meines Angulars in die Funktion encodeURIComponent () eingeschlossen. Es funktionierte. Trotzdem würde ich gerne mehr über das Risiko dieser Lösung erfahren, wenn es welche gibt:

`` `const URL = ${encodeURIComponent(/assets/office/file_2.pdf )} window.open (URL)

I used Angular 9, so this is my url when I clicked open local file:
```http://localhost:4200/%2Fassets%2Foffice%2Ffile_2.pdf```