Prevent Angular from Encoding Query String portion of URL - javascript

The question is pretty self explanatory. I basically use '/' in a value on the query string of my URL, and angular (or the browser?) encodes it as '%2F'. Normally I wouldn't fight this, but I've read that '/' isn't fully restricted for use on the query string portion, and since this URL will be shared, it would be a lot prettier with '/' in place of '%2f'. Do you of any way to achieve this? Im using UI-router and the URL's are thus being formatted interally (i.e. I'm not setting $location.url()).
Edit: I can show you some code but there's nothing really descriptive on my end. Lets say I have
var queryVal = some/place/tobe;
And a state defined using ui-router with a url such as
url: /:foo/bar?q
Then I'm calling
$state.go('state', params);
Where params is an object with the proper parameters, including the unencoded queryVal.
The problem is that somewhere down the line angular or the browser is automatically turning
some/place/tobe
into
some%2Fplace%2Ftobe
And that encoded version is what shows up in the address bar.

Related

Pass a clean cookie variable in Javascript / Vue JS

My scenario is this.
I have the following variable:
_s.$cookie.set('videoURL', this.sample_url)
Now, when I looked into Chrome dev tools on Application -> Cookies, this is what I see.
As you may see, there is special characters in between the URLs, probably replacing the "/".
How do you clean this such that is passes a clean URL (eg. http://helloworld.com)?
UPDATE:
After the first answer below, I revised my code. However the same special characters still exist.
my code now is as follows. I'm using Vue JS.
urlEncoded = encodeURIComponent('http://helloworld.com')
decodeURL = decodeURIComponent(urlEncoded)
_s.$cookie.set('videoURL', decodeURL)
UPDATE 2
After passing the cookie variable to class variable, finally saw that the URL is now clean of special characters.
_s.videoURL = _s.$cookie.get('videoURL')
console.log(_s.videoURL)
You can't store it as a clean url since it has characters that aren't allowed in a cookie.
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie
Allowed characters in cookies
An option is to encode / decode the value when write/read the cookie
var url = "http://helloworld.com"
var url_encoded = encodeURIComponent(url)
console.log(url_encoded)
console.log(decodeURIComponent(url_encoded))
Updated after question edit, Vue JS is being used.
Here is two addons for Vue that might solve it for you
https://github.com/alfhen/vue-cookie
https://www.npmjs.com/package/vue-localstorage
And as commented, to cached a video URL across different pages of the website, localStorage might be more appropriate.

Alfresco - Getting the URL from server-side JavaScript

I'm trying to create a new page in Alfresco, but the tutorials gives to me the information that i have to create three files: new-page.get.js, new-page.html.ftl and new-page.get.xml , like Aikau - http://docs.alfresco.com/5.0/concepts/dev-extensions-share-page-creation.html
But the javascript is different, for example, I try to get the current URL with: window.location.search or make console.logor alert. But, in this three cases, I got "undefined" like "window is undefined"
Why is this javascript different? What type of javascript is? Where I can get tutorials, for example, to program this javascripts?
I want to make a window.location.search to get the current URL , but if I don't have this command, what can I use for this effect?
Normally, the Alfresco way wouldn't be to get the raw URL. Instead, you should be using the built-in argument processing
Since Alfresco itself is open source, we can look at Alfresco for some examples! So, starting with the groups get webscript, we see a URL pattern defined as:
<url>/api/groups?shortNameFilter={shortNameFilter?}&zone={zone?}&maxItems={maxItems?}&skipCount={skipCount?}&sortBy={sortBy?}</url>
With that, we see a whole bunch of pre-defined parameters on the URL.
Next, we look at the javascript controller behind that webscript, and we see things like:
var shortNameFilter = args["shortNameFilter"];
var zone = args["zone"];
Those URL parameters are then parsed into your webscript in the args variable, available for you to fetch as a hash.
No need to do any raw URL munging yourself, if you define your webscript correctly the framework does it all for you!
The JavaScript isn't different, the language itself is still the same.
window, console and alert are just APIs supplied by browsers. They aren't a native part of JavaScript.
The documentation you linked to should be your starting point for figuring how what APIs are available.
You can get the server URL in the Javascript web script (on the backend) by
var path = url.getServer()
http://localhost:8080 will be returned for example
Here is the list of available the methods - you can concatenate them to get a direct URL:

History.js and url encoding

I have the below example of a URI that I am requesting on my local site in Firefox v15.0.1, I have removed the hostname for brevity.
/search?cat=ngb%26b
and some paging links are shown on the resulting page with href's like this
?p=2&cat=ngb%26b
that do the below history request on their click event which is using https://github.com/browserstate/History.js/ which uses HTML5 History for it's state changes from what I know of it.
History.getState().url;
the url History.getState().url is giving me the below, this is passed to an async function on the click event:
/search?cat=ngb&b&p=2
and the history is then adjusting the browsers URI to this
/search?cat=ngb&b=undefined&p=2
and my Async action is failing because the "cat" param is now incorrect.
I can't URL encode the entire result from getState().url because that would be incorrect.
Is there something I am missing that needs to be done when facing this sort of situation?
Any help would be appreciated. Thanks.
UPDATE:
I am currently debugging this and looking at the object that the getState() function returns.. it has a "data" object property that has the correctly encoded params in it.
Potentially I could spin through and then add them on to the URL i pass to my function that makes an ajax request (instead of passing it the .url property) but this doesn't sound like a good idea when History is meant to handle hash url fallback for HTML4.
Answering my own question here.
I had two issues here, 1 with History.js and another with using JQuery.param in an incorrect situation because that encodes anything you give it to make it valid for URL use.
To fix some issues with the History.js plugin I found this useful branch
https://github.com/hrunting/history.js/tree/encoded-uris
which is still an open pull request but it helped me out a lot
unfortunately it does require having to re-bundle the changed files and minify them if you need to.
Once that was changed I also had an issue in the code with using $.param() to add the values in a state object that had been built up based on the values in the querystring. Obviously the "ng%26b" value was already encoded and param was encoding the % so it ends up as "ng%2526".
Hope this might help someone in the future anyway.
Thanks

How to pass information from a query string to a page tab app in Facebook using just Javascript/jQuery

I am trying to pass a single piece of information (using a query string) to my Facebook page tab application.
For example, if the user clicks on this URL:
-http://apps.facebook.com/myappname/?app_data=mydata
I would want to be able to access 'mydata' in the app.
From the reading I've done, Facebook does not allow GET requests, but it's possible to do this using app_data and signed_request.
However, I have not been able to find any information on how to set this up using the javascript SDK (is that even possible?) and .NET (ideally, I would be able to implement this with just JavaScript). I have no idea how to set up and read data using a signed_request, and the documentation around signed_requests is confusing me more than helping. I would really like simple instructions on how to implement this feature.
EDIT:
I think I've almost figured it out. In case anyone else is looking for an answer to this, I put what I did so far below. Also, if you see any room for improvement please let me know. I don't claim this is perfect by any means, but it works.
First, the url needs to be the page tab url, not the direct url to the app (like I posted above):
-http://www.facebook.com/pages/PageName/########?sk=app_#########&app_data=mydata
Here is the javascript code that is working for me:
//get value of signed request and split it
var signedRequest = $('#mainContent_hfSigned').val().split(".");
//decode json (this does not work on ie - needs to be replaced)
var decodedJson = window.atob(signedRequest[1]);
//parse json to gain access to parameters
var jsonParams = jQuery.parseJSON(decodedJson);
//append the app_data varible to ensure it's being read properly
$('.message').append('Your app_data param is "' + jsonParams.app_data + '"')
On jsfiddle:
http://jsfiddle.net/C3xsm/1/
One thing I know I still need to do is replace atob with a base64url decoder for javascript. I'm thinking about using this one:
http://code.google.com/p/stringencoders/source/browse/trunk/javascript/base64.js
If it works well, I'll update it here. Or if anyone knows of something that works better, please let me know.
ideally, I would be able to implement this with just JavaScript
That’s not possible, because as you already found out the signed_request parameter is POSTed to your page, and JavaScript has no access to POST parameters itself.
The documentation on the signed_request parameter has instructions on how to parse/decode it server-side; the example is in PHP, but it should be easy to transfer the basic algorithm (if you can call it that) to your .NET environment.

What is the ? in html links tags?

If you have a link or script tag, say to a css or js document, and you have something like ?1 in the url, what is that? Example:
<script src="home.js?1" type="text/javascript"></script>
Just a basic question...
This is for caching purposes. For example, the next time that script gets updated the developer can add a ?2 at the end and the browser will fetch the new version not the cached.
It denotes the beginning of the Query String, used to pass values around, or commonly just to create a randomized portion of the URL to avoid cached results.
In your example, the user is likely tacking on a new value to constantly create a unique URL that ultimately goes to the same place, and requests the same thing.
The part after the question mark is called the query string.
The query string is ignored when the server maps the request to a file on disk, but it can be used by server-side scripts.
In this case, the query string is being used to avoid caching.
When the script is changed, the query string can be changed to ?2 and it will not use the previous version from the cache.
It just keeps it from caching. Normally the browser caches those files, so adding a ? plus a random number will make the browser see it as a different url, thus reloading the file. Its not really necessary since most browsers will reload cached files with Ctrl+R.
What follows the ? is the query string. It is used to pass parameters to the src file and sometimes to prevent caching by adding a random number to the file string to force the browser to fetch from the server.
The '?' separates the resource identifier from the query parameters of the URL. I'm not sure if I'm naming them correctly. Often a CMS will add ?1 to the URL for a CSS or other page to avoid browser cacheing for the elements. Each time you edit the CSS, the number will get bumped to the next value so the browser is sure to reload the CSS or script or whatever.
? separates the URL from the parameters. Parameters would follow the ?. After the ? you should use & separate multiple parmaeters. e.g. www.google.com?q=URL&language=en

Categories