Firefox不使从CloudFront的字体 [英] Firefox does not render fonts from CloudFront

问题描述

我有一个的Rails 应用，托管在的Heroku 。在部署过程中资产同步与亚马逊S3 通过斗asset_sync 创业板和意见通过的 CloudFront的拨打这些资产。然而，字体未查看的网站时，呈现的火狐（文件被加载在Firebug的网络选项卡中，但根本无法使用）。 Safari浏览器的伟大工程。

I have a Rails app, hosted on Heroku. During deployment assets are synced with an Amazon S3 bucket via the asset_sync gem and views call those assets through CloudFront. However, fonts are not rendered when viewing the website with Firefox (files are loaded in the Net tab of Firebug, but simply not used). Safari works great.

我有以下的 CORS 在S3的配置：

I have the following CORS config on S3:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>Content-*</AllowedHeader>
    <AllowedHeader>Host</AllowedHeader>
</CORSRule>
</CORSConfiguration>

我的应用程序还设置了以下头：

My app also sets the following headers:

Access-Control-Allow-Origin: *
Access-Control-Request-Method: *

不过的 CloudFront的的返回字体，没有他们...为什么aren`t字体加载？ 先谢谢了。

But CloudFront returns fonts without them... Why aren`t fonts loaded? Thanks in advance.

推荐答案

Internet Explorer和Firefox的某些版本考虑字体的攻击向量并会拒绝，如果他们正在由另一个站点（跨域策略）提供的加载它们。

Some versions of Internet Explorer and Firefox consider fonts an attack vector and will refuse loading them if they are being provided by another domain (cross domain policy).

在标准的 HTTP 的服务器，所有你需要做的就是添加访问控制 - 允许 - 产地：* 头绕过CORS政策。现在的问题是 S3 的不支持发送。 （尽管根据本说明书应当支持CORS，首标不发送）。

On standard HTTP servers all you need to do is add the Access-Control-Allow-Origin: * header to bypass the CORS policy. The problem is S3 doesn’t support sending it. (Though according to the specification it should support CORS, the header is not sent).

有一种变通方法。 CloudFront的可以在另一台服务器需要指出，可以发送访问控制 - 允许 - 原产地头（你可以做到这一点，供应你的应用服务器 ;））

There is a workaround. CloudFront can be pointed at another server that can send the Access-Control-Allow-Origin header (You can do that with the server that serves your app ;) ).

这可以通过添加的定制原产地的到你的 CloudFront的的分布从完成的 AWS控制台的。接下来，您将需要添加的行为研究的与你的字体类型，并新添加的原产地的。您可以使用通配符作为文件名。 （你需要为你的每个字体类型做一次）。

This can be done by adding a Custom Origin to your CloudFront distribution from the AWS Console. Next you will have to add Behaviours with your font types and the newly added Origin. You can use wildcards for the filename. (You’ll need to do this once for each font type that you have).

例如：

Path Pattern: /assets/*.woff

---

当准备就绪，你可以验证头与存在：

---

When ready you can validate the header existence with:

curl -I http://cloudfrontid.cloudfront.new/assets/font.woff

希望你会看到访问控制 - 允许 - 原产地头，通过<提供的你的服务器的连同文件本身，缓存EM> CloudFront的的用头包括在内。

Hopefully you will see the Access-Control-Allow-Origin header, provided by your server along with the file itself, cached by CloudFront with the header included.

希望它能帮助！

这篇关于Firefox不使从CloudFront的字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！