关于字体图标在firefox上本地访问无法显示的问题分析

2024-04-27 15:06:08

字体：大中小

来源：转载

供稿：网友

一、问题

在本地引入了Font Awesome 字体图标，网页未部署到服务上（在本地直接访问，部署到nginx服务器，火狐浏览器能显示）

目录结构：这里写图片描述

引入方式：

使用方式：

访问地址：

file:///E:/workstation/PRoTeam-web/vendor/font-awesome/pages/index.html

在Chrome浏览器中能正常访问: 这里写图片描述在火狐浏览器中访问出现无法识别字符可以看出在火狐浏览器下无法正常显示字体图标

二、分析

由于一直用火狐浏览器的firebug插件，在访问的时候只能看到一行错误信息: 这里写图片描述 NetworkError: A network error occurred

当时并未在意这个错误，只是认为可能是其他代码导致的，无法显示可能浏览器的兼容性问题，苦苦寻找火狐浏览器下的兼容方式，无果！最后把所有无关的代码全部删掉，只保留字体图标样式的引用以及相关使用，还是报这个错误，开始重视这个问题，但是无法显示出详细的错误信息，不知道发送的是什么网络请求，并且在“网络”标签中也未发现有什么请求，最后无奈打开火狐自带的开发者工具，打开以后，突然看到了完整的错误信息，甚是惊喜万分！

这里写图片描述错误信息很明显的指出了URI是不合法的，不允许跨站访问，这就涉及到了浏览器的同源策略的一个问题。

同源策略限制了一个源（origin）中加载文本或脚本来自其他源（origin）中资源的交互方式,在同源的定义，如果两个页面拥有相同的协议（protocol），端口(port)和主机(domain)，那么这两个页面就属于同一个源。

这个协议看着貌似简单，在http协议请求中是比较明确的，各个浏览器实现的标准相同，举例如下：

例如我们访问的网址是http://domain.com/index.html

http请求同源示例: 这里写图片描述针对http请求，以上对同源的策略判断还是挺明白的。但是在本机访问HTML就不同了，例如

刚才我访问的本地的html页面

file:///E:/workstation/ProTeam-web/vendor/font-awesome/pages/index.html

这个访问地址的协议为file协议，这个协议在Firefox中爆出来过安全漏洞，导致在把网页另存为的时候，可以访问到我们本地文件，产生安全隐患，此bug于2004年暴出，链接为

https://bugzilla.mozilla.org/show_bug.cgi?id=230606

http://bobao.360.cn/news/detail/3390.html

继续看刚才我访问的这个页面,这个页面引用了font-awesome.css,而在font-swesome.css文件中需要引用相关的字体文件，通过以上错误信息可以看出，引用的路径为:

file:///E:/workstation/ProTeam-web/vendor/font-awesome/vendor/font-awesome/fonts/fontawesome-webfont.woff

实际上在在font-awesome.mini.css文件中是这么写的：

@font-face { font-family: 'FontAwesome'; src: url('../fonts/fontawesome-webfont.eot?v=4.6.3'); src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.6.3') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.6.3') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.6.3') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.6.3') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.6.3#fontawesomeregular') format('svg'); font-weight: normal; font-style: normal;}

对比一下这两个路径: 这里写图片描述由于上述所说的安全漏洞，火狐浏览器会把index.html页面中的file:///E:/workstation/ProTeam-web/vendor/font-awesome/pages/ 这部分当做源，而在字体图标文件的源是file:///E:/workstation/ProTeam-web/vendor/font-awesome/vendor/，这样两个链接就被火狐浏览器认为不是同源的，导致访问的时候无法访问，结果就是字体图标无法显示。

那如果换个方式引用呢？

我把index.html的位置换了一下，目录结构如下：这里写图片描述这样再访问index.html文件，在火狐浏览器下就能正确的显示出字体图标了。这时候两者的访问路径是: 火狐浏览器同样的会以index.html页面前面的内容当做源，然后通过此页面引用字体文件的时候，前面一致，故被火狐浏览器认为是同源。