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

98

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.

KBH
quelle
Verwenden Sie <input type=file>, um Zugriff auf lokale Ressourcen zu erhalten
Dandavis

Antworten:

62

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

Woody
quelle
1
Woody: Vielen Dank! Dieser Ansatz hat mir geholfen. Ich führe unter Windows 10 einen lokalen Tomcat + einen lokalen AWS S3-Bucket aus. Jetzt kann ich zwischen dem Live-AWS-Server und einem lokalen Server wechseln. Prost. Q
user1723453
20

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.

Geben Sie hier die Bildbeschreibung ein

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.

Mike Gledhill
quelle
Hört sich gut an, aber wie gehen Sie mit der Autorisierung um (Leseberechtigungen)? Was ist, wenn nicht alle Benutzer eine bestimmte Datei anzeigen dürfen? Müssen Sie den Lesevorgang nicht im Namen des anfordernden Benutzers durchführen?
Timi
Warum verwenden Sie einen Webclient, um eine lokale Datei zu öffnen? Und für mich versucht es, C: \ SomeNetworkPath \ ...
Kev
Wenn wir keinen Winkel verwenden, ist das noch möglich?
Ahmad.Tr
Dies war eine nützliche Antwort, aber es würde sich sehr stark auf die Ladezeit der Webseite auswirken, wenn Hunderte von Bildern über diesen Ashx-Griff so gerendert und heruntergeladen werden.
Jamshaid Kamran
17

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

Scott
quelle
4
Ich habe versucht, der Lösung "c: \ path \ chrome.exe" -allow-file-access-from-files zu folgen, kann sie jedoch nicht öffnen. Bitte testen Sie diese Website fiddle.jshell.net/q326vLya/3 . Was mache ich falsch?
KBH
5
Auf GoogleChrome 66 funktioniert es nicht. Chrome beginnt mit diesem Flag, zeigt jedoch weiterhin an, dass die lokale Datei nicht geöffnet werden kann.
Radon8472
16

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');;

Alex
quelle
http-Server hat ein Problem, das jetzt Fehler verursacht - Sie können es jedoch auf 0,9 herabstufen, um es zu beheben - siehe stackoverflow.com/questions/56364464/…
Brian Burns
Dies war die einfachste Antwort für mich. Arbeitete 100%. Vielen Dank!
Robrecord
9

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.

Shwetabh Shekhar
quelle
5

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" />
PontiusTheBarbarian
quelle
4

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

Ruberandinda Geduld
quelle
2

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);
}
Schah
quelle
2

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
Andrew Zhilin
quelle
1

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:

Prak
quelle
Der Grund für die Regel ist eher sozialer als technischer Natur. Browser macht einen guten Job bereits programmatischen Zugriff auf Offline-Domänenressourcen zu verhindern (z. B. SOP, CDN - Skripte, tief verlinkte IMG - Tags, etc.), aber es Freaks Leute, um zu sehen , ihre lokalen Inhalte in einem Browser - Fenstern, auch wenn die Skript kann nicht sagen, was es zeigt ...
Dandavis
1
@dandavis ja, du hast recht, trotzdem glaube ich, dass es gut sein kann, dies zu verhindern. Abgesehen von Fehlern in einigen Implementierungen (wenn Sie eine lokale Ressource nicht öffnen können, sind Sie wahrscheinlich sicherer), kann es bestimmte Szenarien geben, in denen andere Personen auf Ihren Bildschirm schauen (Apps zur Bildschirmfreigabe oder einfach hinter Ihrem Rücken in Ihrem Büro) ) und Sie möchten nicht, dass Ihre Bilder (möglicherweise eine Kreditkarte oder ein privates Bild) nur durch den Besuch einiger Websites geöffnet werden können, die den Speicherort in Ihrem lokalen Dateisystem erraten können ...
Prak
1

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;
Maishidh Mandviwala
quelle
0

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);
    }
}
rgoot
quelle
0

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.

Tanmay_Gupta
quelle
0

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```
wimblywombly
quelle