So currently, I have my url like this: http://localhost:8000/fund_monitor/fund_details/fundaccountid=4&transmission=3&startDate=2017-08-01&endDate=2017-08-02/
Then when I redirect the url using windows.location.replace(url), the url becomes like this: http://localhost:8000/fund_monitor/fund_details/fundaccountid%3D4&transmission%3D3&startDate%3D2017-08-01&endDate%3D2017-08-02/
So the equal sign gets converted to another format. Is there a way to retain the original format?
Thanks
It might be because the URL is not in a valid format. It's format is roughly protocol://host:port/path?query_params[1], where query_params looks like a=1&b=2 etc. But you do need the ? to separate the path from your parameters. Whatever you're using seems to treat the part fundaccountid=4&transmission=3&startDate=2017-08-01&endDate=2017-08-02/ as a path, and url encodes it so it can be a proper path. Perhaps try to write the URL as: http://localhost:8000/fund_monitor/fund_details?fundaccountid=4&transmission=3&startDate=2017-08-01&endDate=2017-08-02
and see if that works.
Though it will mean some changes to your backend.
[1] The full format you can see on Wikipedia or RFC 3986
You can use decodeURIComponent().
The decodeURIComponent() function decodes a Uniform Resource Identifier (URI) component previously created by encodeURIComponent or by a similar routine.
var url = 'http://localhost:8000/fund_monitor/fund_details/fundaccountid%3D4&transmission%3D3&startDate%3D2017-08-01&endDate%3D2017-08-02/';
console.log(decodeURIComponent(url));
Related
Generally, We are using querystring to get the detail from the url. I am using the url like:
"example.com?q=abc"
in php with javascript. I need to use the url like
"example.com/abc"
Is it possible to use url like this "example.com/abc" ?
By definition, the QueryString is what is after the first question mark, see https://en.wikipedia.org/wiki/Query_string for example.
So your second url does not contain a QueryString. But it does not mean you cannot get the "abc" value with JavaScript: you can get the full url via
window.location.href
and then you can parse it.
Given an arbitrary customer input in a web form for a URL, I want to generate a new HTML document containing that URL within an href. My question is how am I supposed to protect that URL within my HTML.
What should be rendered into the HTML for the following URLs that are entered by an unknown end user:
http://example.com/?file=some_19%affordable.txt
http://example.com/url?source=web&last="f o o"&bar=<
https://www.google.com/url?source=web&sqi=2&url=https%3A%2F%2Ftwitter.com%2F%3Flang%3Den&last=%22foo%22
If we assume that the URLs are already uri-encoded, which I think is reasonable if they are copying it from a URL bar, then simply passing it to attr() produces a valid URL and document that passes the Nu HTML checker at validator.w3.org/nu.
To see it in action, we set up a JS fiddle at https://jsfiddle.net/kamelkev/w8ygpcsz/2/ where replacing the URLs in there with the examples above can show what is happening.
For future reference, this consists of an HTML snippet
<a>My Link</a>
and this JS:
$(document).ready(function() {
$('a').attr('href', 'http://example.com/request.html?data=>');
$('a').attr('href2', 'http://example.com/request.html?data=<');
alert($('a').get(0).outerHTML);
});
So with URL 1, it is not possible to tell if it is URI encoded or not by looking at it mechanically. You can surmise based on your human knowledge that it is not, and is referring to a file named some_19%affordable.txt. When run through the fiddle, it produces
My Link
Which passes the HTML5 validator no problem. It likely is not what the user intended though.
The second URL is clearly not URI encoded. The question becomes what is the right thing to put into the HTML to prevent HTML parsing problems.
Running it thru the fiddle, Safari 10 produces this:
My Link
and pretty much every other browser produces this:
My Link
Neither of these passes the validator. Three complaints are possible: the literal double quote (from un-escaping HTML), the spaces, or the trailing < character (also from un-escaping HTML). It just shows you the first of these it finds. This is clearly not valid HTML.
Two ways to try to fix this are a) html-escape the URL before giving it to attr(). This however results in every & becoming & and the entities such as & and < become double-escaped by attr(), and the URL in the document is entirely inaccurate. It looks like this:
My Link
The other is to URI-encode it before passing to attr(), which does result in a proper validating URL which actually clicks to the intended destination. It looks like this:
My Link
Finally, for the third URL, which is properly URI encoded, the proper HTML that validates does come out.
My Link
and it does what the user would expect to happen when clicked.
Based on this, the algorithm should be:
if url is encoded then
pass as-is to attr()
else
pass encodeURI(url) to attr()
however, the "is encoded" test seems to be impossible to detect in the affirmative based on these two prior discussions (indeed, see example URL 1):
How to find out if string has already been URL encoded?
How to know if a URL is decoded/encoded?
If we bypass the attr() method and forcibly insert the HTML-escaped version of example URL 2 into the document structure, it would look like this:
My Link
Which seemingly looks like valid HTML, yet fails the HTML5 validator because it unescapes to have invalid URL characters. The browsers, however, don't seem to mind it. Unfortunately, if you do any other manipulation of the object, the browser will re-escape all the &'s anyway.
As you can see, this is all very confusing. This is the first time we're using the browser itself to generate the HTML, and we are not sure if we are getting it right. Previously, we did it server side using templates, and only did the HTML-escape filter.
What is the right way to safely and accurately insert user-provided
URL data into an HTML5 document (using JavaScript)?
If you can assume the URL is either encoded or not encoded, you may be able to get away with something along the lines of this. Try to decode the URL, treat an error as the URL not being encoded and you should be left with a decoded URL.
<script>
var inputurl = 'http://example.com/?file=some_19%affordable.txt';
var myurl;
try {
myurl = decodeURI(inputurl);
}
catch(error) {
myurl = inputurl;
}
console.log(myurl);
</script>
Either my encodeURICOmponent() in java script is adding to many characters or I don't understand exactly how it works.
I am using this line of code:
var encoded = encodeURIComponent(searchTerm);
When I look in the chrome inspect element after passing Abt 12 it shows the encoded variable added to the URL as this:
Abt%252012
I would think it should be this:
Abt%12
So when I pass it through PHP I get really odd results when actually conducting the search.
Form the comments, it looks like you are sending the value to server via jQuery ajax request, then it will take care of parameter encoding, so there is no need for you to encode it again.
$.get("website.php", { p: searchTerm, })
My problem is, I would like to create "pretty" URLs for visitors that look like this:
http://domain.com/Name
I have users that often send friends to my service, and I have been created customized pages for each one with the person's First Name in the headline. E.g., "John, here's an easy way to fix this widget"
I then save the page as an index.html file in a custom folder so the link structure for the custom page is domain/Name with Name being their First Name.
This is getting tedious and I would love to use Javascript to automate the process. However, the only documentation I can find on passing variables to Javascript involves "ugly" domains such as domain/jspass2.html?FirstName=John&LastName=Smith
Is there a way to beautify these domains and still pass the variables to a javascript code that inputs their name into the html code? I don't want to "cloak" an ugly domain (using a href, for example)
Thanks for the help!
Well, you could make it "prettier" by making the querystring cleaner.
example:
http://www.domain.com/?John,Smith
The javascript in your index file can read that.
var getQueryString = function() {
queryString = window.location.search;
queryStringCleaned = queryString.substring(queryString.indexOf('?') + 1 );
return queryStringCleaned;
};
if "http://domain.com/Name" is your domain, variable firstName will have the value "Name".
var firstName = window.location.pathname.match(/([\w-]+)\/?.*/)[1];
You could just take the whole URL in JS, and parse it "by hand". Use this regex (for example) to find the parameters passed.
In addition to Paul, I wrote you something that extracts the first name field from the url you provided. If the format is consistent, and you can obtain the url in javascript, you can use this. You may possibly have to create the page first, then redirect the user because javascript is a client side language and the page will already be rendered.
var url = "domain/jspass2.html?FirstName=John&LastName=Smith";
url = url.slice(url.indexOf("FirstName=") + 10, url.length);
url = url.slice(0, url.indexOf("&"));
I want to add hash to my URL. For example
http://somesite.com/somesubdomain#p1=1&p2=2&p3=3
when I try to do this, all I get is:
http://somesite.com/somesubdomain#p1=1%23p2=2%23p3=3
So, in short, how to I add special characters in my URL hash.
EDIT:
I am using YUI browser history manager.
var hash = "p1=1&p2=2&p3=3"
YAHOO.util.History.navigate("state",hash);
The way you're supposed to do this in YUI appears to be something like:
YAHOO.util.History.navigate('p1','1');
YAHOO.util.History.navigate('p2','2');
YAHOO.util.History.navigate('p3','3');
If you want the browser URL string to be http://somesite.com/somesubdomain#p1=1&p2=2&p3=3
The Calendar Example in the docs demonstrates this.