问题描述
我正在尝试在现有网站上预览新创建的图像。我希望能够在 Firefox 中打开开发人员工具 (Inspector) 并将背景图片的 url 编辑到我的本地文件中,以便快速预览它的外观。
当我将文件拖到 Firefox 上打开时,它会在地址栏中正常打开:
file:///Users/ian/Desktop/format-BG.jpg
我将该文件路径复制到我的检查器中:background-image: url(file:///Users/ian/Desktop/format-BG.jpg);
但它没有加载。奇怪的是,当我点击检查器中的 URL 时,它会在一个新选项卡中打开“可卸载”图像在地址栏中具有完全相同的 URL 但没有加载。
这是安全功能还是什么?
MacOs 11.4 (20F71) Firefox 89.0(64 位)
解决方法
是的,这是一项安全功能。想象一下,浏览器会以这种方式加载本地文件。然后嵌入在页面中的 JavaScript 也可以访问该信息。
恶意网站以这种方式直接访问文件系统,无需任何用户交互。因此,所有浏览器都会阻止访问通过 file://
方案引用的文件。
话虽如此,应该如何处理 file://
方案的行为仍然没有标准化(参见 https://github.com/whatwg/html/issues/3099)。因此,不同的浏览器对通过 file://
方案引用的本地文件的处理方式略有不同。
这里有一些链接供进一步阅读:
- https://textslashplain.com/2019/10/09/navigating-to-file-urls/
- https://security.stackexchange.com/questions/153706/why-local-links-are-disabled-by-default-in-modern-browsers
- https://security.stackexchange.com/questions/201208/why-do-browsers-disallow-accessing-files-from-local-file-system-even-if-the-html
不过,似乎有一种方法可以改变这种行为,https://superuser.com/a/1513162 中对此进行了描述。