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.
Observatory results for ceriously.com
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, XSS preventative 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 simply ignorance. None of these features were implemented and I received a mere 5/100 score on Mozilla’s 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 quickly learn from my mistakes and just grab the following .htaccess file and drop it in your web directory. Or view this web.config if your are more familiar with ASP.NET.
The headers are taken straight from the Observatory results where you can read more about the intent and security implications (really, go read the docs). You might want to change the Content Security Policy to be a little more strict and protect against XSS if you website has any user input.
Below the headers, there is a redirect to make sure the browser is always redirected to [https://www.*](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!
Let's Get Secure_This article was cross posted from ceriously.com_www.ceriously.com