Cannot open local file - Chrome Not allowed to load local resource

Question

Test browser   Version of Chrome  52 0 2743 116  It is a simple javascript that is to open an image file from local like  C  002 jpg   function run        var URL    file    C  002 jpg       window open URL  null      run      Here is my sample code  https   fiddle jshell net q326vLya 3   Please give me any suitable suggestions

User · Answer

If you have php installed - you can use built-in server  Just open target dir with files and run  php -S localhost 8001

User · Answer

Okay folks  I completely understand the security reasons behind this error message  but sometimes  we do need a workaround    and here s mine   It uses ASP Net  rather than JavaScript  which this question was based on  but it ll hopefully be useful to someone   Our in-house app has a webpage where users can create a list of shortcuts to useful files spread throughout our network   When they click on one of these shortcuts  we want to open these files    but of course  Chrome s error prevents this     This webpage uses AngularJS 1 x to list the various shortcuts     Originally  my webpage was attempting to directly create an  lt a href   gt  element pointing at the files  but this produced the  Not allowed to load local resource  error when a user clicked on one of these links    lt div ng-repeat  sc in listOfShortcuts  id    sc ShtCut ID    class  cssOneShortcutRecord   gt       lt div class  cssShortcutIcon  gt           lt img ng-src     GetIconName sc ShtCut PathFilename       gt       lt  div gt       lt div class  cssShortcutName  gt           lt a ng-href     sc ShtCut PathFilename     ng-attr-title    sc ShtCut Tooltip    target   blank   gt    sc ShtCut Name    lt  a gt       lt  div gt   lt  div gt    The solution was to replace those  lt a href   gt  elements with this code  to call a function in my Angular controller      lt div ng-click  OpenAnExternalFile sc ShtCut PathFilename     gt         sc ShtCut Name     lt  div gt    The function itself is very simple      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       And in my ASP Net project  I added a Handler file called DownloadExternalFile aspx which contained this code   namespace MikesProject Handlers            lt summary gt          Summary description for DownloadExternalFile          lt  summary gt      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                                  And that s it   Now  when a user clicks on one of my Shortcut links  it calls the OpenAnExternalFile function  which opens this  ashx file  passing it the path filename of the file we want to open   This Handler code loads the file  then passes it s contents back in the HTTP response   And  job done  the webpage opens the external file   Phew    Again - there is a reason why Chrome throws this  Not allowed to load local resources  exception  so tread carefully with this    but I m posting this code just to demonstrate that this is a fairly simple way around this limitation   Just one last comment  the original question wanted to open the file  C  002 jpg    You can t do this   Your website will sit on one server  with it s own C  drive  and has no direct access to your user s own C  drive   So the best you can do is use code like mine to access files somewhere on a network drive

User · Answer

I ve encounterd this problem  and here is my solution for Angular  I wrapped my Angular s asset folder in encodeURIComponent   function  It worked  But still  I d like to know more about the risk of this solution if there s any      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

User · Answer

Google Chrome does not allow to load local resources because of the security  Chrome need http url  Internet Explorer and Edge allows to load local resources  but Safari  Chrome  and Firefox doesn t allows to load local resources   Go to file location and start the Python Server from there   python -m SimpleHttpServer  then put that url into function   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

User · Answer

This issue come when I am using PHP as server side language and the work around was to generate base64 enconding of my image before sending the result to client   path    E  pat rwanda png    type   pathinfo  path  PATHINFO EXTENSION    data   file get contents  path    base64    data image      type     base64     base64 encode  data     I think may give someone idea  to create his own work around  Thanks

User · Answer

Know this is kind of old  but see many questions like this     We use Chrome a lot in the classroom and it is a must to working with local files   What we have been using is  Web Server for Chrome   You start it up  choose the folder wishing to work with and go to URL  like 127 0 0 1 port you chose   It is a simple server and cannot use PHP but for simple work  might be your solution   https   chrome google com webstore detail web-server-for-chrome ofhbbkphhbklhfoeikjpcbhemlocgigb

User · Answer

There is a workaround using Web Server for Chrome  Here are the steps    Add the Extension to chrome  Choose the folder  C  images  and launch the server  on your desired port    Now easily access your local file   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  You might need to select the CORS Header option from advanced setting incase you face any cross origin access error

User · Answer

You won t be able to load an image outside of the project directory or from a user level directory  hence the  cannot access local resource warning    But if you were to place the file in a root folder of your project like in  rootFolder  Content my-image jpg and referenced it like so    lt img src   Content my-image jpg    gt

User · Answer

Chrome and other Browser restrict the access of a server to local files due to security reasons  However you can open the browser in allowed access mode  Just open the terminal and go to the folder where chrome exe is stored and write the following command   chrome exe --allow-file-access-from-files   Read this for more details  This way  However  didn t work for me so I made a different route for every file in a particular directory  Therefore  going to that path meant opening that file    function getroutes list        list forEach function element             app get      element  function req  res                 res sendFile   dirname     public extracted     element                            I called this function passing the list of filename in the directory   dirname public extracted and it created a different route for each filename which I was able to render on server side

User · Answer

1  Open your terminal and type  npm install -g http-server    2  Go to the root folder that you want to serve you files and type    http-server     3  Read the output of the terminal  something kinda http   localhost 8080 will appear   Everything on there will be allowed to be got  Example   background  url  http   localhost 8080 waw png

User · Answer

You just need to replace all image network paths to byte strings in stored Encoded HTML string  For this you required HtmlAgilityPack to convert Html string to Html document  https   www nuget org packages HtmlAgilityPack  Find Below code to convert each image src network path or local path  to byte sting  It will definitely display all images with network path or local path  in IE chrome and firefox   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   gt                string src   e GetAttributeValue  src   null                 return  string IsNullOrEmpty src     amp  amp  src StartsWith  data image                ToList        ForEach x   gt                    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

User · Answer

Chrome specifically blocks local file access this way for security reasons   Here s a workaround to enable the flag in Chrome  and open your system up to vulnerabilities       c  Program Files  x86  google chrome Application chrome exe --allow-file-access-from-files

User · Answer

If you could do this  it will represent a big security problem  as you can access your filesystem  and potentially act on the data available there    Luckily it s not possible to do what you re trying to do   If you need local resources to be accessed  you can try to start a web server on your machine  and in this case your method will work  Other workarounds are possible  such as acting on Chrome settings  but I always prefer the clean way  installing a local web server  maybe on a different port  no  it s not so difficult     See also    Open local files file     using Chrome Opening local files from chrome

User · Answer

This solution worked for me in PHP  It opens the PDF in the 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

[javascript] Cannot open local file - Chrome: Not allowed to load local resource

Examples related to javascript

Examples related to jquery

Examples related to google-chrome

Examples related to web

Examples related to window.open