Firefox/Chrome + S3 + Wagtail admin + webfonts = :(

[BrendanBerkley]

On localhost, admin works great in Firefox and Chrome.

On our staging server, it works fine in Chrome but not in Firefox. The CSS is pointing to the proper paths which load when I copy/paste them into the URL bar, but they just don't load in Firefox. The browser never completes loading as a result, which results in a spinning icon that give me anxiety 😛

The obvious workaround is "Do admin in Chrome," but I'm a Firefox homer so I'm posting here with hopes that a solution is found.

Thanks for all of your hard work! Wagtail has been so nice to work with.

[BrendanBerkley]

Just updated Chrome from 36 to 37 which causes the same problem.

[gasman]

Sounds like this is to blame: https://bugzilla.mozilla.org/show_bug.cgi?id=604421

On the one hand this isn't really a Wagtail-specific issue - it will affect any site (Django or otherwise) which hosts static files on a remote domain and doesn't take special measures to set Access-Control-Allow-Origin headers on the font files. On the other hand, it's probably in our interest to come up with a general fix for this at the Django level, if it isn't being worked on already. Hmm...

[gasman]

OK, after much pondering about where such a fix would go, and then seeing what options exist already, I believe the following addition to your settings file should fix this (assuming you're using the S3 backend from http://django-storages.readthedocs.org/):

AWS_HEADERS = {
    'Access-Control-Allow-Origin': '*'
}

(You'll need to re-run ./manage.py collectstatic after making this change.)

This will add the Access-Control-Allow-Origin header to all of your static files, allowing them to be fetched over cross-domain AJAX requests amongst other things - I don't believe there are any security issues with doing this, since presumably all the files you're uploading to S3 are intended to be publicly readable anyhow. (If https://bitbucket.org/david/django-storages/issue/159/proposal-12-allow-file-extension-mappings finds its way into a future release of django-storages, then it'll be possible to selectively attach this header to just the font files, which would make the setup a bit neater.)

[johannes-torchbox]

You can also set access policies on S3 on the bucket level. It's kind of hidden in the access permissions settings. Follow this guide to set the CORS settings on the whole bucket and make these problems go away: http://docs.aws.amazon.com/AmazonS3/latest/UG/EditingBucketPermissions.html

[reinka]

I found this issue via stackoverflow: https://stackoverflow.com/questions/46538682/wagtail-admin-icons-disappear-when-running-collectstatic-and-putting-everything

I'm facing the same issue described by the OP of that post, however I'm using boto3. So I tried to implement @gasman 's solution using AWS_S3_OBJECT_PARAMETERS however I'm getting an other error:

ValueError: Invalid extra_args key 'Access-Control-Allow-Origin', must be one of: ACL, CacheControl, ContentDisposition, ContentEncoding, ContentLanguage, ContentType, Expires, GrantFullControl, GrantRead, GrantReadACP, GrantWriteACP, Metadata, RequestPayer, ServerSideEncryption, StorageClass, SSECustomerAlgorithm, SSECustomerKey, SSECustomerKeyMD5, SSEKMSKeyId, WebsiteRedirectLocation.

I can not figure out which key is the right one for boto3, so I would really appreciate any help on this.

Also, on my s3 bucket I'm already using the follwoing CORSRules

<CORSConfiguration>
	<CORSRule>
		<AllowedOrigin>*</AllowedOrigin>
		<AllowedMethod>GET</AllowedMethod>
		<MaxAgeSeconds>3000</MaxAgeSeconds>
		<AllowedHeader>Authorization</AllowedHeader>
	</CORSRule>
</CORSConfiguration>`

[gasman]

@reinka Afraid we can't really help here, as this is a boto3 issue rather than a Wagtail-specific one - I'd suggest asking on Stack Overflow instead.

[SalahAdDin]

@reinka , @gasman , actually it is no needed, putting * could create security issues, instead you have to put your domain, it worked for me.

<CORSConfiguration>
	<CORSRule>
		<AllowedOrigin>http://www.example.com</AllowedOrigin>
		<AllowedMethod>GET</AllowedMethod>
		<MaxAgeSeconds>3000</MaxAgeSeconds>
		<AllowedHeader>Authorization</AllowedHeader>
	</CORSRule>
</CORSConfiguration>`