This question is a more specific description of the problem I asked on this thread. Basically, I have a web application for which I am trying to use Twitter's OAuth functionality. This application has a link that prompts a user for their Twitter credentials. When a user clicks this link, a new window is opened via JavaScript. This window serves as a dialog. When a user clicks the link, they are redirected to Twitter's site in the dialog. On the Twitter site, the user has the option to enter their Twitter credentials. When they have provided their credentials, they are redirected back to a page on my site in the dialog. This is accomplished through a callback url which can be set for applications on Twitter's site.
All I am trying to do is read the URL of the window that I have opened. I am trying to read the URL to detect a change so I can react accordingly and write to the HTML DOM on the launching page. However, whenever I attempt to read the dialog window's URL, I receive a "permission denied" error. To isolate and re-create the problem, I created the following test which shows the problem.
<html>
<body>
<input type="button" value="test" onclick="startTest();" />
<script type="text/javascript">
var dwin = null;
var timeoutID = 0;
function startTest()
{
dwin = window.open("http://www.google.com", "dialog", "height=600,width=800", true);
timeoutID = setTimeout("timerElapsed()", 1000);
}
function timerElapsed()
{
if (timeoutID == 5)
{
clearTimeout(timeoutID);
alert("We're done!");
}
else
{
if (dwin != null)
{
alert(dwin.location);
}
timeoutID = setTimeout("timerElapsed()", 1000);
}
}
</script>
</body>
</html>
How do I get dwin.location? I'm really confused. I didn't think this was going to be this difficult.
Thank you for any help you can provide.
The short answer is that you aren't going to be able to, unless you revise your strategy.
The simple reason is that you've opened a new browser window. The user could follow links away from your site, and it would be a privacy violation for the browser to let you know what site they are at. URLs themselves are private information if they are not from your site.
The way around this is that if the window popup is your site, the code in that window could post back to the parent window what the current location of the child window is.
Not really an answer to your questions, but :
using a popup, you'll get hat kind of security restrictions/problems, because you're using another domain
depending on how you are opening it, the popup might be blocked by popup-blocking functionnalities of the browser
popups are really annoying for the users !
Is there no way you could avoid using a popup ?
Few days ago, I saw this blog post about Twitter and OAuth : Writing A Simple Twitter Client Using the PHP Zend Framework's OAuth Library (Zend_Oauth)
Even if you are not using Zend Framework nor PHP, that post shows it is possible to use OAuth to authenticate on twitter without using anyking of popup :-)
Why not just have your user redirected to the authentication page of Twitter (inside the current browser's window) when they click the link ? And have them back on the site when they're done authenticating ? There's probably a way to do that with twitter's API ?
Actually, it seems it's possible (quoting your other question) :
On the Twitter site, the user has the
option to enter their Twitter
credentials. When they have provided
their credentials, they are redirected
back to my site. This is accomplished
through a callback url which can be
set for applications on Twitter's
site.
Is the problem that your are afraid user's won't come back ?
Well, if they are clicking this link, it's probably because they want to do something on your site, no ? So, they will probably come back !
Maybe you could put an explain next to the link, to explain what it does and how ; that might help them know it's normal to be sent to twitter's authentication page ;-)
You cannot access the opened window URL since cross domain access is prohibited by all browsers. So you need to think of another way to do it.
Related
I'm working on a node-red project with uibuilder node.
It's basically [html, css, js(with vue)] pages.
I want to make the login authorization part where each user opens the allowed pages only.
How can I achieve that? by tokens? by permitting direct access to pages using URL?
P.S. I'm new to this part of web and I tried searching but couldn't find what I need.
I searched a lot, all was dead-end until I found this question
Detect if page was redirected or loaded directly(Javascript)
Instead of getting into trouble with tokens, and checking at each page if it is valid or not.
I permitted accessing any page (except the login) by the URL. If you want to access a page, it's only by redirecting.
I achieved that by checking a variable at page loading if the page has history or not. if no history, it is redirected to the login page.
I added this part to my vue-js file:
window.onload = function() {
if(document.referrer == "") window.location.href = "http://localhost:1880/Login/login.html";
}
P.S. If all the Internet said preventing accessing by URL is impossible, Don't be disappointed. Search more, because it's actually possible. 😉 😉
so i know this may sound stupid, but I want to know if there is any way that i could redirect someone to a website, and then display an alert box on the web page, using either javascript or any other interface that can be weaved into HTML5. I asked some of my classmates, and they didn't know, so I just need a confirmation that this isn't possible.
I have ran a few trials i found, but on further review, they wouldn't work.
edit I have control over the site, but I wish for the box to only pop up if i redirect it.
I can give the code if it would help, but I'm doubtful it will help
sorry for wasting your time if i did. thanks.
Similar to Gerard's answer, but using query strings. A possibly more standard solution.
On the first page:
<script>
window.location = 'https://{your website here}/?showAlert=true';
</script>
Then on the 2nd page.
const urlParams = new URLSearchParams(window.location.search);
const showAlert = urlParams.get('showAlert');
if(showAlert === "true") {
alert("Hello");
}
Note this will not work in internet explorer
You could communicate to the new site that it's a redirect by appending the route:
On the site you want to redirect from:
<script>
// if you can't use a normal link, change the url with JS
window.location = 'https://{your website here}/#redirect';
</script>
On the site you want to show the alert:
<script>
if (window.location.pathname.includes('#redirect') alert('What you want to say');
</script>
If you only have control over the first site, you could alert before redirecting, there wouldn't be much difference to the user since the alert blocks execution of other code.
You can call an alert box in a HTML document with JavaScript like this:
window.onload = function () {
alert("Hello World!");
}
-> https://jsfiddle.net/u8x6s31v/
You can also redirect somebody, if the page he's visiting is yours. Is that what you mean?
Update:
I think you can't see the URL where someone comes from with JavaScript. The only way to trigger scripts for some people is to add a hash.
window.onload = function () {
hashUrl = window.location.hash;
if (hashUrl == "#alert") {
alert("Hello World!");
}
}
Then call for example: domain.tld/path/index.html#alert
-> https://jsfiddle.net/u8x6s31v/1/
This is a vague questions with a lot of possible answers but seeing as how you're new, I'm going to speculate on what you might be asking and try to answer it.
It's not clear what you mean by "redirect".
Is this a server-side redirect like when you move/change a URL and you redirect the old URL to a new URL? Is this a Javascript meta refresh that you put in a 404 template? Is this a redirect that occurs after a user takes an action?
Regardless, you're going to have to "annotate" that user and then take action upon that annotation. The most obvious method would be based on the "referrer" HTTP header but it is also possible to do it based on the presence of a cookie.
Additionally, adding URL parameters to a redirect is trivially easy and often used for stuff like this.
The immediate things that come to my mind would be via Google Analytics (preferably implemented via Google Tag Manager because it'll make it easier).
Look into "outbound link tracking", "cross-domain tracking" and "UTM campaign tracking" (all related to Google Analytics and/or Google Tag Manager) and you'll probably find something that suits your needs.
URL shorteners are commonly used to mask parameters in links and there are open source libraries that allow you to host your own URL shortener (which you could integrate into your redirects) or do some other type of link tracking like is often used for affiliates.
The scenario I'm going to describe is about Excel, but you can spot the same problem in all Office tools.
Scenario:
In my default browser (NOT Internet Explorer) I'm logged in my own specific website, let's call it www.mypersonalwebsite.com
I have an Excel folder with the A1 cell containing a URL pointing to http://www.mypersonalwebsite.com/url/visible/only/to/loggedin/users
When I click on the URL in A1 cell:
my default browser is trying to open this URL
the website is refusing to serve the page because the request is coming from a non logged in user
So that's the problem: why is the browser complaining about the user session when I'm already logged in? And how can I solve it?
I found many similar questions about this problem on stackoverflow and I think I composed a portable and "definitive" solution to this problem.
First of all: why is the browser complaining about the user session?
The answer is "Microsoft Office Protocol Discovery". In a few words: it's something that works only if you are using Microsoft Windows and your default browser is Internet Explorer.
Basically, if you are not using Microsoft Windows OR your default browser is not Internet Explorer, when you click on an URL, the request sent to the browser will always be with an empty cookie. This means that, despite the default browser could use a correct cookie to authenticate the user, the request coming from Excel will never use it. But if you try to reload the page (and the webserver is not redirecting to a different error page), the browser will use the domain cookie and you'll see the correct page.
Second question: how can I solve this problem?
I think I found a very good solution, composed by an HTML part and a webserver part.
HTML part
Starting from the fact that you need to reload the page to use the cookie, I created a simple static page containing a little javascript code and some html. This is just an example. The main part of this code is here.
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<script type='text/javascript'>
function getParameterByName(name) {
var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}
</script>
<meta charset="UTF-8">
<script type="text/javascript">
window.location.href = getParameterByName('newUrl');
</script>
<title>Page Redirection</title>
</head>
<body>
<!-- Note: don't tell people to `click` the link, just tell them that it is a link. -->
If you are not redirected automatically, follow the <a href='<?php echo $newUrl; ?>'>link</a>
</body>
</html>
You can access to the querystring via javascript in many ways, you can find a very interesting thread here.
This static page, let's call it redirect.html, will only do one thing: it will redirect the browser to the page specified in the newUrl parameter. Now if I put in the A1 cell something like:
http://www.mypersonalwebsite.com/redirect.html?newUrl=http://www.mypersonalwebsite.com/url/visible/only/to/loggedin/users
and if I click on this URL:
Excel will go to this URL using the default browser
The browser will open the redirect.html page with an empty cookie
The browser will reload the page using the domain cookie
The user will see the correct page as an authenticated user
The pros of this trick are: it works on all platforms and on all browsers supporting javascript. The cons are that we need to modify all URLs in all our Excel folders.
The webserver part
To hide this redirection to the end users, and save us to modify all our Office documents, we can use another trick. In this example I will use nginx:
if ($http_user_agent ~* "(Excel|PowerPoint|Microsoft Office)") {
rewrite ^/(.*)$ /redirect.html?url=$1 break;
}
The meaning of this little if block is: if the incoming request is from a user agent like Excel, Powerpoint and so on, nginx will do an internal redirection to the redirect.html page, that will again do the browser redirection explained above.
This nginx redirect will completely hide the redirect trick, so we can use the original URLs and the users will always see the correct page.
I'm sure all this can be improved, and I would like to learn how to do it.
I hope this will help someone in finding a complete solution to this Office problem.
I have a joomla site and i have build a jquery mobile website so i use this this code below,
<script type="text/javascript">
<!--
if (screen.width <= 680) {
window.location = "site.com";
}
//-->
</script>
But the my problem is that in my jquery site i have a view full site this code i have put it in index.php of my main template so in every page that joomla creates so user can see this code exist
My question is how i can write this script when the user click from mobile jquery site "view full site" and not again redirect him back to mobile site.
Because when the user press the button view full site went to the full site and after seconds he turn back to mobile cause of this script..
Ideally, the switch should be done server-side, as the overhead in sending the page to the browser only to be redirected is unnecessary.
Here is a link to get you started with that but to focus on a your specific question: You can store the preference in a session variable which is then checked in your conditional above. This can be done either in JavaScript or php.
If you were to stick to your client-side approach above, you could modify the if statement to if (screen.width <= 680 && readCookie('screenpref') != 'desktop') {} after creating your setCookie() and readCookie() functions.
Like Joe said I also reccomend a serverside solution which is way more efficient check this link I just found, which is a quite comprehensive list of user agents you can check to redirect on : http://detectmobilebrowsers.com/
For those of you that don't know the user agent is part of the header of the request and describes the client software that oriniganated the request. Basicly its a string that you can use to identify which device requested your web page.
I'm trying to write a Firefox plug-in that accesses data from facebook.
Now I'm not sure how to get an access token.
I tried to implement the client side flow for desktop apps (with the fixed redirect uri), but the big problem I encounter there, is that JavaScript doesn't allow me to wait for the redirect to happen.
Any idea how this could be done?
As far as I understood it, because I don't have a webpage, the JavaScript API doesn't help much, right?
I guess that you are opening https://www.facebook.com/dialog/oauth in a browser tab to let the user log in and give you access. You don't need to pass a working redirect URL here, you can rather use something that will definitely not work, like http://my.extension.local/. Then you only need to detect when the tab gets redirected to that URL. If you have a classic extension, you register a progress listener on the <browser> element of that tab and look at onLocationChange() calls - once you see a location starting with http://my.extension.local/ you can cancel the request and close the tab, the necessary data is in the URL. If you use the Add-on SDK you can attach a ready event listener to the tab, something along these lines:
var tabs = require("tabs");
tabs.open({
url: "https://www.facebook.com/dialog/oauth?...",
inBackground: false,
onReady: function(tab)
{
if (tab.url.indexOf("http://my.extension.local/") == 0)
{
...
}
}
});