javascript - Firefox 不会在@font-face 中声明的跨浏览器请求中发送 cookie

Question

我想要的:

我需要向页面添加一些动态 CSS 样式，其中包含来自不同域的字体，需要身份验证:

问题:

Firefox 不会在字体请求中发送 cookie(在 Chrome 中一切正常)

情况:

Firefox v.30.0。 CSS 文件和字体的源位于不同的域(例如是名为“bbb.com”的外国域)。外部域“bbb”需要认证。身份验证成功后，客户端会收到带有 php session ID 的 cookie，该 ID 用于所有其他对“bbb.com”域的请求。

示例:

1. 域名“bbb.com”认证成功
2. 通过 AJAX 请求 url "https://bbb.com/issue2604dead.css "客户端接收 CSS 文件的内容，如字符串
3. Javascript 使用上一步收到的内容创建元素
4. CSS 样式工作正常，受影响元素的样式已更改；
5. CSS 中的一个定义是以下字体引用:@font-face{font-family:dead_3;src:url(https://bbb.com/dead_3.ttf)format("opentype") ;}
6. 浏览器试图从 url 获取字体，但客户端收到响应状态“401 Unauthorized”；

已编辑:

我在 jsFiddle 上做了例子:http://jsfiddle.net/RightFiveLeft/Pu4C2/9/

我发现 Firefox 不发送 Cookie，因为在 DOM 元素中设置了引用。如果您通过 ajax 加载相同的资源，浏览器将发送 cookie。

所以在我的 jsFiddle 示例中，Cookie 不会在由 DOM 元素链接创建的 CSS 请求上发送。

已编辑 2

很抱歉我在 jsFiddle 中添加了错误的示例。现在在版本 9 中它应该最终是正确的:-D

Answer 1

你是对的，发生了一些奇怪的事情。在 Safari (7.0.5) 上，css 和字体请求都返回 401。如果您在新的 Safari 选项卡中打开字体或 css 请求，它会返回 401。如果您现在再次刷新 fiddle ，两个请求都可以正常工作 (200)。

在 firefox (31.0) 上，字体问题仍然存在。这可能是针对另一个域的请求的 firefox 策略，或者可能.. 只是一个错误。

我发现了一些可能相关的东西，但需要访问网络服务器才能对其进行测试: CSS @font-face not working with Firefox, but working with Chrome and IE

顺便说一下，即使在其他浏览器中，这些请求的实现看起来也存在一些差异和问题，所以我不会过分依赖 cookie 的身份验证机制。

另一种方法可以稍微改变 getFile.php 的实现，接受一个 GET 参数( token )进行身份验证。例如，您可以将请求设计为:

.../getFile.php?fileName=testFont.ttf&_=1445&token=<auth token>

并根据 $_GET['token'] 而不是 cookie 值测试身份验证参数。

如果您不能或不想以这种方式解决问题，我建议您评估是否有可能(仅)保留未经身份验证的字体。如果这是一个可行的解决方案，最好的选择是从 CDN 提供服务。