How to protect widgets from forged requests

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.

There is no way to prevent request forgery while under a clickjacking attack. No CSRF defense exists that can withstand a clickjacking attack, because there is no way to distinguish a real click from a fake click on the client side.

OWASP mentions in their CRSF prevention spreadsheet that one of the preconditions for the CSRF token defense to work is that no XSS attack is underway.

In my view this should also include clickjacking, as the CSRF token even hidden inside iframe cannot defend against clickjacking. The request is being forged by a direct user click.

So in the end we are not really stuck between CSRF and Clickjacking - CSRF defenses are meant for a different type of attacks where there is a lot less power on the side of the attacker.

So towards the questions you mention concerning clickjacking and CSRF:

What is the best solution (if any) to this problem? - The best defense for clickjacking on the client side is to open a new browser tab or a resized browser window with a page from your site and confirm the action there, as @Zack mentions. This is what the twitter button does, and there cannot be request forgery in this scenario either.
So there is a duality, it seems you are stuck between CSRF and Clickjacking - The CSRF defenses are not meant for cases like XSS or clickjacking attacks, they are effective only against less powerful attacks (email with malicious link, post malicious link in forum etc.)

There is no good programmable solution on clickjacking. Some companies sue spammers as a defense to clickjacking. Others choose to show popup windows once user clicked inside iframe, although it degrades user experience, especially in case of single-click-button. This is exactly what Twitter do for the “Retweet” button. Facebook currently deploys this approach for the “Like” button, asking for confirmation whenever requests come from blacklisted domains. I’ve heard that Googlebot perform some clickjacking heuristics while indexing pages with its “+1” button (checking computed styles, elements overlapping and so on)…

--UPDATE-- When you say "widget", if you mean something outside of your application that un-authenticated people interact with then disregard this answer. I reread your question and you never really state what you mean by "widget". We have all kinds of "widgets" that are with in our application. I thought that's what you were talking about, everything inside an application that only authenticated users were interacting with. If that is the case then this answer is what OWASP recommends.

--Original Answer-- "You don't want this request to be vulnerable to CSRF so you write an iframe to the page." No, don't make an iframe, that way you can do the normal OWASP recommendation for protecting against Cross Site framing.

To protect against CSRF hash some value(s), include it in your form (or ajax POST data), then check the hash value on the back end. If it matches it's from your site. The more specific data you can put in the hash the better.

Example: When a user signs in you can create a long random string and tie that to their session. This string must never be visible on your site or when viewing the source. Then lets say the user pulls up some specific record that they want to edit. You could then take that users long random string you created, append that records primary key to it, then hash them. The result of that hash you can include in your form as a hidden. Then on your backend before you do anything you check for the presence of that hidden, if it doesn't exist, abort. If it does exist, take that users random session string and the clear text primary key they submitted, hash them, if it matches you know it's from your site.

And it's easy to add this everywhere even if your site is already written (assuming your site has some single piece of code included on all pages, like a footer). Make the hashed value and place it in a hidden div somewhere in your footer. Then you can use jQuery to dynamically add this hash value hidden to all forms on the page. And you can use jQuery.ajaxPrefilter to add it to all ajax POSTs automatically in case you are doing a ajax post and not a normal form post. We've protects some very large sites that were already coded this way.

https://www.owasp.org/index.php/Cross-Site_Request_Forgery_(CSRF)_Prevention_Cheat_Sheet

If this sounds like that path you want to take I could show some of the jQuery code for doing it. As far as what your are hashing, how you want to check it on the backend, etc... that all depends on if you are using ColdFusion, PHP, PL/SQL (psp) etc... I can point you in the right direction if its one of those.

I think I understand what you're doing. You want to allow any site to iframe your widget, thus an attacker has complete control of the parent's source code and can create clickjacking routines to force users to click the widget.

So the iframe would be able to employ a CSRF token, as it should, which will protect from this type of attack so long as the parent frame is unable to read the token.

Clickjacking, as I am sure you know, is a completely different type of attack than CSRF and needs a different defense.

Really, if the widget is super important than implement 2-phase authentication. Use http://twilio.com to call the user and have him input a pin. Or send an email to the user with a verification link. Or ask the user to verify the action next time the user logs into your widget's website.

If you had control of the parent frame, then you would have more options. It would then be a XSS protection matter.

Update after the correct answer has been selected

So my approach to protecting against clickjacking is a bit overboard. Looks like it can be protected using a popup window with a confirmation action.

Because of CSRF you must be within an iframe...

No. You cannot remediate CSRF with form cookies and other nonce tricks. It does not matter where you put them.

So there is a duality, it seems you are stuck between CSRF and Clickjacking. What the best solution (if any) to this problem?

To remediate CSRF, you have to remove the threat by fixing the server that has the injection or malicious code, stopping the phishing email, etc. In the absence of a benign environment, you need to re-authenticate the user (or provide another challenge/response to ensure an interactive user). See: