antiClick Jacking

[AndrewTraub]

When getting a site audited a few years ago for security by my merchant processor, they required me to put this code at the top of the head section of each page:

Code: [Select]

<style id="antiClickjack">body{display:none !important;}</style>
            <script type="text/javascript">
            if (self === top) {
                let antiClickjack = document.getElementById("antiClickjack");
                antiClickjack.parentNode.removeChild(antiClickjack);
            } else {
                top.location = self.location;
            }
            </script>When testing a new version of the site, and using a chrome extension to turn off javascript (called "Quick Javascript Switcher"), the page appears blank, so it seems this antiClick jack method makes the page not work if javascript is disabled. I'm not even sure how click jacking works, but am wondering if removing the display:none will allow users with javascript disabled to still use the site while also serving the antiClick jack purpose, or if there's a better way to prevent click jacking.

[Dave]

Try it and see? Seems like the fastest way to answer your question.

[mmerlinn]

Andrew, for an explanation of click jacking and options to foil, check out this link:

https://javascript.info/clickjacking

[AndrewTraub]

Thanks. My own research indicates that the prevention needs to come server side, using something like changing the X-Frame-Options or the content security policy. Now I just have to figure out how to do that in Apache.

[Jason Knight]

Don't take this the wrong way, but you know me... that has to be one of the worst scripts I've ever seen. I'm not even sure WTF anyone would even think that would do to stop clickjacking. Not only does it tell non-scripted users to go plow themselves, not a single thing it does would prevent framing.

You have it correct that the proper answer is simply to deny the page being opened in a frame.

X-Frame-Options: DENY

Being the correct header. If you are backing the system with PHP you can just:

header('X-Frame-Options:DENY');

At the start of your code. If you're hosted on Apache you can do it in the .htaccess or conf.httpd

Header append X-Frame-Options: DENY

Though I prefer to wrap that rule in file matching alongside the cache-control and font hosting fixes.

Code: [Select]

<IfModule mod_headers.c>
<FilesMatch "\.(ico|jpg|jpeg|png|webp|gif|swf|avi|wmv|mp4|ogg|js|css|woff|woff2|ttf|eot|otf|svg)$">
Header set Cache-Control "max-age=2592000, public"
</FilesMatch>
<FilesMatch "\.(woff|woff2?)$">
Header set Access-Control-Allow-Origin "*"
</FilesMatch>
<FilesMatch "\.(htm|html|php|pl)$">
Header set X-Frame-Options: DENY
</FilesMatch>
</IfModule>

Only sending that header for files that require it. The CSP thing is more hoodoo voodoo and opens a can of worms an older codebase might not be ready for, and X-Frame-Options has worked for 20+ years so... I don't see browsers dropping support for it any time soon.

[GrumpyYoungMan]

Jason, please don’t ever change!

I like your spade is a spade and I won’t dress it up approach!

When I get the time to sit in front of the computer as I work I think to myself “what would Jason say to this!”

[coothead]

...I think to myself “what would Jason say to this!”

You've been a very naughty boy. 

coothead