wake-up-neo.net

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 aus einer lokalen Datei wie 'C:\002.jpg' geöffnet werden kann.

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.

65
KBH

Wisse, dass dies etwas alt ist, aber sieh dir viele Fragen wie diese an ...

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

Was wir verwendet haben, ist "Web Server for Chrome". Sie starten es, wählen den Ordner, mit dem Sie arbeiten möchten, und gehen zur URL (wie 127.0.0.1:port, den Sie gewählt haben)

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

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

43
Woody

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

Unsere hauseigene App verfügt über eine Webseite, auf der Benutzer eine Liste mit Verknüpfungen zu nützlichen Dateien erstellen können, die sich über das gesamte Netzwerk verteilen. Wenn sie auf eine dieser Verknüpfungen klicken, möchten wir diese Dateien öffnen. Der Fehler von Chrome verhindert dies jedoch.

enter image description here

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 zeigte. Dies verursachte jedoch den Fehler "Not allowed to load local resource", als 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 war, diese <a href..> Elemente durch diesen Code zu ersetzen, um 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 DownloadExternalFile.aspx hinzugefügt, die 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 nun auf einen meiner Verknüpfungslinks klickt, ruft er die Funktion OpenAnExternalFile auf, mit der diese .ashx-Datei geöffnet und der Pfad + Dateiname der zu öffnenden Datei übergeben werden.

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

Nach Abschluss der Arbeit öffnet die Webseite die externe Datei.

Puh! Wieder - es gibt einen Grund, warum Chrome diese Ausnahme "Not allowed to load local resources" 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.

Nur ein letzter Kommentar: Die ursprüngliche Frage wollte die Datei "C:\002.jpg" öffnen. Sie können das nicht . 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 Netzlaufwerk zuzugreifen.

15
Mike Gledhill

Chrome blockiert aus Sicherheitsgründen den Zugriff auf lokale Dateien auf diese Weise.

Hier ist ein Artikel, um das Flag in Chrome zu umgehen (und Ihr System für Schwachstellen zu öffnen):

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

13
Scott

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 CORS-Header-Option in den erweiterten Einstellungen auswählen, falls Sie auf einen Fehler oder einen Fehler beim Zugriff auf Cross-Origin stoßen.

5

1) Öffnen Sie Ihr Terminal und geben Sie ein

npm install -g http-server

2) Wechseln Sie in den Stammordner, den Sie für Ihre Dateien verwenden möchten, und geben Sie Folgendes ein:

http-server ./

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

Alles, was dort drauf ist, darf mitgenommen werden. Beispiel:

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

5
Marcelo Rafael

Sie können kein Bild außerhalb des Projektverzeichnisses oder aus einem Verzeichnis auf Benutzerebene laden, daher kann die Warnung "Kein Zugriff auf lokale Ressourcen" angezeigt werden.

Wenn Sie die Datei jedoch wie in {rootFolder}\Content\my-image.jpg in einem Stammordner Ihres Projekts ablegen und darauf verweisen möchten, gehen Sie wie folgt vor:

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

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 zugreifen können ... Zum Glück 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. Ich bevorzuge jedoch immer die saubere Installation eines lokalen Webservers, möglicherweise an einem anderen Port (nein, das ist nicht so schwierig!).

Siehe auch:

1
Prak

Dieses Problem tritt auf, wenn ich PHP als serverseitige Sprache verwende und die Aufgabe darin bestand, eine Base64-Codierung meines Bildes 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, kann jemand eine Idee geben, um seine eigene Arbeit zu schaffen

Vielen Dank

Sie müssen nur alle Bildnetzwerkpfade zu Byte-Zeichenfolgen in der gespeicherten codierten HTML-Zeichenfolge ersetzen. Zu diesem Zweck benötigen Sie HtmlAgilityPack, um eine HTML-Zeichenfolge in ein HTML-Dokument zu konvertieren. https://www.nuget.org/packages/HtmlAgilityPack

Suchen Sie nach dem folgenden Code, um jeden Bild-Quellnetzwerkpfad (oder lokalen Pfad) in Byte-Stich 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;
0

Diese Lösung funktionierte für mich in PHP. Es öffnet sich das 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);
    }
}
0
rgoot

In Google Chrome können aus Sicherheitsgründen keine lokalen Ressourcen geladen werden. Chrome benötigen 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);
}
0
shah