Lets say you have a JavaScript widget which needs to fire off a request to your web application if and only if the user wants to click on it. You don’t want this request to be vulnerable to CSRF so you write an iframe to the page. Based on the origin inheritance rules the parent site won’t be able to read the CSRF token. However what about clickjacking (or likejacking )? Because of CSRF you must be within an iframe and there for the x-frame-options cannot help, and the same holds true for frame-busters.
The attacker is going to apply an SVG mask the iframe after the widget has loaded. This mask will make the iframe invisible. At this point the attacker can either resize the iframe to be the size of the page or have this now invisible iframe follow the cursor. Either way whenever the user clicks anywhere on the page, the iframe receives the click event and its game over.
So there is a duality, it seems you are stuck between CSRF and Clickjacking. What the best solution (if any) to this problem?
Clicking on the widget needs to open a pop-up window containing a new page — an iframe is not good enough, it must be a new window — which is entirely under the control of your web application. Confirm the action, whatever it is, on that page.
Yes, this is somewhat inelegant, but the present Web security architecture doesn’t give you any better options.