Continuing with the subject of website security that I discussed in  Is Your Website Secure and Is Your Website Secure – Part 2, I want to address the issue of front-end security.

I had been under the impression that once I had an SSL certificate installed, my site was as secure from the front-end as it could be. Then I listened to episode 250 of The Shop Talk Show.

One of the first things I learned is that even when a website has an SSL certificate, entering a URL with http will first load the http version of the site and then switch over to https. Why is this a problem? It allows a man-in-the-middle attack where the attacker can read, insert and modify the data! Using HTTP Strict Transport Security header can prevent this from happening by ensuring that your site is always loaded over https.

Next, I learned more about preventing Cross-Site Scripting  or XSS attacks. An XSS attack occurs when a malicious script is injected into a website.  X-Content-Type-Options and X-XSS-Protection headers can be used to thwart a Cross-Site Scripting attack. X-Content-Type-Options makes sure that the browser only load scripts and stylesheets when the server indicates the correct MIME type. This prevents the browser from loading potentially malicious files. X-XSS-Protection stops pages from loading when they detect reflected cross-site scripting (XSS) attacks. While this is mainly an issue with older browsers, it doesn’t hurt to include this header.

The next thing on the front-end security agenda was preventing clickjacking  Clickjacking is an attack that allows other sites to trick users into clicking links that are not really on the site they are visiting. The X-Frame-Options header can be used to stop clickjacking.

Finally, a Content Security Policy (CSP)  can be implemented to further restrict resources that a website might load. For example, this header can be used to establish where a site might load a javascript file from.

Where to Learn More

The Observatory by Mozilla will allow any site to be checked for front-end security issues. Most sites will get an F prior to implementing front-end security measures.

How to add Headers

Fortunately, WordPress makes it easy for developers to add a few headers with the “send_headers” action. Here is an example of adding some of those headers which raised the grade of several sites from F to B.

1
2
3
4
5
6
7
8
function my_add_new_security() {
    header( 'Strict-Transport-Security: max-age=31536000' );
    header( 'X-Frame-Options: SAMEORIGIN' );
    header( 'X-Content-Type-Options: nosniff' );
    header( 'X-XSS-Protection: 1; mode=block' );
 
}
add_action( 'send_headers', 'my_add_new_security' );

Since this article just touches on potential front-end security issues, please listen to The Shop Talk Show and check out Observatory by Mozilla.