【问题标题】:Typeface and Images Cross-Origin Resource Sharing字体和图像跨域资源共享
【发布时间】:2017-10-13 18:01:16
【问题描述】:

我注意到字体总是受到跨域资源共享 (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 方面有何不同?

【问题讨论】:

  • 字体总是受 CORS 约束?你在哪里遇到这个问题?你能展示你的场景吗?

标签: image fonts cors access-control


【解决方案1】:

这里的要求在Font fetching requirements section in the CSS Fonts spec中定义:

对于字体加载,用户代理必须使用 [HTML5] 规范为@font-face 规则中定义的 URL 定义的可能启用 CORS 的 fetch 方法。获取时,用户代理必须使用“匿名”模式,将引用源设置为样式表的 URL,并将源设置为包含文档的 URL。

这对作者的影响是字体通常不会跨域加载,除非作者特别采取措施允许跨域加载。站点可以使用Access-Control-Allow-Origin 明确允许跨站点加载字体数据。

“可能启用 CORS 的获取”和“匿名”状态的组合实际上是为了使跨域字体获取始终启用 CORS(不仅仅是“可能”)——因为 @987654322 @:

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

鉴于所有这些,以下是您问题的具体答案:

  1. 字体是否始终受 CORS 政策约束?为什么?

是的,使用 @font-face 进行跨域字体加载始终受 CORS 政策的约束,根据上面引用的 CSS 字体规范和 HTML 规范的规范要求。

至于为什么,和this comment有相关讨论:

主要原因是字体供应商希望 Web 作者将字体的使用限制在他们自己的网站上,而 Web 作者无法轻松可靠地做到这一点,除非我们提供同源限制

在同一个讨论中,this comment

同源策略适用于网络上几乎所有新的资源类型。只有少数遗留资源类型(图像、脚本、css 和呃、音频/视频(几乎没有错过这些))允许跨域页面无限制地热链接。

现在这是网络的标准安全实践。

那么回答你的下一个问题:

  1. 为什么图像不受 CORS 政策的约束?

图像是上面引用的评论中提到的“少数遗留资源类型”之一,它们相对来说已经成为 Web 的一部分,并且一直被允许跨域加载。字体等较新的功能(在过去几年中添加)的不同之处在于,如今为此类功能添加支持时,默认情况下它们被限制为同源。

  1. 如果字体受 CORS 约束,它与图像在 CORS 方面有何不同?

不确定您要问什么,但我认为答案是,就 CORS 而言,以触发 CORS 限制的方式请求的图像与任何跨域请求的图像没有区别。

我的意思是,如果不是使用 img 元素来加载图像,而是使用 XHR 或 Fetch API 来请求它,那么您的浏览器将对该图像请求应用同源限制,只是因为您的浏览器会处理您请求跨域的任何其他内容。

不同之处在于 img 元素早在我们知道我们现在所知道的之前就已经设计好了,因此它在浏览器中的跨域 OK 处理与我们对这些新功能的默认同源处理不同天。

换句话说,img 元素的处理实际上是这里规则的例外,而对字体的处理与浏览器现在对所有新功能的处理是一致的。

【讨论】:

    猜你喜欢
    • 2017-01-07
    • 2012-08-27
    • 2015-10-21
    • 2011-07-05
    • 2011-05-07
    • 2013-08-02
    • 2014-03-20
    • 2013-01-12
    相关资源
    最近更新 更多