Question

我目前正在开发一个网站，无法在Firefox中显示我的字体图标。除firefox以外的所有浏览器都可以加载并显示我的字体图标，但是在firefox上却出现以下错误：

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at file:///C:/Users/Me/Desktop/website/resources/dist/css/fonts/themify.ttf. (Reason: CORS request not http).

文件路径正确，因为当我输入上面列出的URL时，浏览器允许我下载文件。有人知道为什么我会收到此错误吗？

Answer 1

Firefox 68包含一个安全修补程序，该安全修补程序限制了从file：// URL打开页面时可以加载的文件类型（以及加载方法）。进行此更改是为了防止有价值的数据在本地页面的范围内泄露，如可用漏洞利用所证明的那样。更多信息：https://developer.mozilla.org/docs/Web/HTTP/CORS/Errors/CORSRequestNotHttp

我昨天提交了一个错误，提议允许使用字体，但是实现它需要时间。目前，您可以按以下步骤回滚补丁：

（1）在新选项卡中，在地址栏中键入或粘贴about：config，然后按Enter / Return键。点击承诺会小心或承担风险的按钮。

（2）在列表上方的搜索框中，键入或粘贴uniq并在过滤列表时暂停

（3）双击privacy.file_unique_origin首选项，将值从true切换为false

要缓解此漏洞，请执行以下操作：如果将不受信任的站点中的页面保存在单独的文件夹中，例如，Downloads \ Untrusted，那么攻击者将很难使用本地文件链接找到任何有价值的内容。

Answer 2

在本地预览时未加载网络字体的临时性问题（应在下一个68.0.2 Firefox更新中修复）的最简单安全的方法是安装.ttf或.otf版本并链接到您的 @ font-face 声明。在Windows上，转到/控制面板/字体/，然后检查字体的确切名称，然后将其复制到 local（''）值。

示例：

@font-face {    
   font-family: 'Clear Sans';    
   font-style: normal;    
   font-weight: 700;    
   src: local('Clear Sans Bold'),    
      url('../fonts/woff2-convert/ClearSans-Bold.woff2') format('woff2'),    
      url('../fonts/WOFF/ClearSans-Bold.woff') format('woff'),     
      url('../fonts/TTF/ClearSans-Bold.ttf') format('truetype')    
}

Answer 3

如评论部分所述，我安装了Web服务器。就我而言，我使用了tomcat8，并使用它甚至可以在Firefox中显示图标。

加载本地文件时跨域请求被阻止

3 个答案: