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

Firefox doesn't sent cookie in cross browser request declared in @font-face

本文关键字：请求 浏览器 cookie @font-face 声明 Firefox      更新时间：2023-09-26

我想要的:

我需要添加一些动态CSS样式与字体从不同的域，其中需要身份验证，到页面:

问题:

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

:

Firefox v.30.0。CSS文件和字体的来源是在不同的域(在例子中，是外国域名称为"bbb.com")。外部域名"bbb"需要认证。认证成功后，客户端接收到带有php会话ID的cookie，该cookie用于所有其他请求"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未经授权";

编辑:

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

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

所以在我的例子jsFiddle Cookie将不会发送的CSS请求创建的DOM元素链接。

编辑2

对不起，我在jsFiddle中添加了错误的示例。现在在版本9中，它应该是正确的:-D

你说得对，确实有些奇怪。在Safari(7.0.5)中，css和字体请求都返回401。如果在新的Safari选项卡中打开字体或css请求，它将返回401。如果现在再次刷新，两个请求都可以正常工作(200)。

在firefox(31.0)上，字体问题仍然存在。这可能是firefox对其他域请求的策略，或者…只是一个bug。

我发现了一些可能相关的东西，但需要访问web服务器来测试它:CSS @font-face不能在Firefox中使用，但可以在Chrome和IE中使用

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

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

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

并测试针对$_GET['token']的认证参数，而不是cookie值。

如果你不能或不想用这种方式解决，我建议你评估一下(只)保留字体而不进行身份验证的可能性。如果这是一个可行的解决方案，最好的选择是从CDN提供。

相关文章：