preventing clickjacking attack by javascript

Question

Clickjacking is when people trick users into clicking a button they're not supposed to, making them perform a malicious action.

I'm working on a product which, as an option for merchants, provides an iFrame component that can be embedded into a website to make a payment. Signed in users will see a button in the iframe that they can click to perform an important action. This action should only be called when the click is genuinely theirs.

i use this code to prevent clickjacking :

if (top == self ||  parent != top ||  document.location.hostname != document.domain) {  top.location.replace("https:\/\/www.mysite.com\/?404");}

can someone break into my code ?

note: i don't want to use x-frame-option

thanks

Answer 1

From an Iframe you cannot really control clicks from the parent, if they click inside the Iframe but another event is watching it, you cannot really prevent it being from a different domain.

But all is not lost, the Iframe itself cannot stop it, but it can be wrapped with something like this. This is assuming jquery, might be best to translate to a native version for your application, in the interest of showing an example I will use jQuery.

<div id="i_wrap"><iframe src="SRC"></iframe></div>
<script>
$('#i_wrap').on('click',function(event){
event.stopPropagation();
});
</script>

Of course this is not a cure-all, there are still ways around this. You could also use a portion of the new HTML 5 cross document messaging read here on it to do some validation and possible warn the user on an unsafe site (if your iframe gets no message, then you show no button).

Though I have no experience in the cross document messaging methods, and I am sure they probably don't allow different domains (though there may be ways around that, to an extent).

Though this question is not totally clear and I may not be understanding it perfectly, if you update your question with more details I will update my answer to suit.