Re: [gs-discussion] CORS and custom web fonts

[Micky Hulse]

Just as an update to this conversation:

When I set to <Origin>*.mydomain.com</Origin>, when I went to load the fonts on:

foo1.mydomain.com

...and:

foo2.mydomain.com

The fonts only loaded on one domain and not the other.

When I set the Orgin to:

<Origin>*</Origin>

Everything seems to work perfectly.

Optimally, I'd like to lock down what origins my fonts can load from,
but I can live with * for every domain (I'm just happy that it works).

Anyway, I would love to get some feedback on my CORS. :)

Also, I've put some info here:

"Setting up Google Cloud Storage with CORS for Web Fonts"
<https://gist.github.com/4362104>

... maybe that will help others who are new to Google Cloud Storage.

Thanks for listening!

Cheers,
Micky

[Google Storage Team]

That's rather odd. We've been working on optimizing the Vary header and caching over the last few weeks. I'll take a look at that after the break.

--Paul

--

[Micky Hulse]

Hi Paul! Thanks so much for the reply, I really appreciate it. :)

On Sun, Dec 23, 2012 at 12:16 PM, Google Storage Team
<gs-...@google.com> wrote:
> That's rather odd. We've been working on optimizing the Vary header and
> caching over the last few weeks. I'll take a look at that after the break.

I'd hate to send you on a wild goose chase... I'm betting that my CORS
file isn't totally optimal and/or I did something wrong.

Maybe I forgot to dump cache? I thought I hit shift-refresh (in
Firefox) but I should probably test again.

For more details, I had my fonts setup on:

fonts.domainX.com

... and I was loading them on:

domainY.com
sub.domainY.com

When I had set:

<Origins>
<Origin>*.domainY.com</Origin>
</Origins>

(That's the CORS file on fonts.domainX.com)

... that's when I noticed that the fonts were loading on domainY.com
but not sub.domainY.com.

Again though, I'm sure I was doing something wrong... I'll test again
just to make sure wasn't overlooking something.

I'll be back with more details.

Thanks for your time, help and reply!

Cheers,
Micky

[Micky Hulse]

Hell, I'm back with updated info...

On Sun, Dec 23, 2012 at 2:34 PM, Micky Hulse <rgm...@gmail.com> wrote:
> Again though, I'm sure I was doing something wrong... I'll test again
> just to make sure wasn't overlooking something.
> I'll be back with more details.

So, here's the cobinations that I've tested:

[snip]

<Origins>
<Origin>*.yyydomain.com</Origin>
</Origins>

<Origins>
<Origin>sub.yyydomain.com</Origin>
</Origins>

<Origins>
<Origin>sub.yyydomain.com</Origin>
<Origin>yyydomain.com</Origin>
<Origin>*.yyydomain.com</Origin>
</Origins>

[/snip]

After each CORS change, I cleared my browser cache (Firefox 17.0.1 on
Mac 10.8.2) using Web Developer Toolbar.

The CORS file is being loaded in a bucket named:

fonts.zzzdomain.com

... which has a CNAME of zzzdomain.com.

The fonts are being called from:

yyydomain.com
sub.yyydomain.com

... the fonts CSS file is hosted here:

fonts.zzzdomain.com/type.css

I'm hosting a total of 4 web fonts.

Results:

Unfortunately, none of the above origin configurations appeared to do
the trick. On random refreshes (shift + refresh) would a font load (it
would be one, but not all).

I did not spend hours testing, so this was a very unscientific debug session. :D

As soon as I loaded this CORS file:

[snip]

<?xml version="1.0" encoding="UTF-8"?>
<CorsConfig>
<Cors>
<Origins>
<Origin>*</Origin>
</Origins>
<Methods>
<Method>GET</Method>
<Method>POST</Method>
<Method>HEAD</Method>
</Methods>
<ResponseHeaders>
<ResponseHeader>*</ResponseHeader>
</ResponseHeaders>
<MaxAgeSec>86400</MaxAgeSec>
</Cors>
</CorsConfig>

[/snip]

... and did a browser refresh, all the fonts loaded without problems.

Warning:

As you can probably tell, I am no CORS expert... I'm sure I'm doing
something wrong. I'm also new to hosting web fonts, so there could
also be a problem with my CSS or something similar.

Note:

If you'd like real domain and bucket names, please contact me off-list
and I will do whatever I can to provide the more sensitive details.

Happy Holidays!

Thanks!
Micky

[Google Storage Team]

If you send the info to gs-...@google.com we can take a look at it.  Offhand, I'd say that you'd want something along the lines of:

<?xml version="1.0" encoding="UTF-8"?>
<CorsConfig>
        <Cors>
                <Origins>

                        <Origin>http://yyydomain.com</Origin>
                        <Origin>http://sub.yyydomain.com</Origin>

                </Origins>
                <Methods>
                        <Method>GET</Method>

                        <Method>HEAD</Method>
                </Methods>
                <ResponseHeaders>
                        <ResponseHeader>*</ResponseHeader>
                </ResponseHeaders>
                <MaxAgeSec>86400</MaxAgeSec>
        </Cors>
</CorsConfig>

--Paul S.

Micky

--

[Micky Hulse]

Hi Paul, thanks for the reply and help, I really appreciate it. :)

