關于字體圖標在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.#/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頁面前面的內容當做源，然后通過此頁面引用字體文件的時候，前面一致，故被火狐瀏覽器認為是同源。