Impossible d'ouvrir un fichier local – Chrome: Impossible de charger des ressources locales

Chrome bloque spécifiquement l'accès aux fichiers locaux de cette façon pour des raisons de sécurité.

Voici un article pour contourner le drapeau dans Chrome (et ouvrir votre système face aux vulnérabilités):

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

D'accord, je comprends parfaitement les raisons de sécurité de ce message d'erreur, mais parfois, nous avons besoin d'une solution de contournement … et voici le mien. Il utilise ASP.Net (plutôt que JavaScript, sur lequel cette question était basée), mais il sera utile pour quelqu'un d'être utile.

Notre application interne a une page Web où les utilisateurs peuvent créer une liste de raccourcis vers des fichiers utiles répartis sur l'ensemble de notre réseau. Quand ils cliquent sur l'un de ces raccourcis, nous voulons ouvrir ces fichiers … mais bien sûr, l'erreur de Chrome empêche cela.

Cette page Web utilise AngularJS 1.x pour répertorier les différents raccourcis.

À l'origine, ma page Web essayait de créer directement un élément <a href..> qui pointait sur les fichiers, mais cela produisait l'erreur " Not allowed to load local resource " lorsqu'un utilisateur a cliqué sur l'un de ces liens.

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

La solution était de remplacer les éléments <a href..> par ce code, pour appeler une fonction dans mon contrôleur angulaire …

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

La fonction elle-même est très simple …

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

Et dans mon projet ASP.Net, j'ai ajouté un fichier Handler appelé DownloadExternalFile.aspx qui contenait ce code:

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

Et c'est tout.

Maintenant, lorsqu'un utilisateur clique sur l'un de mes liens Raccourci, il appelle la fonction OpenAnExternalFile , qui ouvre ce fichier .ashx, en le passant le chemin + filename du fichier que nous voulons ouvrir.

Ce code de gestionnaire charge le fichier, puis passe son contenu dans la réponse HTTP.

Et, travail effectué, le site Web ouvre le fichier externe.

Phew ! Encore une fois – il y a une raison pour laquelle Chrome lance cette exception « Not allowed to load local resources », alors passez avec attention … mais je publie ce code pour démontrer que c'est un moyen assez simple de cette limitation.

Juste un dernier commentaire: la question originale voulait ouvrir le fichier " C:\002.jpg ". Vous ne pouvez pas le faire. Votre site Web sera installé sur un seul serveur (avec son propre C: lecteur) et n'a aucun accès direct au lecteur C: de votre utilisateur. Donc, le mieux que vous pouvez faire est d'utiliser un code comme le mien pour accéder aux fichiers quelque part sur un lecteur réseau.

Si vous pouviez le faire, cela représenterait un gros problème de sécurité, car vous pouvez accéder à votre système de fichiers et peut-être agir sur les données disponibles là-bas … Heureusement, il n'est pas possible de faire ce que vous essayez de faire.

Si vous avez besoin d'accéder aux ressources locales, vous pouvez essayer de démarrer un serveur Web sur votre machine et, dans ce cas, votre méthode fonctionnera. D'autres solutions de rechange sont possibles, par exemple en agissant sur les paramètres de Chrome, mais je préfère toujours la manière propre, en installant un serveur Web local, peut-être sur un autre port (non, ce n'est pas si difficile!).

Voir également:

• Ouvrez les fichiers locaux (fichier: //) à l'aide de Chrome
• Ouverture de fichiers locaux à partir de chrome