On Mon, Jan 7, 2013 at 10:24 PM, Google Storage Team <gs-...@google.com> wrote:
> If you send the info to gs-...@google.com we can take a look at it.
> Offhand, I'd say that you'd want something along the lines of:

Awesome! I'll give it another shot and let you know how it goes. :)

This time around, I'll be using my work's domain for the bucket, so
all domains will be like:

fonts.yyydomain.com
yyydomain.com
sub.yyydomain.com

Before, the fonts.zzzdomain.com was a personal domain name I setup for
testing while the CNAME for my work propagated from Amazon to Google.
:)

Thanks again! I'll be back with my findings.

Have a nice night.

Cheers,
Micky

[Anjanesh]

Do we also have to give

<Origin>http://[bucket].commondatastorage.googleapis.com</Origin>

in <Origins></Origins> ?

[Google Storage Team]

Maybe.  The origin is the server that the javascript, etc, came from.  In other words, If http://foo.com/script.js tries to load http://bar.com/somethingelse, the web browser will look at the CORS headers from bar.com to see if scripts from foo.com are allow to talk to it.  If you have scripts on bucket A and resources on bucket B, bucket B's CORS config would need to allow bucket A as an origin.

Hope that helps.

--Paul S.

--
 
 

[Micky Hulse]

Oooh, that's a good tip! I'll test it out on my setup and post back results. :)

Thanks for sharing your expertise Anjanesh and Paul!

Cheers,
Micky

--
Micky Hulse
Web Content Editor
The Register-Guard
3500 Chad Drive
Eugene, OR 97408
Phone: (541) 338-2621
Fax: (541) 683-7631
Web: <http://www.registerguard.com>

[Micky Hulse]

I had some time to finally setup my work's Google storage account with our custom web fonts and related CSS.

Our buck name:

fonts.company.com

When I had:

<Origins>
    <Origin>*.company.com</Origin>
</Origins>

The fonts would not load on foo.company.com.

I (naively) tried:

<Origins>
    <Origin>fonts.company.com</Origin>
    <Origin>*.company.com</Origin>
</Origins>

Thinking I, for some reason, needed to have the bucket specifically included as an Origin ... Unfortunately, that did not work either.

I ended up just using:

<?xml version="1.0" encoding="UTF-8"?>
<CorsConfig>
    <Cors>
        <Origins>
            <Origin>*</Origin>
        </Origins>
        <Methods>
            <Method>GET</Method>

            <Method>HEAD</Method>
        </Methods>
        <ResponseHeaders>
            <ResponseHeader>*</ResponseHeader>
        </ResponseHeaders>
        <MaxAgeSec>86400</MaxAgeSec>
    </Cors>
</CorsConfig>

Which works great!

I have not tried naming specific domains as Origins... I guess I'm thinking if I can't just say *.company.com then I'd rather just use * and be done with it. :D

Anyway, I just wanted to update the thread with my latest (unscientific) findings.

Thanks!!!!

Cheers,
Micky

[Erick Fejta]

The basic idea here is that if the response headers vary based on the origin then we include a Vary: origin header in the response.

If you do not have CORS or configure CORS for <Origin>*</Origin> then the response is the same for all origins and the header is unnecessary.

--
 
 

[Micky Hulse]

Hi Erick! Thanks for the reply, I really appreciate it. :)

On Fri, Jan 18, 2013 at 2:34 PM, Erick Fejta <gs-...@google.com> wrote:
> The basic idea here is that if the response headers vary based on the origin
> then we include a Vary: origin header in the response.
> If you do not have CORS or configure CORS for <Origin>*</Origin> then the
> response is the same for all origins and the header is unnecessary.

Interesting.

I think I get it.

So, is it best to do:

<Origin>a.company.com</Origin>
<Origin>b.company.com</Orgin>
<Origin>c.company.com</Origin>

... or this:

<Origin>*.company.com</Origin>

... or:

<Origin>company.com</Origin>

I have not tried the last one above.

Optimally, I'd like to be more explicit and specify a domain/s that
are allowed, without having to list off all sub domains of a
particular domain. :)

I guess I'm wondering, is <Origin>*</Origin> the best solution? So
far, that's the only thing that I've been able to get to work (unless
I'm doing something wrong, which I'm guessing is the case). :D

Thanks again!

Cheers,
Micky

[Micky Hulse]

Doh, I just re-read Paul's e-mail from a few weeks back. He suggested:

<Origin>http://yyydomain.com</Origin>
<Origin>http://sub.yyydomain.com</Origin>

I hate to admit it, but I haven't tested putting in the full path with
protocol and such.

With the above suggestion, I'd have to specify all subs, but I guess I
can live with that (optimal usage would be one origin of
*.company.com).

Thanks!
Micky