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

转载地址：https://my.oschina.net/u/2457218/blog/782822

一、问题

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

目录结构：

引入方式：

<link href="../css/font-awesome.css" rel="stylesheet" type="text/css">

使用方式：

<link href="../css/font-awesome.css" rel="stylesheet" type="text/css">

访问地址：

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

在Chrome浏览器中能正常访问，

在火狐浏览器中访问出现无法识别字符

可以看出在火狐浏览器下无法正常显示字体图标

二、分析

由于一直用火狐浏览器的firebug插件，在访问的时候只能看到一行错误信息

 NetworkError: A network error occurred

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

downloadable font: download failed (font-family: "FontAwesome" style:normal weight:normal stretch:normal src index:1): bad URI or cross-site access not allowed source: file:///E:/workstation/ProTeam-web/vendor/font-awesome/vendor/font-awesome/fonts/fontawesome-webfont.woff

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

同源策略限制了一个源（origin）中加载文本或脚本来自其他源（origin）中资源的交互方式

在同源的定义，如果两个页面拥有相同的协议（protocol），端口(port)和主机(domain)，那么这两个页面就属于同一个源。

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

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

http请求同源示例

URL	结果	原因
http://domain.com/page1.html	成功
http://domain.com/vender/index.html	成功
http://domain.com:8080/index.html	失败	端口不同
http://domain2.com/index.html	失败	域名不同
https://domain.com/index.html	失败	协议不同

针对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页面前面的内容当做源，然后通过此页面引用字体文件的时候，前面一致，故被火狐浏览器认为是同源。

三、一个不太好的解决办法

上述问题也就只有在本地开发的时候才会出现，部署到服务器上以后，如果在同一个站点下就不会出现上述问题。这个限制是浏览器的限制，火狐为这个限制增加了开关，在本机的开发的时候可以暂时把这个开关关闭

在火狐浏览器中输入：about:config

搜索：security.fileuri.strict_origin_policy

然后双击把这个值更改为false即可。

或者采用更换文件夹的方式（章节二最后所述），把不同源设置为同源。但是这样会限制了我们组织代码路径方式。

四、总结

总的来说这个问题是由于同源策略所导致，并不能说是火狐浏览器的bug，只是火狐为了安全起见，认为这个是不安全的，故做了限制。相关文章可以自行搜索。实际上在其他浏览器上也会有相应的安全问题，例如chrome浏览器，但是chrome的开发团队不认为这是一个bug，所以并没有对此做相应的限制。

其他

[我的博客，欢迎交流！](http://rattenking.gitee.io/stone/index.html)

[我的CSDN博客，欢迎交流！](https://blog.csdn.net/m0_38082783)

[微信小程序专栏](https://blog.csdn.net/column/details/18335.html)

[前端笔记专栏](https://blog.csdn.net/column/details/18321.html)

[微信小程序实现部分高德地图功能的DEMO下载](http://download.csdn.net/download/m0_38082783/10244082)

[微信小程序实现MUI的部分效果的DEMO下载](http://download.csdn.net/download/m0_38082783/10196944)

[微信小程序实现MUI的GIT项目地址](https://github.com/Rattenking/WXTUI-DEMO)

[微信小程序实例列表](http://blog.csdn.net/m0_38082783/article/details/78853722)

[前端笔记列表](http://blog.csdn.net/m0_38082783/article/details/79208205)

[游戏列表](http://blog.csdn.net/m0_38082783/article/details/79035621)