My Website Security
This site already uses HTTPS and SSL but whilst wandering aimlessly through some tech sites i stumbled upon reference to Mozilla’s Observatory which states;
The Mozilla Observatory has helped over 170,000 websites by teaching developers, system administrators, and security professionals how to configure their sites safely and securely.
Essentially it scans your site for security issues and gives you a report, hey i thought lets try it so i did and i got an F :open_mouth: :disappointed: :shit:
Ouch that was not what i expected. The report goes into detail on what was wrong and my failures were;
| Test | Pass | Score | Reason |
|---|---|---|---|
| Content security policy | :x: | -25 | Content security policy (CSP) header not implemented |
| HTTPS strict transport security | :x: | -20 | HTTP Strict Transport Security (HSTS) header not implemented |
| X-Content-Type-Otions | :x: | -5 | X-Content-Type-Options header not implemented |
| X-Frame-Options | :x: | -20 | X-Frame-Options (XFO) header not implemented |
| X-XSS-Protection | :x: | -10 | X-XSS-Protection header not implemented |
The games begin! starting with an epic trawl through documentation and sites on how to improve, during this i stumbled upon three that proved useful, written in a language i understood. Firstly Joseph Earl’s post on how to improve netlify static site security and secondly Philipp Häfelfinger’s post on migrating from jekyll to hugo
Both proved interesting but on Phillip’s he has a section on HTTP headers and using a .htaccess file to improve security. In the interests of full disclosure i copied the lines except the last two re CSP pasted here for completeness;
text code snippet start
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteCond %{HTTP:X-Forwarded-Proto} !https
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
Header always set Strict-Transport-Security "max-age=31536000; includeSubDomains"
Header always set X-Content-Type-Options nosniff
Header always set X-Frame-Options "SAMEORIGIN"
Header always set X-Xss-Protection "1; mode=block;"
Header always set Referrer-Policy "strict-origin"text code snippet end
With the above added to a .htaccess file store this in the static folder such that when hugo is run it copies this to the root of your public_html folder, re-running the mozilla test now gets me
Much better but still not enough, adding the last two lines from Philipp’s post but modified for this site;
text code snippet start
Header always set Content-Security-Policy "default-src 'self' https://leehalls.net https://*.leehalls.net https:; script-src 'self' https://leehalls.net https://*.leehalls.net; style-src 'self' 'unsafe-inline' https://leehalls.net https://*.leehalls.net; img-src 'self' https://leehalls.net https://*.leehalls.net; object-src 'self'; script-src 'self' https://leehalls.net https://*.leehalls.net; require-sri-for style;"
Header always set Access-Control-Allow-Origin "https://leehalls.net"text code snippet end
Gets me a more detailed report and a score of B+ so not quite what i anticipated given what i had read and it seems the reason is “Content Security Policy (CSP) implemented unsafely. This includes ‘unsafe-inline’ or data: inside script-src, overly broad sources such as https: inside object-src or script-src, or not restricting the sources for object-src or script-src.”
Obviously a little knowledge is dangerous :weary: more searching and trying to understand what i was doing led me to the third site, the actual Content Security Policy website https://content-security-policy.com/
Here it suggested that default-src 'none'; script-src 'self'; connect-src 'self'; img-src 'self'; style-src 'self';base-uri 'self';form-action 'self' is a good starting point for many sites, so i used that instead of the modified code and now my .htaccess file looks like;
text code snippet start
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteCond %{HTTP:X-Forwarded-Proto} !https
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
Header always set Strict-Transport-Security "max-age=31536000; includeSubDomains"
Header always set X-Content-Type-Options nosniff
Header always set X-Frame-Options "SAMEORIGIN"
Header always set X-XSS-Protection "1; mode=block"
Header always set Referrer-Policy "strict-origin"
Header always set Content-Security-Policy "default-src 'none'; script-src 'self'; connect-src 'self'; img-src 'self'; style-src 'self';base-uri 'self';form-action 'self'; require-sri-for style;"
Header always set Access-Control-Allow-Origin "https://leehalls.net"text code snippet end
Running the Observatory report again and i get . . . .
I’d say that deserves a drink! however i have an A+ rating but when refreshing the site it appears odd, things are not working the way they should a little bit of testing and i needed to add to the style-src section the following as per Philipp’s example ~ style-src ‘self’ ‘unsafe-inline’~ and everything seems to be working ok i just get a recommendation now from the report which states
Almost there!
Your current CSP policy allows the use of ‘unsafe-inline’ inside of style-src. Moving style attributes into external stylesheets not only makes you safer, but also makes your code easier to maintain.
So that gives me two red crosses with the second being for Clickjacking protection, using frame-ancestors still some work to do and i also want to understand why my modification of Phillip’s example failed to gain the same A+ rating and there are other things i do not understand & so my dear Watson the game continues!