Putting a fragment identifier inside of a query parameter - javascript

I am trying to redirect to a URL path that contains a query parameter called next, which is itself a URL path that contains a fragment identifier. Here is the JavaScript code I tried:
window.location.href = "/gauth?next=" + window.location.pathname + "#onload=exportToDrive"
Just to make myself clear, the #onload=exportToDrive should belong to the next URL path (not the URL that the browser is redirecting to). How can I specify that information to the browser so that it will handle this situation correctly?

You should always encode URL parameter values properly, using a function like encodeURIComponent:
window.location.href = "/gauth?next=" + encodeURIComponent(window.location.pathname + "#onload=exportToDrive");
This will ensure that any fragment identifiers (but also query string parameters) won't apply to /gauth.

Related

Arbitrary URL in Express URL parameters?

Say I have an express get function:
app.get("/api/processing/:type/:link/", () => { ... })
where :link is meant to be an arbitrary, full URL such as https://www.youtube.com/watch?v=ucZl6vQ_8Uo and :type can be one of a few values.
The problem is that whenever I try to use it, I get something like this:
Cannot GET /api/processing/audio/https://www.youtube.com/watch
How can I make sure that the URL is passed as a parameter instead of treated like part of the path?
If you want a full URL to be treated as a single path segment in your URL to match your app.get("/api/processing/:type/:link/", ...) route definition, then you have to encode it properly on the client side so that it actually contains no URL part separators in the encoded piece and thus will match your Express route definition.
You can use encodeURIComponent()for that as in:
const targetURL = 'https://www.youtube.com/watch?v=ucZl6vQ_8Uo';
const requestURL = `https://yourdomain.com/api/audio/${encodeURIComponent(targetURL)}`;
// send your request to requestURL
Then, make the http request to requestURL. Express will handle decoding it properly for you on the server-end of things.
This will generate a requestURL that looks like this:
"https://yourdomain.com/api/audio/https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DucZl6vQ_8Uo"
and you can see in that URL that there are no path separators or query separators, allowing Express to match it properly against your Express route delcaration. You will see that the /, : and ? characters are all escaped so when Express parses the URL into its parts, this whole URL is treated as a single path segment that will match your :link in the route definition.
You can encode the URL so it can be passed as a parameter:
app.get("/api/processing/:type/", (req, res) => {
const link = encodeURIComponent(req.query.link);
// your processing logic here
});
In this example, link is passed as a query parameter rather than part of the path, so you can use req.query.link to access it. When making the request, you would pass the link in the format /api/processing/audio/?link=https://www.youtube.com/watch?v=ucZl6vQ_8Uo.

Force language switch with URL parameter

Is there a way of forcing a language switch by URL parameter using javascript?
I want that when I go to this site 'wwww.google.com/en' he will be in English,
and when I went to 'wwww.google.com/it' he will be in Italian.
I have a button with setLanguage function that does this, but I want it to force it also when I get directly from the URL.
That type of configuration of a single page is typically handled with a query string, not a separate path. Instead of this:
https://www.google.com/en
Do this:
https://www.google.com/?lang=en
The query string data are available in searchParams:
let params = (new URL(document.location)).searchParams;
let lang = params.get('lang');
with window.location.pathname you will get a USVString containing an initial '/' followed by the path of the URL, and to get the first item from the url you can do something like:
const langURI = window.location.pathname.split('/')[1]
You can get info about the USVString here

Understanding htaccess and $_GETs

