關於字體圖標在firefox上本地訪問沒法顯示的問題分析

1、問題

在本地引入了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瀏覽器中能正常訪問，

在火狐瀏覽器中訪問出現沒法識別字符

能夠看出在火狐瀏覽器下沒法正常顯示字體圖標

2、分析

因爲一直用火狐瀏覽器的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頁面前面的內容當作源，而後經過此頁面引用字體文件的時候，前面一致，故被火狐瀏覽器認爲是同源。

3、一個不太好的解決辦法

上述問題也就只有在本地開發的時候纔會出現，部署到服務器上之後，若是在同一個站點下就不會出現上述問題。這個限制是瀏覽器的限制，火狐爲這個限制增長了開關，在本機的開發的時候能夠暫時把這個開關關閉

在火狐瀏覽器中輸入：about:config

搜索：security.fileuri.strict_origin_policy

而後雙擊把這個值更改成false便可。

或者採用更換文件夾的方式（章節二最後所述），把不一樣源設置爲同源。可是這樣會限制了咱們組織代碼路徑方式。

4、總結

總的來講這個問題是因爲同源策略所致使，並不能說是火狐瀏覽器的bug，只是火狐爲了安全起見，認爲這個是不安全的，故作了限制。相關文章能夠自行搜索。實際上在其餘瀏覽器上也會有相應的安全問題，例如chrome瀏覽器，可是chrome的開發團隊不認爲這是一個bug，因此並無對此作相應的限制。