I'm developing an OAuth authentication flow purely in JavaScript and I want to show the user the "grant access" window in a popup, but it gets blocked.
How can I prevent pop up windows created by either window.open or window.showModalDialog from being blocked by the different browsers' pop-up blockers?
The general rule is that popup blockers will engage if window.open or similar is invoked from javascript that is not invoked by direct user action. That is, you can call window.open in response to a button click without getting hit by the popup blocker, but if you put the same code in a timer event it will be blocked. Depth of call chain is also a factor - some older browsers only look at the immediate caller, newer browsers can backtrack a little to see if the caller's caller was a mouse click etc. Keep it as shallow as you can to avoid the popup blockers.
Based on Jason Sebring's very useful tip, and on the stuff covered here and there, I found a perfect solution for my case:
Pseudo code with Javascript snippets:
immediately create a blank popup on user action
var importantStuff = window.open('', '_blank');
(Enrich the call to window.open with whatever additional options you need.)
Optional: add some "waiting" info message. Examples:
a) An external HTML page: replace the above line with
var importantStuff = window.open('http://example.com/waiting.html', '_blank');
b) Text: add the following line below the above one:
importantStuff.document.write('Loading preview...');
fill it with content when ready (when the AJAX call is returned, for instance)
importantStuff.location.href = 'https://example.com/finally.html';
Alternatively, you could close the window here if you don't need it after all (if ajax request fails, for example - thanks to @Goose for the comment):
importantStuff.close();
I actually use this solution for a mailto redirection, and it works on all my browsers (windows 7, Android). The _blank bit helps for the mailto redirection to work on mobile, btw.
Whatever it is you intend to do, there is a better way than a popup window lol? Odd generalization. Client would like the page they authenticated at to stay open, and the new site/landing page after authentication to open in a new tab. Yes, not my idea of excellent user experience... but it seems reasonable –
Purine create the popup ... -> fill the content into the popup. It's a URL which is opened in a new tab, but we must go to server first to authenticate (to determine if they're allowed to go to this new URL), and then reload page. It's after they clicked the button, after the server-side authentication, after the page reload that we must send to URL in newtab. So I guess I'm stuck with the issue of it being too divorced from user action. It's webforms btw which adds a wrinkle... –
Purine importantStuff.close to close the new tab and provide and alert in the original page. –
Ingram As a good practice I think it is a good idea to test if a popup was blocked and take action in case. You need to know that window.open has a return value, and that value may be null if the action failed. For example, in the following code:
function pop(url,w,h) {
n=window.open(url,'_blank','toolbar=0,location=0,directories=0,status=1,menubar=0,titlebar=0,scrollbars=1,resizable=1,width='+w+',height='+h);
if(n==null) {
return true;
}
return false;
}
if the popup is blocked, window.open will return null. So the function will return false.
As an example, imagine calling this function directly from any link with
target="_blank": if the popup is successfully opened, returningfalsewill block the link action, else if the popup is blocked, returningtruewill let the default behavior (open new _blank window) and go on.
<a href="http://whatever.com" target="_blank" onclick='return pop("http://whatever.com",300,200);' >
This way you will have a popup if it works, and a _blank window if not.
If the popup does not open, you can:
In addition Swiss Mister post, in my case the window.open was launched inside a promise, which turned the popup blocker on, my solution was: in angular:
$scope.gotClick = function(){
var myNewTab = browserService.openNewTab();
someService.getUrl().then(
function(res){
browserService.updateTabLocation(res.url, myNewTab);
}
);
};
browserService:
this.openNewTab = function(){
var newTabWindow = $window.open();
return newTabWindow;
}
this.updateTabLocation = function(tabLocation, tab) {
if(!tabLocation){
tab.close();
}
tab.location.href = tabLocation;
}
this is how you can open a new tab using the promise response and not invoking the popup blocker.
const tab = window.open(); observable.subscribe(dataUrl => tab.location.href = dataUrl); –
Supersession .then on then answer and that is why I got so confused :/ SRY... –
Eventide http://code.google.com/p/google-api-javascript-client/wiki/Authentication
See the area where it reads:
Setting up Authentication
The client's implementation of OAuth 2.0 uses a popup window to prompt the user to sign-in and approve the application. The first call to gapi.auth.authorize can trigger popup blockers, as it opens the popup window indirectly. To prevent the popup blocker from triggering on auth calls, call gapi.auth.init(callback) when the client loads. The supplied callback will be executed when the library is ready to make auth calls.
I would guess its relating to the real answer above in how it explains if there is an immediate response, it won't trip the popup alarm. The "gapi.auth.init" is making it so the api happens immediately.
Practical Application
I made an open source authentication microservice using node passport on npm and the various passport packages for each provider. I used a standard redirect approach to the 3rd party giving it a redirect URL to come back to. This was programmatic so I could have different places to redirect back to if login/signup and on particular pages.
I tried multiple solutions, but his is the only one that actually worked for me in all the browsers
let newTab = window.open();
newTab.location.href = url;
url? it is not assigned. –
Yingling http://example.com –
Kerrykersey window.open() cannot open new window programmatically and if we need to, that answer is one of the options. With the newTab variable we make reference to window.open() and later we can call it, insert the url we need, in my case url of some blob, and the new tab will be opened with on the entered url. –
Gorblimey My use case: In my react app, Upon user click there is an API call performed to the backend. Based on the response, new tab is opened with the api response added as params to the new tab URL (in same domain).
The only caveat in my use case is that it takes more for 1 second for the API response to be received. Hence pop-up blocker shows up (if it is active) when opening up URL in a new tab.
To circumvent the above described issue, here is the sample code,
var new_tab=window.open()
axios.get('http://backend-api').then(response=>{
const url="http://someurl"+"?response"
new_tab.location.href=url;
}).catch(error=>{
//catch error
})
Summary: Create an empty tab (as above line 1) and when the API call is completed, you can fill up the tab with the url and skip the popup blocker.
@here I found it's work fine in all browsers
window.open(URL) || window.location.assign(URL)
Just use window.location.href = yourUrl or a url with target='_blank'
window.open() has too many issues, if it's more than one second from a user action a lot of browsers treat it as a popup and block it
I didn't want to make the new page unless the callback returned successfully, so I did this to simulate the user click:
function submitAndRedirect {
apiCall.then(({ redirect }) => {
const a = document.createElement('a');
a.href = redirect;
a.target = '_blank';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
});
}
I have managed this by using setTimeOut function.
setTimeOut(function(){
window.location.replace("https://www.google.com/");
}, 1000)
✅✅✅✅✅
The easiest way to get rid of this is to:
Ex :
<script>
function loadUrl(location)
{
this.document.location.href = location;
}</script>
<div onclick="loadUrl('company_page.jsp')">Abc</div>
This worked very well for me. Cheers
© 2022 - 2024 — McMap. All rights reserved.