This is how my site is constructed...
articles.php contains the layout html to display all articles for a category.
articles.js contains the control elements to obtain db query results and pass to articles.php page. Within the js script is a dataTable that is displayed on the articles.php page.
ajax_articles.php contains the query request and return json file results of the query. Within the json file are links to the individual articles. The link is structured as a clean SEO URL (e.g., article/001/moby_dick).
This is how I understand htaccess to work.
When a user selects an article the URL (i.e., https://www.example.com/article/001/moby-dick) is passed through htaccess and with a RewriteRule ^article/([0-9]+)/([a-z_-]+) article.php?art_id=$1&art_name=$2 [NC,L] will display the SEO 'pretty' URL, BUT known to the system will be the URL containing the two parameters that can be used by a $_GET to obtain the two parameters. IS MY UNDERSTANDING OF THE PROCESS CORRECT?
I've noticed that with the htaccess I now have to use the full path name to load the support (.js) and graphic files. Further, I cannot obtain the variables via js $_GET.art_id and $_GET.art_name.
Any assistance is greatly appreciated.
You can't access the GET variables with javascript in this configuration because they do not exist after the URL rewrite. The query parameters have been removed.
There are still ways you can extract these values from the URL with window.location.href and the .split() method in javascript.
// var myurl = window.location.href; // this will get the string of your current URL. Used manual string in this example
var myurl = "https://www.example.com/article/001/moby-dick"; // manual URL for sake of an executable example
var spliturl = myurl.split("/"); // ["https:","","example.com","article","001","moby-dick"]
var articleid = spliturl[4]; // "001"
var articlename = spliturl[5]; // "moby-dick"
// see the variables in action
console.log("id: ", articleid);
console.log("name: ", articlename);

Passing a query string to a request as an actual string using Node and Express

So, basically what I am doing is scraping a webpage, getting all of the data I want and displaying it on a webpage on my site. When scraping this specific page i need the link within the 'href' tag. However, this particular site doesn't use regular links. Inside the 'href' tag is a query string. My plan was to take what was inside the 'href' and create a url to make my next request, but now when I try to pass the query string into the url, I can not access it in Node via req.params
I want to know if there is a way to maybe pass a query string without the server thinking it is a query string, or will I have to use req.query to take all the params and build the URL again from scratch?
Here are some examples of what I am talking about:
page1.ejs:
some.href = "?variable=bleh"
Server-side handling:
app.get('/display/:string', function(req, res) {
var url = "http://theurlineed.com/" + req.params.string;
});
This code does not work. When i click on the link it tells me it couldn't get /display/?variable=bleh
You need to encode the query string so that it is not treated like a query string in the URL:
some.href = encodeURIComponent("?variable=bleh");
So then your URL will be: /display/%3Fvariable%3Dbleh. As mentioned in the comments, Express will automatically decode the value in req.params.string so it will be the right value.

How many times should a URL-as-a-value-in-a-querystring should be encoded?

I'm really confused how many times should I encode a URL when it is set as a value in a querystring 'coz we know browser has their own encoding process. Here's the scenario:
I want to redirect to another location which I want to pass the previous URL:
Note: the current URL is http://localhost:8081/CostMonitoring/MainMenu.aspx?Option=AllCE
Method A (without encodeURIComponent()):
window.location = 'CostEstimateApproval.aspx?CEMID=40' +
'&ToStatus=1CE'+
'&PrevURL=' + window.location;
I get this in the address bar
http://localhost:8081/CostMonitoring/CostEstimateApproval.aspx?CEMID=40&ToStatus=1CE&PrevURL=http://localhost:8081/CostMonitoring/MainMenu.aspx?Option=AllCE
without encodeURIComponent(), everything works fine and the value of Request.Querystring("PrevURL") in the receiving page is
http://localhost:8081/CostMonitoring/MainMenu.aspx?Option=AllCE
which is correct.
Method B (with encodeURIComponent()):
window.location = 'CostEstimateApproval.aspx?CEMID=40' +
'&ToStatus=1CE'+
'&PrevURL=' + encodeURIComponent(window.location);
with this method I get this in the address bar:
http://localhost:8081/CostMonitoring/CostEstimateApproval.aspx?CEMID=40&ToStatus=1CE&PrevURL=http%3A%2F%2Flocalhost%3A8081%2FCostMonitoring%2FMainMenu.aspx%3FOption%3DAllCE
and the value of Request.Querystring("PrevURL") in the receiving page is
http://localhost:8081/CostMonitoring/MainMenu.aspx?Option=AllCE
which is also decoded correctly.
My questions:
Should I encode the URL-as-value? Will it be redundant if I encode it then the browser encode it again?
or should I let the browser encode it for me? If I let the browser, will the receiving page be confused from URL-as-a-value's value to the real URL value? Please consider this example:
http://www.domain.com/newpage.aspx?SameName=DifferentValue&PrevURL=http://www.domain.com/oldpage.aspx?SameName=DifferentValue&PrevURL=http://www.domain.com/anypage.aspx
as you can see, both URL (the real URL and the URL-as-a-value) when not encoded has the same data name which is SameName. How does the receiving side handle this? or the HTTP server?
Thanks in advance!
You should use encodeURIComponent (once), since you're encoding a url parameter.
As you noted at the end of your question, failing to encode the url with encodeURIComponent would be problematic if your url included an &, for example.
Note that your Method A only worked because your example prevUrl is somewhat simply formed, e.g. it doesn't include a second url parameter.

Categories