How can I make an Ember action considered a trusted event so that window.open succeeds?

Question

My ember app must open a window (via an external JS API) and the corresponding API instruction should be called by a controller action, since it should then transition to another route.

My problem is that when the action is triggered, the window won't open. It will only open from a code dealing directly with a trusted event , ie a click from the user.

So, getting away from Ember and debugging with jQuery and supposing that the window.open() instruction is in the MyLib.login() , this code A works:

$('#mybutton').click(() ->
  MyLib.login()
)

but this code B doesn't:

$.myNamespace = {
  myLoginFunction: () ->
    MyLib.login()
}

$('#mybutton').click(() ->
  $.myNamespace.myLoginFunction()
)

and an ember action won't work either, generating the same code as B , which after debugging, is that window.open() will return an undefined object.

My questions are:

• Is there a way I can make code B work? (which would make a lot of sense for factorizing reasons)
• Is there a way an Ember action can also work?

PS: for more transparency, the lib I'm talking about is Deezer's JavaScript SDK.

PPS: pardon my CoffeeScript

Answer 1

First of all, what you are fighting here is the pop-up blocker that most browsers have enabled by default these days.

I am only familiar with the way the pop-up blocker works in Firefox (originally implemented in bug 252326 and not changed much since then), other browsers are similar however. The idea is simple: pop-ups can only open in response to an explicit user action. This goes beyond trusted events, only mouse clicks and key presses count as such actions. All other pop-ups are considered undesirable and will be blocked.

So, to answer your question:

How can I make an Ember action considered a trusted event so that window.open succeeds?

Any code running in response to a user action (meaning synchronous code execution) is allowed to open pop-ups. As to other code, eg delayed actions (including asynchronous callbacks to synchronous code executed in response to a user action) or code responding to application-generated events - the pop-up blocker won't let is pass and there is nothing you can do about it. A web application cannot fake trusted events, just as it cannot circumvent the pop-up blocker at will (either one would be a security issue).

Is there a way an Ember action can also work?

You have essentially two options:

1. window.open() will return null in Firefox if blocked (behavior in other browsers might be different). You could detect this and ask the user to add your site to pop-up blocker exceptions. However, most of them will ignore such requests.
2. You change the way your web application works. Eg you could open an empty pop-up window when the user clicks the "log in" button but only fill it with real content later. Or you could move the login action into the pop-up window. Or you could stop using pop-up windows altogether and display a layer in your main window instead. Your choice.

Obviously, the second option makes more sense and that's what all websites do. Fighting browser's security mechanisms is no fun.

Answer 2

Thanks all for your comments and feedbacks. Nevertheless, working on my problem, I can answer to my own questions.

Ember actions ARE considered trusted actions when triggered by a click or other user events.

My problem was kind of stupid. I realized that my login function was first calling a loginStatus function, the real login being executed in an asynchronous callback depending on the result of the result of the loginStatus response. It makes sense that the callback lost the "trusted" attribute.