I'm no security expert, but I had some fun upgrading this website to use some security "Best Practices" for 2017 and I'll show you how to do the same.
I recently found out about Mozilla Observatory and ran my website through the tool. The results were depressing…a big, fat, ugly F. For those of you not familiar with grading in the US, an F is the lowest grade possible. It’s like a punch in the face to my pride.
Okay, well every day is a learning experience so let’s dive a bit deeper and maybe you can learn something new too!
Let’s Get Secure
By now, you probably already have a free HTTPS certificate from the wonderful Let’s Encrypt organization or another reputable Certificate Authority. But HTTPS is just one step in securing your website.
Mozilla Observatory provides a whole suite of tests to check your website for best practices such as HSTS, security related headers, and sub-resource integrity for any external assets. It will give you a score out of 100 and a letter grade to bolster your self confidence.
The reason for my F was ignorance. None of these features were implemented and I received a mere 5/100 score on their scale. My goal was to hit 90, which is considered an A.
Try it on your website now by visiting https://observatory.mozilla.org
How did you do? If you’re like me, you might not be constantly updating your website, blog, or app so maybe your website failed too. No worries.
If you are using Apache as a web server, you can just grab the following
.htaccess file that I whipped up and drop it in your web directory.
The headers are taken straight from the Observatory results where you can read more about the intent and security implications. You might want to change the Content Security Policy to be a little more strict and protect against XSS if you allow user input on your website.
Below the headers, there is a redirect to make sure the browser is always redirected to
https://www.* This will make Google (and your visitors) hit the secure www sub-domain. This is good for security, and good for SEO.
I also changed
<script> tag to include a sub-resource integrity which will avoid executing a malicious script if the CDN is compromised. This was easy because the jQuery CDN already supports this feature and provides the hash on their download page.
<script src=”https://code.jquery.com/jquery-2.2.4.min.js" integrity=”sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=” crossorigin=”anonymous”></script>
If your CDN doesn't provide this information, you can use a tool like SRI Hash Generator.
That wasn’t so bad. With the additional headers and one line of HTML, Observatory is reporting the coveted green A with a score of 90!
Compression and Caching
Now that your website is secure, why not make it fast too?
Take a look at the
<ifmodule> checks in the
.htaccess file above.
The deflate header will compress assets such as html, css, and js before sending it over the network. This means first-time visitors will see your content faster.
The expires header will tell the browser to cache the assets for several days since they likely don’t change often enough to warrant a round trip to the server. This means that returning visitors will see your content really fast.
Adding these two settings gave me a 94/100 from Google PageSpeed Insights on Desktop. Try it on your website and see how you do!