Imansible aprire il file locale – Chrome: non è consentito caricare la risorsa locale

Browser di prova: versione di Chrome: 52.0.2743.116

È un semplice javascript che è quello di aprire un file immagine da locale come ‘C: \ 002.jpg’

function run(){ var URL = "file:///C:\002.jpg"; window.open(URL, null); } run(); 

Ecco il mio codice di esempio. https://fiddle.jshell.net/q326vLya/3/

Per favore, dammi qualche suggerimento adatto.

Sappi che è un po ‘vecchio, ma vedi molte domande come questa …

Usiamo molto Chrome in class ed è necessario lavorare con i file locali.

Quello che abbiamo usato è “Web Server per Chrome”. Lo avvii, scegli la cartella con cui desideri lavorare e vai all’URL (come 127.0.0.1:port che hai scelto)

È un server semplice e non può usare PHP, ma per un lavoro semplice, potrebbe essere la soluzione:

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

Chrome in particolare blocca l’accesso ai file locali in questo modo per motivi di sicurezza.

Ecco un articolo per risolvere il problema con Chrome (e aprire il tuo sistema alle vulnerabilità):

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

Va bene gente, capisco perfettamente le ragioni di sicurezza dietro questo messaggio di errore, ma a volte, abbiamo bisogno di una soluzione alternativa … ed ecco la mia. Utilizza ASP.Net (piuttosto che JavaScript, su cui questa domanda era basata), ma si spera che possa essere utile a qualcuno.

La nostra app in-house ha una pagina web in cui gli utenti possono creare un elenco di scorciatoie a file utili sparsi nella nostra rete. Quando fanno clic su una di queste scorciatoie, vogliamo aprire questi file … ma, naturalmente, l’errore di Chrome lo impedisce.

inserisci la descrizione dell'immagine qui

Questa pagina Web utilizza AngularJS 1.x per elencare le varie scorciatoie.

Inizialmente, la mia pagina Web stava tentando di creare direttamente un elemento che punta ai file, ma questo ha prodotto l’errore ” Not allowed to load local resource ” quando un utente ha fatto clic su uno di questi link.

  

La soluzione era quella di sostituire quegli elementi con questo codice, per chiamare una funzione nel mio controller angular …

 
{{ sc.ShtCut_Name }}

La funzione stessa è molto semplice …

 $scope.OpenAnExternalFile = function (filename) { // // Open an external file (ie 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); } 

E nel mio progetto ASP.Net, ho aggiunto un file Handler chiamato DownloadExternalFile.aspx che conteneva questo codice:

 namespace MikesProject.Handlers { ///  /// Summary description for DownloadExternalFile ///  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; } } } 

E questo è tutto.

Ora, quando un utente fa clic su uno dei miei collegamenti a scelta rapida, chiama la funzione OpenAnExternalFile , che apre questo file .ashx, passandogli il percorso + nomefile del file che vogliamo aprire.

Questo codice Handler carica il file, quindi restituisce il suo contenuto nella risposta HTTP.

E, fatto, la pagina web apre il file esterno.

Uff! Ancora una volta – c’è un motivo per cui Chrome lancia questa eccezione ” Not allowed to load local resources “, quindi segui attentamente questo … ma sto postando questo codice solo per dimostrare che questo è un modo abbastanza semplice per aggirare questa limitazione.

Solo un ultimo commento: la domanda originale voleva aprire il file ” C:\002.jpg “. Non puoi farlo. Il tuo sito Web si posizionerà su un server (con la propria C: unità) e non ha accesso diretto all’unità C: dell’utente. Quindi il meglio che puoi fare è usare un codice come il mio per accedere ai file da qualche parte su un disco di rete.

C’è una soluzione alternativa che utilizza Web Server per Chrome .
Ecco i passaggi:

  1. Aggiungi l’estensione a Chrome.
  2. Scegli la cartella (C: \ images) e avvia il server sulla porta desiderata.

Ora accedi facilmente al tuo file locale:

 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: potrebbe essere necessario selezionare l’opzione Intestazione CORS dall’impostazione avanzata in caso di errori di accesso all’origine incrociata.

Non sarà ansible caricare una parte esterna della directory del progetto e dalla directory del livello utente, quindi “non può accedere all’avviso delle risorse locali”.

Ma se dovessi posizionare il file in una cartella di root del tuo progetto come in myProject\Content\ e lo hai fatto riferimento in questo modo:

  

1) Apri il tuo terminale e digita

npm install -g http-server

2) Vai alla cartella principale a cui vuoi servire i tuoi file e digita:

http-server ./

3) Leggi l’output del terminale, qualcosa di simile a http://localhost:8080 apparirà.

Tutto quello che ci sarà sarà permesso. Esempio:

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

Se lo si può fare, rappresenterà un grosso problema di sicurezza, dato che è ansible accedere al proprio filesystem e potenzialmente agire sui dati disponibili lì … Fortunatamente non è ansible fare ciò che si sta tentando di fare.

Se è necessario accedere alle risorse locali, è ansible provare ad avviare un server Web sul proprio computer, e in questo caso il metodo funzionerà. Sono possibili altre soluzioni, come ad esempio agire sulle impostazioni di Chrome, ma preferisco sempre il modo pulito, l’installazione di un server Web locale, magari su una porta diversa (no, non è così difficile!).

Guarda anche:

  • Apri i file locali (file: //) utilizzando Chrome
  • Apertura di file locali da chrome