Develop Reference

JavaScript fetch API call with string interpolation with string contains # always null

If I pass a string as "testabc#" it breaks somewhere on the way route to the controller. I'm not sure why the # is causing me the issue. Is this a key work in JavaScript causing the issue? I have tried all other different specials characters and they work just fine. Has anyone else come across this issue.
`/api/Controller/UpdatePassword?currentPassword=${currentPassword.value}&newPassword=${newPassword.value}&confirmPassword=${confirmPassword.value}`,

Anchor (#) is a feature of URL called fragment and it is used for internal page references. Using a question mark (?) and ampersand (&) can break your HTTP request like an anchor does because all of these things are URL features and it changes URL behavior.
To avoid this kind of error you must use encodeURI() or encodeURIComponent() like below:
with encodeURIComponent():
var url = `/api/Controller/UpdatePassword?currentPassword=${encodeURIComponent(currentPassword.value)}&newPassword=${encodeURIComponent(newPassword.value)}&confirmPassword=${encodeURIComponent(confirmPassword.value)}`
with encodeURI():
var url = encodeURI(`/api/Controller/UpdatePassword?currentPassword=${currentPassword.value}&newPassword=${newPassword.value}&confirmPassword=${confirmPassword.value}`)

# in a url is a special character which indicates a "fragment", which means a special part of the url which is an anchor in the page, of sorts. Thats why it breaks your code. ? And & are also special, and so are a few others.
You should url encode data that you pass in the url.

Try use encodeURI() to the url string before fetching, like:
var url = `/api/Controller/UpdatePassword?currentPassword=${currentPassword.value}&newPassword=${newPassword.value}&confirmPassword=${confirmPassword.value}`
encodeURI(url)

Passing encoded url as parameter javascript function

JS fiddle created at https://jsfiddle.net/ankitwasankar/sc50ecyf/ demonstrates, how the url sent as a parameter decode itself inside function. Is it the expected behaviour. Do I need to encode url passed as parameter again inside function. Currently when URL is opened with window.location.href it doesn't contain %26 instead contains &. So on server, HttpServletRequest.getParameterNames() returns two parameters instead of one.

What about split %26 in-between, like:
<a href='javascript:print_me("https://www.google.co.in/search?query=a%2" + "6b=26")'>Click</a>
This prevents the auto-decoding, although it's a little bit hacky.

How to escape slash in URL parameter

$.ajax({
url: "/api/v1/cases/annotations/" + case_id + "/" + encodeURIComponent(current_plink),
I am using encodeURIComponent to escape slash. But it does not work for me. This code convert "slash" to "%2F" but apache does not recognize it.
My php part like this :
$app->get('/cases/annotations/:case_id/:prep_name', 'authenticatePathologist', function($case_id, $prep_name) use ($app) {
If i try to send parameter which include slash, it returns page not found.
But if i try to send parameter which does not include slash, it returns OK.

You should encode it twice with encodeURIComponent, i.e. encodeURIComponent(encodeURIComponent(current_plink)). If you encode it only once, the server decodes it, and it's the same as not encoding it at all.

you should follow
AllowEncodedSlashes Directive

I too had a similar issue with url like:
?filters=new:item:text
where it required to escape the colons. for that I tried replacing it to format
?filters/:items/:text but that couldn't work as the Chrome was NOT encoding the '/' value.
Tried the js [escape() method][1] and it worked like charm.
let url = 'https://dev.test.something?filters=';
let filterString = 'new:item:text';
url = url + escape(filterString);
Output:
https://dev.test.something?filters=new%3Aitem%3Atext
Hope this finds helpful!!

Passing URL as string -- everything after '&' gets lost

I have an MVC application that makes an API call in an onclick event
#Model.MyApiCall is a string that looks something like this:
window.location = 'http://localhost/myPath?myImagePath=http://myimagepath&width=360&category=2'
This successfully calls my API. So far so good.
However, for some reason everything after & is getting cut off from myImagePath. So instead of myImagePath equaling what was sent from my click, I'm only getting this:
http://myimagepath

You have to encode your query string parameter. You can do it in javascript:
window.location = 'http://localhost/myPath?myImagePath=' + encodeURIComponent('http://myimagepath') + '&width=360&category=2'
using encodeURIComponent.
You can also do it inside your MVC controller using HttpUtility.UrlEncode only on the http://myimagepath part of your Model.MyApiCall.
[Edit]
If your myImagePath parameter is the entire http://myimagepath&width=360&category=2 string then of course Steve Danner is right and you should follow his answer.

The ampersand (&) is a special character and needs to be encoded to be properly parsed by the browser. You'll need to break up your query string and actual path into separate strings. Something like this:
<a href="javascript://" onclick="#(Model.MyApiCallPath +
HttpUtility.UrlEncode(Model.MyApiCallQueryString))"></a>
Your final js will look something like:
window.location = 'http://localhost/myPath?myImagePath=http%3A%2F%2Fmyimagepath%26width%3D360%26category%3D2';

You are trying to pass a url as a url parameter. Since the url in question contains special characters, you need to escape/encode the uri components.
Since you're using ASP.Net, you should wrap the string with:
window.location = Uri.EscapeUriString('http://localhost/myPathmyImagePath=http://myimagepath&width=360&category=2')

How can I submit a hash key in an URL parameter?

I have a Spring-MVC application with Freemarker as the view component.
In my templates, several links are generated which point back to my application and which include URL parameters containing a hash key (#).
Example:
parameter: Q#106368 11
URL generated by Freemarker with encoded param: testurl.html?key=Q%23106368%2011
I use JavaScript to redirect to this URL (reason: I use JS to manage loading of 2 frames at the same time).
The redirect method is simple:
function redir(url) {
window.location.href = url;
}
The JS call generated by Freemarker looks like
test
My problem is that the browser / Javascript converts back the URL encoded parameter, thinks there is a # and cuts off there.
When I use window.location.href='http://...' directly it works. Only when using the method parameter it seems to be magically URL decoded and then the redirect fails because the URL gets cut off at the #.
Is there an easy way to transmit the parameter correctly?
I am aware that I could replace the #, e.g. with $$$hash$$$, in the template and do the replacement on the server side again. But there are so many places I would have to change...

As Marc B commented, it is necessary to URL encode again. The method would be encodeURI(). However, this method does not encode the # sign. For my specific use case, I have to replace the # sign with %23 after the encoding.
The redirect JS method finally looks like:
function redir(url) {
url = encodeURI(url);
url = url.replace(/#/g, '%23');
window.location.href = url;
}
Comparing escape(), encodeURI(), and encodeURIComponent()

encodeURIComponent/decodeURIComponent is more thorough than just encodeURI, it will decode/encode '#' and event '/'

What browser are you using? I'm trying FireFox 5 and it doesn't convert %23 back into # in my testing. When you mouse over the link or copy the link location, what does that have? Are you sure whatever is outputting the link isn't doing the conversion?
Update
This isn't ideal, but it seems like it solves the problem:
<a onclick="url = 'http://localhost:8080/testappp/testurl.html?key=Q%23106368%2011';" href="javascript:redir(url);">test</a>
It seems like the href attribute is decoded. When I mouse over it I seen the # instead of the %23.