Hello 🙂
Author doesn’t add any inline JS or CSS by default, so I believe this must be coming from plugins on the site.
If there is any CSS in the Custom CSS section in the Customizer, Author will inline this on the page, so if that is an issue you can move the CSS into a child theme’s style.css file.
Besides that, you will see the following inline CSS coming from WordPress itself:
img.wp-smiley,
img.emoji {
display: inline !important;
border: none !important;
box-shadow: none !important;
height: 1em !important;
width: 1em !important;
margin: 0 .07em !important;
vertical-align: -0.1em !important;
background: none !important;
padding: 0 !important;
}
All other inline CSS and JS will be coming from plugins.
Thanks for replying.
I have tried to create a new site without any plugins or settings — just finished installation guide and enabled Author. And there still has some CSP errors on console.
My CSP-Header:
default-src 'self'; script-src 'self' 'sha256-vP1LFpvG7zi1Cicxc8WNMvMtag9RnYm7kb7deRdLEHQ=' ; img-src 'self' https://secure.gravatar.com; style-src 'self' https://fonts.googleapis.com/css 'sha256-OyKg6OHgnmapAcgq002yGA58wB21FOR7EcTwPWSs54E='; font-src 'self' https://fonts.gstatic.com
(The hash is for CSS which you said, to enable emoji support)
The site link for your reference: [https://ghostblog.info/tem/wordpress/]
Okay I see. Those two requests are for Gravatar and Google Fonts.
Gravatar is used for commenter’s avatars if turned on in the Discussion settings, and it’s also used to get the avatar shown in Author’s sidebar. This can be switched off or an image can be uploaded instead via the Customizer setting for the avatar.
As for Google Fonts, I’m not that familiar with how CSP works, but is there a way you can mark it as a trusted external source? It can be disabled, but you’ll need to upload the fonts to the site and load with another plugin instead or switch to system fonts.
I am sorry that I may described it in a wrong way.
The CSP-Header is set by me. The Gravatar and Google fonts have been trusted, the issues are inline styles and scripts like the screenshot of Chrome’s console below. It’s too much to add each hash of them in the header, which is included at every time the server respond a request:
<img src=”https://img.vim-cn.com/17/d5fb342f01715226c779e22cc4febde3e135f8.png” />
For example, a javascript at [https://ghostblog.info/tem/wordpress/wp-content/themes/author/js/build/production.min.js?ver=4.5.3] is trying to add an inline style, which has been denied.
<img src =”https://img.vim-cn.com/01/3ecadaa6530bc30e96260a55c9f8b8b132a959.png” />
Hmm okay there’s not any JS/CSS inlined directly by Author, but the production.min.js file does indeed style some elements and this adds inline CSS to those elements.
I’m looking over the documentation on JS compliancy, and it looks like parts of the JS would have to be rewritten to match their protocol. If a stylesheet could be used it would already be used, but Javascript is needed for dynamic styling and this can only be accomplished by adding inline CSS to elements.
Is there a way to trust everything that comes from the production.min.js file? I’m afraid I can’t update the JS to match their protocol because then it would break for any site that does not support CSP.
I’m quite confused with “break for any site that does not support CSP”. A site which is using CSP has a stricter rule than the others, and there is no more difference. I think that if the site worked with CSP, it wouldn’t fail without CSP.
You are right. It’s hard to find a way that allows dynamic styling without adding inline CSS. Maybe I will just ignore this by adding unsafe-inline to CSP.
Thanks for your attention.
No you’re right, I misread part of the guidelines.
It looks like it would be possible to follow CSP and still add inline CSS via Javascript as long as it strictly adheres to using the CSS Object Model (source).
I’ll add it to the roadmap and see if we can comply with CSP in a future update.
