无法打开本地文件 - Chrome: 不允许加载本地资源

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

测试浏览器: Chrome 版本:52.0.2743.116

很简单javascript就是从本地打开一个图片文件如'C:[=21=]2.jpg'

function run(){

   var URL = "file:///C:[=11=]2.jpg";

   window.open(URL, null);

}
run();

这是我的示例代码。 https://fiddle.jshell.net/q326vLya/3/

请给我任何合适的建议。

如果你能做到这一点,这将代表一个很大的安全问题,因为你可以访问你的文件系统,并可能对那里可用的数据采取行动......幸运的是,你不可能做你想做的事.

如果你需要访问本地资源,你可以尝试在你的机器上启动一个网络服务器,在这种情况下你的方法就可以了。其他解决方法也是可能的,例如根据 Chrome 设置进行操作,但我总是更喜欢干净的方式,安装本地 Web 服务器,也许在不同的端口上(不,这并不难!)。

另请参阅:

  • Opening local files from chrome

Chrome 出于安全原因专门阻止以这种方式访问​​本地文件。

这里有一篇文章解决了 Chrome 中的标志(并使您的系统面临漏洞):

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

好的,伙计们,我完全理解此错误消息背后的安全原因,但有时,我们确实需要解决方法...这是我的解决方法。它使用ASP.Net(而不是JavaScript,这个问题是基于它的)但它希望对某人有用。

我们的 in-house 应用程序有一个网页,用户可以在其中创建一个快捷方式列表,以访问在我们网络中传播的有用文件。当他们点击这些快捷方式之一时,我们想要打开这些文件...但是当然,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 项目中,我添加了一个名为 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:[=20=]2.jpg”。你不能这样做。您的网站将位于一台服务器上(有自己的 C: 驱动器)并且无法直接访问您用户自己的 C: 驱动器。所以你能做的最好的就是使用像我这样的代码来访问网络驱动器上某处的文件。

我们在课堂上经常使用 Chrome,并且必须使用本地文件。

我们一直在使用的是“Chrome 的 Web 服务器”。您启动它,选择希望使用的文件夹并转到 URL(例如 127.0.0.1:您选择的端口)

这是一个简单的服务器,不能使用 PHP 但对于简单的工作,可能是您的解决方案:

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

有一个使用 Web Server for Chrome 的解决方法。
步骤如下:

  1. 将扩展添加到 chrome。
  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:您可能需要 select 高级设置中的 CORS Header 选项,以防遇到任何跨源访问错误。

您将无法在项目目录之外或从用户级目录加载图像,因此 "cannot access local resource warning"。

但是如果您像 {rootFolder}\Content\my-image.jpg 那样将文件放在项目的根文件夹中并像这样引用它:

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

1) 打开终端并输入

npm install -g http-server

2) 转到要为您提供文件的根文件夹并键入:

http-server ./

3) 阅读终端的输出,会出现一些 http://localhost:8080

那里的一切都将被允许得到。 示例:

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

当我使用 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);

我想可能会给别人一些想法来创造他自己的作品

谢谢

您只需将所有图像网络路径替换为存储的编码 HTML 字符串中的字节字符串。 为此,您需要 HtmlAgilityPack 将 Html 字符串转换为 Html 文档。 https://www.nuget.org/packages/HtmlAgilityPack

找到下面的代码将每个图像 src 网络路径(或本地路径)转换为字节串。 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;

Google Chrome 出于安全原因不允许加载本地资源。 Chrome 需要 http url。 Internet Explorer 和 Edge 允许加载本地资源,但 Safari、Chrome 和 Firefox 不允许加载本地资源。

转到文件位置并从那里启动 Python 服务器。

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 对我有用。它在浏览器中打开 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);
    }
}

Chrome 和其他浏览器出于安全原因限制服务器对本地文件的访问。但是,您可以在允许访问模式下打开浏览器。只需打开终端并转到存储 chrome.exe 的文件夹并编写以下命令。

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

Read this for more details

但是,这种方式对我不起作用,所以我为特定目录中的每个文件创建了不同的路径。因此,转到该路径意味着打开该文件。

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

我调用此函数传递目录 __dirname/public/extracted 中的文件名列表,它为我能够在服务器端呈现的每个文件名创建了不同的路径。

如果您安装了 php - 您可以使用内置服务器。只需打开包含文件和 运行

的目标目录
php -S localhost:8001

我遇到过这个问题,这是我针对 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```

对于音频文件,当您输入 <audio src="C://somePath"/> 时,会抛出一条错误消息 cannot load local resource. 这是有道理的,因为任何网页都不能简单地提供本地路径并访问您的私人文件。

如果您尝试使用动态路径播放音频,通过 JS 更改 src property,那么这里是使用 Flask 服务器和 HTML.

的示例实现

server.py

@app.route("/")
    def home():
        return render_template('audioMap.html')

@app.route('/<audio_file_name>')
def view_method(audio_file_name):
    path_to_audio_file = "C:/Audios/yourFolderPath" + audio_file_name
    return send_file(
         path_to_audio_file, 
         mimetype="audio/mp3", 
         as_attachment=True, 
         attachment_filename="test.mp3")

audioMap.html

{% raw %}
<!DOCTYPE html>
<html>
<body>
    AUDIO: <audio src="Std.mp3" controls  >
</body>
</html>
{% endraw %}

解释:

当您在 src 属性 下给出音频文件名时,这会在 flask 中创建一个获取请求,如图所示

127.0.0.1 - - [04/May/2021 21:33:12] "GET /Std.mp3 HTTP/1.1" 200 -

如您所见,flask 已发送 Std.mp3 文件的 Get 请求。因此,为了满足此 get 请求,我们编写了一个端点,它获取音频文件名,从本地目录读取它,然后 returns 返回。因此音频出现在 UI.

Note: This works only if you are rendering your HTML file using the render_template method via flask or to say, using flask as your web server.

这是给google-chrome-extension

const url = "file:///C:[=10=]2.jpg"
chrome.tabs.create({url, active:true})

manifest.json

{
  "name": "",
  "manifest_version": 3,
  "permissions": [
    "activeTab",
    "tabs"
  ],
  // ...
}