Question

我的CSS托管在https://www.site1.com（它是经过身份验证的域）上，它使用https://media.site1.com上的woff/ttf个文件（它也经过身份验证 - 与www相同）。要连接到这些站点，我必须使用经过身份验证的代理。

我必须启用CORS才能允许跨域加载，但是如果此域经过基本身份验证并且我使用经过身份验证的代理，我似乎无法从其他域加载资源。

我在Apache中添加了以下指令：

SetEnvIf Origin "^http(s)?://(.*)$" origin_is=$0 
Header set Access-Control-Allow-Origin %{origin_is}e env=origin_is
Header set Access-Control-Allow-Credentials "true"
Header set Access-Control-Allow-Headers "*"

它应该允许所有Origin，但是当CSS加载woff文件时（通过GET请求），我得到：

请求（仅有趣的标题）：

GET file.woff HTTP/1.1
User-Agent  Mozilla/5.0 (Windows NT 6.1; WOW64; rv:38.0) Gecko/20100101 Firefox/38.0
Host  media.site1.com
Origin  https://www.site1.com
Proxy-Authorization Basic XXX1234567
Connection  keep-alive
Cache-Control   max-age=0

响应（由Firebug或Httpfox看到）：

HTTP/1.0 401 Unauthorized
WWW-Authenticate    BASIC realm="Unspecified"
Server  BigIP
Connection  close
Content-Length  0

如果我在转到www之前手动向media.site1.com进行身份验证，结果是一样的。浏览器似乎没有向＆＃34;媒体＆＃34;发送基本身份验证凭据。服务器

我是否需要设置任何其他标头以确保从其他位置加载WOFF文件，使用基本身份验证并最终使用企业身份验证代理？

Answer 1

我们遇到了同样的情况。

根据W3C规范，从CSS文件链接的字体必须加载到＆＃34;匿名＆＃34;模式：https://www.w3.org/TR/2013/CR-css-fonts-3-20131003/#font-fetching-requirements 所以基本上浏览器通常不会发送身份验证cookie。

我理解它的方式，你有两个选择：

禁用https://media.site1.com
这是一个黑客，我不完全确定它会起作用。你可以尝试发出一个AJAX请求来加载CSS文件之前的字体，如下所述：https://css-tricks.com/preventing-the-performance-hit-from-custom-fonts/当然，在本文中他们是出于性能原因这样做，但是，这个想法是加载字体单独文件，以便在加载CSS文件时，浏览器将从其缓存中获取它。您可能需要在AJAX调用中添加withCredentials标头，如下所述：https://stackoverflow.com/a/7190487此外，考虑到通常您在页面顶部加载CSS文件并在底部加载JavaScript，以防止首先加载CSS文件并发出失败的请求，您需要在AJAX调用的成功回调中动态加载它。

我知道第二种解决方案似乎太麻烦了，但我无法想出更好的解决方案。

Answer 2

感谢 AsGoodAsItGets 的回答，我能够更好地理解我正在处理的服务器配置问题；在 CAS 认证的服务器上一切正常……但是字体始终没有按预期与其他本地资产一起加载。

虽然我很欣赏 AsGoodAsItGets 的回答，但它并没有提供如何在授权目录上调整 Web 服务器配置以允许字体通过的基本实际示例，我决定发布这个答案显示如何做到这一点。这相当简单；覆盖发生在 <FilesMatch> 配置中：

<Directory "/var/www/html">

  <IfModule mod_auth_cas.c>
    AuthType        CAS
    CASAuthNHeader  On
    Require valid-user
  </IfModule>

  <FilesMatch "\.(eot|svg|ttf|woff|woff2)$">
    AuthType None
    Allow from all
    Require all granted
    Satisfy Any
  </FilesMatch>

</Directory>

该配置基本上是说，“如果启用了 CAS，则使用它并且只允许通过 CAS 身份验证的用户通过……但是如果文件扩展名与那里的常见字体扩展名匹配 — .eot、.svg、{{ 1}}、.ttf 和 .woff — 让它通过而无需任何身份验证。”

设置，重新启动 Apache，突然所有字体都按预期显示，并且浏览器的检查器控制台中没有错误。

我的CSS无法加载位于其他https + auth服务器上的Web字体woff文件（与CORS相关）

2 个答案: