Amazon S3 CORS(跨源资源共享)和Firefox跨域字体加载

Question

Firefox没有加载来自不同来源的字体,而不是当前的网页,这是一个长期存在的问题.通常,在CDN上提供字体时会出现问题.

在其他问题中提出了各种解决方案:

CSS @ font-face不支持Firefox,但使用Chrome和IE浏览器

随着Amazon S3 CORS的推出,是否有使用CORS解决Firefox中字体加载问题的解决方案？

编辑:很高兴看到S3 CORS配置的示例.

edit2:我找到了一个有效的解决方案而没有真正了解它的作用.如果有人能够提供有关配置和亚马逊对配置的解释所发生的背景魔法的更详细的解释,将非常感谢,就像nzifnab为它提供赏金一样.

Answer 1

2014年9月10日更新:

由于Cloudfront现在正确支持CORS,因此您不应再需要执行下面的任何查询字符串黑客攻击.有关详细信息,请参阅http://aws.amazon.com/blogs/aws/enhanced-cloudfront-customization/和此答案:https://stackoverflow.com/a/25305915/308315

好吧,我终于使用下面的配置使用文档中的示例进行了一些调整.

我的字体托管在S3上,但前端是cloudfront.

我不知道为什么它的作品,我的猜测是可能的<AllowedMethod> GET和<AllowedHeader> Content-*需要的.

如果精通Amazon S3 CORS配置的人能够对此有所了解,那将非常感激.

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

编辑:

一些开发人员正面临着Cloudfront缓存Access-Control-Allow-Origin标题的问题.AWS员工已在下面的链接(https://forums.aws.amazon.com/thread.jspa?threadID=114646)中解决了此问题,@ Jeff-Atwood对此进行了评论.

作为解决方法,建议从链接的线程使用查询字符串来区分来自不同域的调用.我将在这里重现缩短的例子.

使用curl检查响应头:

域名A:a.domain.com

curl -i -H "Origin: https://a.domain.com" http://hashhashhash.cloudfront.net/font.woff?https_a.domain.com

域A的响应头:

Access-Control-Allow-Origin: https://a.domain.com
Access-Control-Allow-Methods: GET
Access-Control-Max-Age: 3000
Access-Control-Allow-Credentials: true
X-Cache: Miss from Cloudfront

域名B:b.domain.com

curl -i -H "Origin: http://b.domain.com" http://hashhashhash.cloudfront.net/font.woff?http_b.domain.com

域B的响应头:

Access-Control-Allow-Origin: http://b.domain.com
Access-Control-Allow-Methods: GET
Access-Control-Max-Age: 3000
Access-Control-Allow-Credentials: true
X-Cache: Miss from Cloudfront

您会注意到Access-Control-Allow-Origin已经返回了不同的值,这些值已超过Cloudfront缓存.

Answer 2

经过一些调整后,我似乎没有查询字符串黑客就能使用它.更多信息:http://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/RequestAndResponseBehaviorS3Origin.html#RequestS3-cors

我将通过我的整个设置,以便很容易看到我做了什么,希望这有助于其他人.

背景信息:我正在使用具有asset_sync gem的Rails应用程序将资产放到S3上.这包括字体.

在S3控制台中,我点击了我的存储桶,属性和'编辑cors配置',这里:

在textarea里面我有类似的东西:

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

然后在Cloudfront面板(https://console.aws.amazon.com/cloudfront/home)中创建了一个发行版,添加了一个指向我的S3存储桶的Origin

然后添加默认路径的行为以指向基于S3的origin I设置.我还做了点击白名单标题并添加Origin:

现在发生的是以下情况,我认为是对的:

1)检查S3标头是否正确设置

curl -i -H "Origin: https://example.com" https://s3.amazonaws.com/xxxxxxxxx/assets/fonts/my-cool-font.ttf
HTTP/1.1 200 OK
x-amz-id-2: Ay63Qb5uR98ag47SRJ91+YALtc4onRu1JUJgMTU98Es/pzQ3ckmuWhzzbTgDTCt+
x-amz-request-id: F1FFE275C0FBE500
Date: Thu, 14 Aug 2014 09:39:40 GMT
Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: GET
Access-Control-Max-Age: 3000
Access-Control-Allow-Credentials: true
Vary: Origin, Access-Control-Request-Headers, Access-Control-Request-Method
Cache-Control: public, must-revalidate, proxy-revalidate, max-age=180
Last-Modified: Mon, 09 Dec 2013 14:29:04 GMT
ETag: "98918ee7f339c7534c34b9f5a448c3e2"
Accept-Ranges: bytes
Content-Type: application/x-font-ttf
Content-Length: 12156
Server: AmazonS3

2)检查Cloudfront是否与标头一起使用

curl -i -H "Origin: https://example.com" https://xxxxx.cloudfront.net/assets/fonts/my-cool-font.ttf
HTTP/1.1 200 OK
Content-Type: application/x-font-ttf
Content-Length: 12156
Connection: keep-alive
Date: Thu, 14 Aug 2014 09:35:26 GMT
Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: GET
Access-Control-Max-Age: 3000
Access-Control-Allow-Credentials: true
Cache-Control: public, must-revalidate, proxy-revalidate, max-age=180
Last-Modified: Mon, 09 Dec 2013 14:29:04 GMT
ETag: "98918ee7f339c7534c34b9f5a448c3e2"
Accept-Ranges: bytes
Server: AmazonS3
Vary: Origin
X-Cache: Miss from cloudfront
Via: 1.1 77bdacfea247b6cbe84dffa61da5a554.cloudfront.net (CloudFront)
X-Amz-Cf-Id: cmCxaUcFf3bT48zpPw0Q-vDDza0nZoWm9-_3qY5pJBhj64iTpkgMlg==

(注意上面是来自cloudfront的错过,因为这些文件缓存了180秒,但同样的工作是点击)

3)使用不同的来源命中cloudfront(但是在S3桶的CORS上允许使用一个) - Access-Control-Allow-Origin没有缓存!好极了!

curl -i -H "Origin: https://www2.example.com" https://xxxxx.cloudfront.net/assets/fonts/my-cool-font.ttf
HTTP/1.1 200 OK
Content-Type: application/x-font-ttf
Content-Length: 12156
Connection: keep-alive
Date: Thu, 14 Aug 2014 10:02:33 GMT
Access-Control-Allow-Origin: https://www2.example.com
Access-Control-Allow-Methods: GET
Access-Control-Max-Age: 3000
Access-Control-Allow-Credentials: true
Cache-Control: public, must-revalidate, proxy-revalidate, max-age=180
Last-Modified: Mon, 09 Dec 2013 14:29:04 GMT
ETag: "98918ee7f339c7534c34b9f5a448c3e2"
Accept-Ranges: bytes
Server: AmazonS3
Vary: Origin
X-Cache: Miss from cloudfront
Via: 1.1 ba7014bad8e9bf2ed075d09443dcc4f1.cloudfront.net (CloudFront)
X-Amz-Cf-Id: vy-UccJ094cjdbdT0tcKuil22XYwWdIECdBZ_5hqoTjr0tNH80NQPg==

请注意,在没有查询字符串黑客的情况下,域已成功更改.

当我改变Origin标题时,似乎总是X-Cache: Miss from cloudfront在第一个请求上有一个,然后我得到了预期的X-Cache: Hit from cloudfront

PS值得注意的是,当做curl -I(大写字母I)时不会显示Access-Control-Allow-Origin标题,因为它只是一个HEAD,我做-i使它成为一个GET并向上滚动.

Answer 3

我的字体正确提供,直到最后一次推送到Heroku ...我不知道为什么,但CORS中的通配符允许原点停止工作.我将所有prepro和pro域添加到存储桶设置中的CORS策略中,所以现在它看起来像这样:

<CORSConfiguration>
    <CORSRule>
        <AllowedOrigin>http://prepro.examle.com</AllowedOrigin>
        <AllowedOrigin>https://prepro.examle.com</AllowedOrigin>
        <AllowedOrigin>http://examle.com</AllowedOrigin>
        <AllowedOrigin>https://examle.com</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Authorization</AllowedHeader>
    </CORSRule>

</CORSConfiguration>

更新:添加您的http://localhost:PORT太

Answer 4

那么,文档说明你可以将配置作为"你的桶中的cors子资源".我认为这意味着我将使用配置在我的存储桶的根目录下创建一个名为"cors"的文件,但这不起作用.最后,我必须登录到Amazon S3管理区域,并在properties我的存储桶对话框中添加配置.

S3可以使用一些更好的文档......

Answer 5

就我而言,我没有在CORS配置中定义XML命名空间和版本.定义那些有效的.

变

<CORSConfiguration>

至

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">

Answer 6

在Amazon S3 CORS配置（S3存储桶/权限/ CORS）中，如果您使用此功能：

<?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>*</AllowedHeader>
</CORSRule>

CORS适用于Javascript和CSS文件，但不适用于Font文件。

您必须使用@VKen答案中表示的模式指定域以允许CORS：https：//stackoverflow.com/a/25305915/618464

因此，使用此：

<?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>*</AllowedHeader>
</CORSRule>
<CORSRule>
    <AllowedOrigin>https://*.mydomain.com</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

请记住将您的域替换为“ mydomain.com”。

之后，使CloudFront缓存无效（CloudFront / Invalidations / Create Invalidation），它将起作用。

Answer 7

有更好更简单的方法！

我个人更喜欢使用我的 DNS 子域来解决这个问题。如果我的 CDN 在 cdn.myawesomeapp.com 而不是 sdf73n7ssa.cloudfront.net 后面，那么浏览器就不会因为跨域安全问题而惊慌失措并阻止它们。

要将您的子域指向您的 AWS Cloudfront 域，请转到 AWS Cloudfront 控制面板，选择您的 Cloudfront 分配并将您的 CDN 子域输入到备用域名 (CNAME) 字段中。像 cdn.myawesomeapp.com 这样的东西就可以了。

现在，您可以转到您的 DNS 提供商（如 AWS Route 53）并为指向 sdf73n7ssa.cloudfront.net 的 cdn.myawesomeapp.com 创建 CNAME。

http://blog.cloud66.com/cross-origin-resource-sharing-cors-blocked-for-cloudfront-in-rails/