I’ve recently discovered an opportunity to add enhanced security via HTTP headers, as most big sites do. You can test your headers information with developer tools in any modern browser from the Network tab. There is also a good site that could check your HTTP headers for security. In fact most security headers are very easy to add to your site. Here’s how.
To determine which headers are necessary you can examine some good secured sites, like securityheaders.io itself etc. If you use WordPress engine there is a new plugin HTTP Headers, that helps on setting a required options. It needs some sort of a wizard for beginners. Still you may compare your site’s headers with a better secured sites to see what’s missing.
Without a plugin you may just add security headers into your .htaccess file with this code:
# added security headers
Header set X-Content-Type-Options "nosniff"
Header set X-XSS-Protection "1; mode=block"
Header set X-Frame-Options "SAMEORIGIN"
Header set X-Permitted-Cross-Domain-Policies "none"
Content Security Policy Header – Minimal Setting
You may easily break you site with content security header settings. Most options are easy. But setting right Content Security Policy will require time and a lot of testing. Here’s a good guide and explanation. In short you’ll need to whitelist all your scripts, files, images, fonts and everything coming from other domains.
Loosest Content Security header possible is below, it shouldn’t break anything. Check with your site and developer tools console:
Header set Content-Security-Policy "default-src *; img-src * data:; script-src * 'unsafe-inline' 'unsafe-eval'; style-src * 'unsafe-inline'; font-src * data:;"
If all goes well, you may continue to restrict sources to
'self' and by adding required source links, i.e. here I’m restricting CSS files and fonts to my known sources. Notice
*.wp.com source for fonts of my AMP pages. All additional sources must be listed or they gonna be blocked.
Header set Content-Security-Policy "default-src *; img-src * data:; script-src * 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline' cdn.jsdelivr.net fonts.googleapis.com; font-src 'self' data: cdn.jsdelivr.net fonts.googleapis.com fonts.gstatic.com *.wp.com;"
Now we could also prevent hackers from using iframes, but you’ll have to specify all frame sources you use on your pages, usually it could be some sharing services, Facebook etc.
child-src will do the job.
Header set Content-Security-Policy "default-src 'self' *.google-analytics.com *.facebook.com; img-src * data:; child-src 'self' *.w.org *.facebook.com *.youtube.com *.vimeo.com https://*.google.com platform.twitter.com platform.linkedin.com; script-src * 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline' cdn.jsdelivr.net fonts.googleapis.com; font-src 'self' data: cdn.jsdelivr.net fonts.googleapis.com fonts.gstatic.com *.wp.com;"
Just check console and explicitly unblock all needed resources.
Content Security Policy Header – a Wizard Plugin Idea.
Could someone make it within a wizard in a plugin for WordPress? A plugin could easily examine all scripts used on a particular website and to compile a complete Content-Security-Policy header. It will save a lot of time and effort.
There is a reference to content CSP tags here.
There are some CSP builder wizards availabe on the web, but no one could analyze a particular website yet to create a linked resources list policy list.
And here’s Chrome extension called Caspr: Enforcer that could help to analyze site’s policy permissions on the fly. Add permitted scripts and links inside to test that everything works as expected.