How the trick works
A browser can load one website inside another. That is a frame, and it is a normal, useful feature. It is how embedded videos and maps work.
A frame can also be made transparent and positioned anywhere. So an attacker builds a page with something tempting on it. A prize, a video, a captcha, a button that says Play. Sitting invisibly on top of that button is a frame containing a real website. The visitor sees the decoy. The click lands on the real site.
Nothing is hacked. No password is stolen. The visitor genuinely clicked. They just had no idea what they were clicking.
Why it matters, in shopper terms
The reason this works is that you are already logged in.
Your browser sends your session with every request, invisible frame or not. So the framed site sees a logged-in customer clicking a real button. Change the delivery address. Authorise the connection. Confirm. Delete.
From the site's side it looks exactly like you doing something normal, because it was you, on the real site, on a real button. The site has no way to tell the difference. That is what makes it nasty, and it is why the defence has to happen before the click, not after.
The two defences
You cannot detect the trick from inside the frame reliably. What you can do is refuse to be framed in the first place. There are two ways to say that, and you generally want both.
- →CSP frame-ancestors is the authoritative one. It is the modern standard, it is what browsers respect, and it lets you name exactly who may frame you, or nobody at all.
- →X-Frame-Options is the older header. It is blunter, offering roughly deny, same origin, or one named site. It is worth keeping for legacy coverage, but it is not where the real decision lives any more.
A trap worth avoiding
People often try to set X-Frame-Options as a meta tag in the page head, because that is the only thing some platforms let them edit.
It does not work. X-Frame-Options as a meta tag has no effect at all. It is not partial and it is not degraded, it is simply ignored. Worse, it looks like it worked, because the tag is right there in your source.
CSP fares slightly better as a meta tag, but frame-ancestors is specifically one of the directives that gets ignored in meta form. Which means the one part of CSP you would want here is the one part that will not survive the trip. Framing protection is a header job.
You may already be covered
Before you go hunting for a fix, check what you already send. This is one of the protections hosted platforms tend to set for you, and at the time of writing several of the large ecommerce and site builders block framing by default with no action from the owner.
If you are on a platform you control, or you have a custom server, then it is on you and it is a config change worth making.
Run a free check to see whether your site can be framed today.
We have step by step instructions for every major platform, including the ones that will not let you.
See how to block framing on your platform