It seems the experts are telling everyone that we need to look harder at website security. Well, that’s all fine and good, but how do you actually know that your site is secure? That was a question I needed to answer.
Fortunately, some quick answers come from a free tool that the fine folks at the Mozilla Foundation created. What’s nice is it gives you a simple grade, just like school. And just like school, I never thought I would still be getting F’s.
I know many people think about web security in terms of HTTPS, green padlocks and spam filters. The truth is there is a lot more to protecting your website and content than that. Things like HTTP security headers and Content Security Policies to name a few.
Mozilla’s tool called “Observatory” looks at these factors and more. It also pulls in third party security scans from other vendors.
Using Mozilla Observatory
The Observatory can be used in two ways. The first way is to test a domain such as yours. The second method is to take a look at other people’s scores. This is the part where you get to see how many well known sites also got an “F”. Sorry, but you’re not graded on a bell curve.
- Head on over to https://observatory.mozilla.org
- Enter in the domain name you wish to test [1].
- Tick any optional boxes [2].
- Click the Scan Me button [3]
If you prefer to look at other site’s first, you can click the text box with the blue border on the bottom [4]. The warning is simple to let you know some site links listed in the next page may be sites you won’t like. The service lists the most recent ones. I’ve highlighted the number of failing sites. You can click any of these sites to see their report.
Seeing the Test Results
Once you click the Scan Me button, the system will start the security analysis. The time depends on whether you include 3rd party scans. The time is maybe a minute or two and then you see your grade.
Going Deeper into the Results
It’s nice to see the B+, but at this point you probably want to know your problem areas so you can take action. Spoiler alert: It’s not easy to fix all these issues, but that shouldn’t deter you.
The results are laid out in a table fashion.
- A. The test name. You can also click the name to find out more about the test from Mozilla’s wiki.
- B. An indication of pass/fail and points. Any item that is optional will show a dash.
- C. An explanation of the test.
- D. More info on the test in a tooltip.
Plotting Your Progress
As you can see, I clearly improved from my “F”. And if I wanted to see my progress, I can view the Grade History section.
Taking it One Step Further
As my history shows, I started with a “F”. Some of my failed tests were a lot easier to fix than others. However, I did get a couple of “quick wins”. In my case, this site is using WordPress so there were 2 free plugins I could use.
If you’re not using WordPress or would like to learn more about securing your site, AppCanary did a nice HTTP Security Headers primer with examples.
Ideally, you have a “staging site” you can test first. If not, backup your site, document your settings and take screen snaps of what you’ve done. If you’re not careful, you could break your site.
HTTP Headers
I found this plug-in made it easy to set some basic security header settings. There are lots of settings in this plug-in, but I started with the first 4. From my staging site, I would set one option at a time and check the results. One thing you do need to be careful with is caching. Some caching options may interfere or override your settings. One one site, I found I had to explicitly tell my caching plug-in not to cache certain pages. I was noticing the header would be correct on the first-pass and then fail on repeat tests.
One “gotcha” of Mozilla’s Observatory is that you can only submit a test every 5 minutes. So, if you’re just checking your security headers, then check out another great free resource from Scott Helme at securityheaders.io. This tool quickly provides some useful information.
Content Security Policy Pro
This is another very useful plug-in. I had tried a couple of plug-ins, but found the interface on this one to be easier. The author also provided some templates to get you started. However, I found creating a content security policy to be time-consuming. As with the previous plug-in, you can get in trouble if you blindly set options and don’t test. In my case, it took me awhile to find dependencies.
For example, if you serve YouTube videos, you’ll need add them to your security policy. If not, you’ll see these glaring blank spots on your web pages. I found using Google Chrome’s DEV tools and console panel valuable in spotting errors. And you’d be amazed how many assets are delivered from places you didn’t even know. I’m still tweaking my policy. If you serve AMP pages, you’ll also need to check that you’re not blocking any assets.
