字體和圖像跨域資源共享

Question

我注意到字體總是受到跨源資源共享（CORS）的影響，而圖像不是。

情景

網站A：在這個網站上，我們對上傳的資源的限制。我們只能上傳HTML文件。所有外部文件都指向網站B.

網站B：所有資源都上傳到此網站。

圖像是好的，工作正常，但字體不是。以下是一個錯誤日誌的例子。我很好奇，它是否總是那樣？像字體總是受到CORS和圖像不是？

訪問字體'website-b.com/font.ttf？'來自「website-a.com」的域名已被CORS策略阻止：在請求的資源上沒有「Access-Control-Allow-Origin」標頭。 Origin'website-a.com'因此不被允許訪問。

質詢

1. 是字體總是受到CORS政策，爲什麼？
2. 爲什麼圖像不受CORS策略的約束？
3. 如果字體受到CORS的影響，它與CORS的圖像有什麼不同？

Answer 1

要求這裏在一個Font fetching requirements section in the CSS Fonts spec定義：

對於字體的負載，用戶代理必須使用潛在CORS啓用取內@所定義的[HTML5]規範URL的定義方法字體規則。提取時，用戶代理必須使用「匿名」模式，將引用來源設置爲樣式表的URL並將來源設置爲包含文檔的URL。

這對作者的影響是字體通常不會被加載到跨越原點，除非作者專門採取措施來允許跨源加載。網站可以使用Access-Control-Allow-Origin明確允許跨站點加載字體數據。

的組合「啓用CORS，可能取」和「匿名」狀態實際上是使跨域字體取啓用CORS-總是（不只是「潛在「） - 因爲the HTML spec says the mode for the 「Anonymous」 state is always cors：

+-----------+-----------+---------------------------------------------------------+ 
| anonymous | Anonymous | Requests for the element will have their mode set to | 
|   |   | "cors" and their credentials mode set to "same-origin". | 
+-----------+-----------+---------------------------------------------------------+ 

所以，有了這一切，這裏是你的問題的具體答案：

1. 字體總是受制於CORS策略，爲什麼？

是，跨域字體加載與@字體面總是受CORS政策，每從CSS字體規範和HTML規範上面提到的規範要求。

至於爲什麼，有一個與this comment的相關討論：

主要的原因是，字體廠商希望Web作者使用的字體限制在他們自己的網站和Web作者無法輕鬆可靠地做到這一點，除非我們提供了相同來源的限制

而在同樣的討論，this comment：

的SA我來源政策適用於網絡上幾乎所有的新資源類型。只有少數傳統資源類型（圖像，腳本，css和ugh，音頻/視頻（幾乎沒有錯過那些））可以讓跨網頁無限制地熱鏈接。

這現在是網絡的標準安全實踐。

所以再回答你的下一個問題：

爲什麼圖像不受CORS政策？

圖片均在同註釋引用上述that've網絡的一部分已經永遠相對提到的「遺產資源類型的少數」，並一直允許加載跨域。像過去幾年裏添加的字體這樣的新功能，不同之處在於，現在在爲這些功能添加支持時，它們在默認情況下被限制爲同源。

1. 如果字體受制於CORS，它與CORS的形式有什麼不同？

你問不知道是什麼，但我想答案是，CORS而言，在觸發CORS限制比什麼都要求跨來源不區別對待的方式請求的圖像。

我的意思是，如果不是使用img元素來加載圖像，而是使用XHR或Fetch API來請求它，那麼您的瀏覽器將對該圖像請求應用同源限制，就像您的瀏覽器將用於您請求跨域的任何其他功能。

不同之處在於img元素在我們知道我們現在知道的很久之前就已經設計好了，所以它在瀏覽器中具有不同的交叉原點處理，而不是我們現在使用的最新功能。

換句話說，img元素的處理實際上是這裏的規則的例外，而字體的處理與瀏覽器現在用於所有新特性的處理一致。