Не удается открыть локальный файл - Chrome: не разрешено загружать локальный ресурс

Тестовый браузер: Версия Chrome: 52.0.2743.116

Это простой javascript, который предназначен для открытия файла изображения с локального компьютера, например C: \ 002.jpg.

function run(){

   var URL = "file:///C:\002.jpg";

   window.open(URL, null);

}
run();

Вот мой пример кода. https://fiddle.jshell.net/q326vLya/3/

Пожалуйста, дайте мне любые подходящие предложения.

Знайте, что это старовато, но посмотрите много таких вопросов ...

Мы часто используем Chrome в классе, и он необходим для работы с локальными файлами.

Мы использовали «Веб-сервер для Chrome». Вы запускаете его, выбираете папку, с которой хотите работать, и переходите по URL-адресу (например, 127.0.0.1: выбранный вами порт)

Это простой сервер и не может использовать PHP, но для простой работы может быть вашим решением:

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

Хорошо, ребята, я полностью понимаю причины безопасности этого сообщения об ошибке, но иногда нам нужен обходной путь ... и вот мой. Он использует ASP.Net (а не JavaScript, на котором основан этот вопрос), но, надеюсь, будет кому-то полезен.

В нашем внутреннем приложении есть веб-страница, на которой пользователи могут создавать список ярлыков для полезных файлов, распространяемых по нашей сети. Когда они нажимают на один из этих ярлыков, мы хотим открыть эти файлы ... но, конечно, ошибка Chrome предотвращает это.

Эта веб-страница использует AngularJS 1.x для перечисления различных ярлыков.

Первоначально моя веб-страница пыталась напрямую создать <a href..>элемент, указывающий на файлы, но это приводило к Not allowed to load local resourceошибке " ", когда пользователь нажимал на одну из этих ссылок.

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

Решением было заменить эти <a href..>элементы этим кодом, чтобы вызвать функцию в моем контроллере Angular ...

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

Сама функция очень простая ...

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

И в моем проекте ASP.Net я добавил файл Handler, DownloadExternalFile.aspxкоторый содержал этот код:

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

Вот и все.

Теперь, когда пользователь нажимает на одну из моих ссылок OpenAnExternalFileбыстрого доступа , он вызывает функцию, которая открывает этот файл .ashx, передавая ему путь + имя файла, который мы хотим открыть.

Этот код обработчика загружает файл, а затем передает его содержимое обратно в HTTP-ответе.

И, готово, веб-страница открывает внешний файл.

Уф! Опять же - есть причина, по которой Chrome выдает это Not allowed to load local resourcesисключение, поэтому будьте осторожны с этим ... но я публикую этот код, чтобы продемонстрировать, что это довольно простой способ обойти это ограничение.

Только один последний комментарий: исходный вопрос хотел открыть файл " C:\002.jpg". Вы не можете этого сделать. Ваш веб-сайт будет находиться на одном сервере (со своим собственным диском C:) и не будет иметь прямого доступа к собственному диску C: вашего пользователя. Поэтому лучшее, что вы можете сделать, - это использовать код вроде моего для доступа к файлам где-нибудь на сетевом диске.

1) Откройте свой терминал и введите

npm install -g http-server

2) Перейдите в корневую папку, в которой вы хотите хранить файлы, и введите:

http-server ./

3) Прочтите вывод терминала, http://localhost:8080появится что-то вроде .

Все, что там есть, можно будет достать. Пример:

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

Chrome специально блокирует доступ к локальным файлам таким образом из соображений безопасности.

Вот обходной путь, чтобы включить флаг в Chrome (и открыть вашу систему до уязвимостей):

c: \ Program Files (x86) \ google \ chrome \ Application \ chrome.exe --allow-file-access-from-files

Есть обходной путь с использованием веб-сервера для Chrome .
Вот шаги:

1. Добавьте расширение в хром.
2. Выберите папку (C: \ images) и запустите сервер на желаемом порту.

