Reading, I was, about a web site security tool from Mozilla, so I had to try it. My site, the one you are on now, rated “D-“. It was no consolation that most sites rate “F”. Within the rating there was this criteria called “Content Security Policy” (CSP) that tweaked my interest.
Content Security Policy: Purpose
A CSP is a policy that you put into the head section of your page that whitelists all the sites that contribute to your page. If someone tries to add something to your page’s content but is not on you CSP, your browser will not load it. This stops a nasty infection of something called “cross site scripting” or XSS.
We’ve all had experiences with XSS. You go to a site for something innocuous such as sewing machine needles. As you load the page you receive popups or ads for male enhancement drugs. Of course the site owner would not intentionally try to sell you Viagra with your sewing machine notions. What happened is a bad case of XSS, where some nasty fool injected malicious code into the unbeknownst site owner’s page. If you thought you were mad, you should talk to the site owner! How did someone do this?
CSP works on something called “Same Origin Policy”, or SOP. It is pretty easy to understand. The site owner approves of only specific sites were his content originates. All other content is banned. This is called whitelisting. In our case the CSP would let in sewing machine notions, maybe Google content, but ban everything else. Everything includes Viagra ads would not display.
How is Content Security Policy Implemented?
CSP is implemented in your browser. It is your browser that reads the CSP, then evaluates the content on the page. If the content’s origin is not explicitly listed on the CSP, the browser does not display it. Elegant, really. As browser makers improve their product, you get a more updated CSP.
Content Security Policy: Implementation in WordPress
I looked for a CSP plugin, but the only one I found had not been updated in 11 months and was WP backlevel by at least 6 versions. I simply added it to my header.php file.
CSP is really not difficult to implement. I had already had a child theme, and had hacked the code already. I already had header.php in my child theme, so I added a single but somewhat complex line in the <head> section.
<meta http-equiv=”Content-Security-Policy” content=”
default-src ‘self’ ;
font-src ‘self’ https://fonts.gstatic.com https://fonts.googleapis.com http://feed.aqicn.org;
img-src ‘self’ *.gravatar.com http://feed.aqicn.org;
script-src ‘self’ http://feed.aqicn.org translate.google.com www.google.com translate.googleapis.com www.google-analytics.com www.gstatic.com ‘unsafe-inline’;
style-src ‘self’ ‘unsafe-inline’ fonts.googleapis.com translate.google.com”
>
I have spaced out the code for readability and not minified it.
Don’t try to copy my code exactly because each site will be different. I have two pieces of content that are unique: Google Website Translator, Google Analytics and Air Quality China. My very small CSP worked for AQICN, but broke my Google Website Translator. This is because I ask AQICN for data, they send it back to me and I display it. The CSP is ok with this. For Google Site Translator I ask it to set up a box with languages to translate, but instead of sending back the content for me to display, it displays it. As Google is now a 3d party and not “Same Origin Policy”, despite listing the Google sites in my CSP, it fails and is thus blocked by the browser. I have done enough web research that I could not find a solution, or even another web site that had successfully implemented a CSP with Google Site Translator.
I hope in the future to fix this problem, but right now I’m not hopeful. My code to Google is pretty short, but here’s what comes back from Google to my browser:
My Google Site Translator code is blocked by my Content Security Policy. Sad.
The graphics for the site translate appear, but not the functionality. Here is a CSP evaluation, which explains why Google Site Translator is being blocked.
Content Security Policy evaluation for Google WebSite Translator. It is blocked.
Content Security Policy Tradeoffs
I am somewhat conflicted. On one hand the CSP is a great security policy, already implemented by browsers, mostly Ok, and protects against cross site scripting XSS. On the other hand 3d party sites such as Google are banned from my web pages, due to the Same Origin Policy SOP.
For now I’ll stick with my CSP and see how it goes.
Incidentally, after I implemented my CSP and can see my CSP code in my HTML <head> section, I went back to Mozilla’s Observatory and still received a “D-“. It seems like they do not evaluate my CSP, though it is in plain sight.
I use Firefox, Chrome and Opera when trying to debug my CSP. They all render slightly differently. While my AQCN shows up properly in Firefox, it is a little ragged in Chrome and Opera, who could not download the AQCN graphics. All three give conflicting error messages about Google Site Translator.
Google Site Translation Content Security policy error in Firefox
Google Site Translation Content Security policy error in Chrome
Google Site Translation Content Security policy error in Opera
