Mastodon: Emojis showing black on Firefox from 52 to 57

[PaoloVecchi]

Since upgrading Mastodon to v2.0.0 I received reports from users of seeing emojis as black blobs.

Tested it under Windows 7, Debian Stretch, Ubuntu 17.04 and it happens only with Firefox.
FF 43 seems to work fine.

Chrome, Chromium, Iridium, Opera do not show the same issue.

---

• [x] I searched or browsed the repo’s other issues to ensure this is not a duplicate.
• [x] This bug happens on v2.0.0

[chriswmartin]

Are you using a different content security policy than the one suggested in the production guide?

[PaoloVecchi]

Has the security policy changed since v1.6?
This is an upgrade from 1.6 to 2.0 where everything works as normal but apart from emojis issue only with Firefox. With all other browsers (not considering Edge in the category) it works perfectly.

Is there something specific in the security policies that could affect only Firefox from 52 to 57?

[chriswmartin]

I don't believe the security policy itself has changed since then but there is a new nginx location that includes emoji https://github.com/tootsuite/documentation/blob/master/Running-Mastodon/Production-guide.md#nginx-configuration
location ~ ^/(emoji|packs|system/accounts/avatars|system/media_attachments/files) { add_header Cache-Control "public, max-age=31536000, immutable"; try_files $uri @proxy; }
I don't know whether or not missing this location would cause your issue though.

[nightpool]

this is caused by not having style-src: unsafe in your CSP header. emoji SVGs use inline styles, which for some reason are blocked by some CSP setups

[PaoloVecchi]

Thanks @nightpool that was the issue.
I totally forgot to check the browser console to see that the CSP rule was blocking the SVGs as they are treated as script.

adding to style-src 'unsafe-inline' fixed the issue.
Thanks again.