Reprint address: https://my.oschina.net/u/2457218/blog/782822
1. Problems
The Font Awesome font icon is introduced locally, and the web page is not deployed to the service ( directly accessed locally , deployed to the nginx server, and can be displayed by the Firefox browser )
Directory Structure:
Import method:
<link href="../css/font-awesome.css" rel="stylesheet" type="text/css">How to use:
<link href="../css/font-awesome.css" rel="stylesheet" type="text/css">address:
file:///E:/workstation/ProTeam-web/vendor/font-awesome/pages/index.htmlIt can be accessed normally in the Chrome browser.
Unrecognized characters appear when accessing in Firefox
It can be seen that the font icon cannot be displayed normally in the Firefox browser
2. Analysis
Since I have been using the firebug plugin of the Firefox browser, I can only see one line of error message when I visit
NetworkError: A network error occurred
At that time, I didn't care about this error, I just thought that it might be caused by other codes and could not show the compatibility problem of possible browsers. I tried hard to find the compatibility method under Firefox browser, but to no avail! Finally, all irrelevant codes were deleted, and only the reference of font icon style and related uses were kept. I still reported this error and began to pay attention to this problem, but I could not display detailed error information, and I did not know what network request was sent, and I didn't find any request in the "Network" tab. Finally, I had no choice but to open the developer tool that comes with Firefox. After opening it, I suddenly saw the complete error message, which was very pleasant!
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.woffThe error message clearly points out that the URI is invalid and does not allow cross-site access, which involves a problem with the browser's same- origin policy .
The same-origin policy restricts how text or scripts loaded in one origin can interact with resources in other origins
In the definition of the same origin, if two pages have the same protocol (protocol) , port (port) and host (domain) , then these two pages belong to the same origin.
This protocol looks simple, but it is relatively clear in the http protocol request, and the standards implemented by each browser are the same, for example:
For example, the URL we visit is http://domain.com/index.html
HTTP request same-origin example
| URL | result | reason |
| http://domain.com/page1.html | success | |
| http://domain.com/vender/index.html | success | |
| http://domain.com:8080/index.html | fail | different ports |
| http://domain2.com/index.html | fail | different domain names |
| https://domain.com/index.html | fail | different protocols |
For http requests, the above policy judgment on the same origin is quite clear. But accessing HTML natively is different, e.g.
The local html page I visited just now
file:///E:/workstation/ProTeam-web/vendor/font-awesome/pages/index.html
The protocol of this access address is the file protocol. This protocol has a security hole in Firefox. When saving the webpage as, we can access our local files, resulting in security risks. This bug broke out in 2004. The link is
https://bugzilla.mozilla.org/show_bug.cgi?id=230606
http://bobao.360.cn/news/detail/3390.html
Continue to look at the page I visited just now. This page references font-awesome.css, and the font-swesome.css file needs to reference the relevant font file. It can be seen from the above error message that the referenced path is
file:///E:/workstation/ProTeam-web/vendor/font-awesome/vendor/font-awesome/fonts/fontawesome-webfont.woff
It is actually written in the font-awesome.mini.css file like this:
@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;
}
Compare the two paths
Due to the above-mentioned security holes, Firefox browser will use the file:///E:/workstation/ProTeam-web/vendor/font-awesome/pages/ part of the index.html page as the source, and in the font icon The source of the file is file:///E:/workstation/ProTeam-web/vendor/font-awesome/vendor/, so the two links are considered by the Firefox browser as not of the same origin, resulting in inaccessibility when accessing, the result It's just that the font icon doesn't show up.
So what if you refer to it in a different way?
I changed the location of index.html, and the directory structure is as follows:
In this way, if you visit the index.html file again, the font icon will be displayed correctly in the Firefox browser. At this time, the access path of the two is
The Firefox browser will also use the content in front of the index.html page as the source, and then when the font file is referenced through this page, the front is the same, so it is considered to be the same origin by the Firefox browser.
3. A not-so-good solution
The above problems will only occur when developing locally. After deploying to the server, the above problems will not occur if they are on the same site. This limitation is a browser limitation. Firefox has added a switch for this limitation. You can temporarily turn off this switch during the development of this machine.
Type in Firefox: about:config
Search for: security.fileuri.strict_origin_policy
Then double-click to change the value to false.
Or use the method of changing folders (described at the end of Chapter 2) to set different sources to the same source. But this limits how we organize our code paths.
4. Summary
In general, this problem is caused by the same-origin policy, and it cannot be said to be a bug of the Firefox browser. It is just that Firefox considers this to be unsafe for security reasons, so it restricts it. Related articles can be searched by yourself. In fact, there will be corresponding security issues on other browsers, such as the chrome browser, but the chrome development team does not consider this a bug, so there is no corresponding restriction on this.