Stop Clickjacking by preventing your WordPress site loading in a Frame

Clickjacking is a potential security risk caused by someone loading your website in a frame on their domain, and hijacking interactions you make with that site.

For example if your website requires a user to login, it could log the username and passwords of users targeted by the clickjacking attack.

Fortunately preventing clickjacking in WordPress is fairly straightforward. You can just add this little snippet of code in your functions file to set the X-FRAME-OPTIONS header to SAMEORIGIN.

Clickjacking and Older Browsers

This will send a header along with WordPress that tells browsers to prevent pages showing up in frames that not on the same domain as your website.

Older browsers (browsers older than Internet Explorer 8 (IE8)) don’t understand the X-FRAME-OPTIONS header, so we have to fallback to JavaScript like in the example below:

In that example I have created a file called clickjack-protection.js I will place this within a folder called js in my theme. 

Of course we only want to enqueue the above script to load for browsers older than IE8, so we can use a good old conditional statement to do this, by adding the following to our functions file:

Posted by Matt Watson

Matt Watson is co-founder of the WordPress agency Make Do. Matt loves learning about personal, professional and web development. Learn more about Matt.

2 Replies to “Stop Clickjacking by preventing your WordPress site loading in a Frame”

  1. De Belser Arne May 3, 2018 at 9:15 am

    Should I put these 3 code snippets in the functions.php of my child theme?

    Reply

    1. Hi De Belser Arne, the first and last snippet can go in the functions.php file. The middle one (the JavaScript file) goes in a folder called ‘js’ in your theme in a file called ‘clickjack-protection.js’.

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.