Теперь легко получить доступ к вашему локальному файлу:

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: Вам может потребоваться выбрать опцию CORS Header в расширенных настройках, если вы столкнетесь с какой-либо ошибкой доступа с перекрестным источником.

Вы не сможете загрузить изображение за пределами каталога проекта или из каталога пользовательского уровня, поэтому появляется предупреждение о невозможности доступа к локальным ресурсам.

Но если бы вы поместили файл в корневую папку вашего проекта, как в, {rootFolder}\Content\my-image.jpgи ссылались на него так:

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

Эта проблема возникает, когда я использую PHP в качестве языка на стороне сервера, и работа заключалась в том, чтобы сгенерировать соединение base64 моего изображения перед отправкой результата клиенту.

$path = 'E:/pat/rwanda.png';
$type = pathinfo($path, PATHINFO_EXTENSION);
$data = file_get_contents($path);
$base64 = 'data:image/' . $type . ';base64,' . base64_encode($data);

Думаю, может дать кому-то идею создать свою собственную работу вокруг

Благодарность

Google Chrome не позволяет загружать локальные ресурсы из соображений безопасности. Chrome нужен http-адрес. Internet Explorer и Edge позволяют загружать локальные ресурсы, но Safari, Chrome и Firefox не позволяют загружать локальные ресурсы.

Перейдите в папку с файлом и запустите оттуда Python Server.

python -m SimpleHttpServer

затем поместите этот URL в функцию:

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

Если у вас установлен php - вы можете использовать встроенный сервер. Просто откройте целевой каталог с файлами и запустите

php -S localhost:8001

Если бы вы могли это сделать, это будет представлять большую проблему безопасности, поскольку вы можете получить доступ к своей файловой системе и потенциально воздействовать на имеющиеся там данные ... К счастью, это невозможно сделать то, что вы пытаетесь сделать.

Если вам нужен доступ к локальным ресурсам, вы можете попробовать запустить веб-сервер на своем компьютере, и в этом случае ваш метод будет работать. Возможны и другие обходные пути, такие как действия с настройками Chrome, но я всегда предпочитаю чистый способ, устанавливая локальный веб-сервер, возможно, на другой порт (нет, это не так сложно!).

Смотрите также:

• Открывать локальные файлы (file: //) с помощью Chrome
• Открытие локальных файлов из Chrome

Вам просто нужно заменить все сетевые пути изображений на байтовые строки в сохраненной строке Encoded HTML. Для этого вам потребуется HtmlAgilityPack для преобразования строки Html в документ Html. https://www.nuget.org/packages/HtmlAgilityPack

Найдите ниже код для преобразования каждого сетевого пути src изображения (или локального пути) в байтовый sting. Он обязательно будет отображать все изображения с сетевым путем (или локальным путем) в IE, Chrome и 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 =>
    {
        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;

Chrome и другие браузеры ограничивают доступ сервера к локальным файлам из соображений безопасности. Однако вы можете открыть браузер в режиме разрешенного доступа. Просто откройте терминал, перейдите в папку, где хранится chrome.exe, и напишите следующую команду.

chrome.exe --allow-file-access-from-files

Прочтите это для более подробной информации

Однако этот способ не сработал для меня, поэтому я сделал другой маршрут для каждого файла в определенном каталоге. Следовательно, переход по этому пути означал открытие этого файла.

function getroutes(list){ 
    list.forEach(function(element) { 
        app.get("/"+ element, function(req, res) { 
            res.sendFile(__dirname + "/public/extracted/" + element); 
       }); 
   }); 
}

Я вызвал эту функцию, передав список имен файлов в каталоге, __dirname/public/extractedи она создала разные маршруты для каждого имени файла, который я смог отобразить на стороне сервера.

Это решение сработало для меня на PHP. Он открывает PDF-файл в браузере.

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

Я столкнулся с этой проблемой, и вот мое решение для Angular. Я обернул папку с ресурсами Angular в функцию encodeURIComponent (). Это сработало. Но все же я хотел бы узнать больше о рисках этого решения, если они есть:

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