Pass a clean cookie variable in Javascript / Vue JS - javascript

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.

Related

Prevent Angular from Encoding Query String portion of URL

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.

Sending GET variables without "?"

I'm working on a website that is trying to call a link like this:
http://mysite/folder/g=foundation
I'm trying to troubleshoot some Javascript issues.
In the 'folder' subfolder there is an index.php that is looking for a 'g' GET variable.
As far as I'm aware this is incorrect and should be:
http://mysite/folder/?g=foundation
Where that would be sent to index.php in the 'folder' subfolder.
Is the first syntax ok? Is the '?' necessary for maybe having only one GET variable?
NOTE:
This whole site is completely working on a production server. This call works.
The version that breaks is on a newer Virtual Machine. Are there any configurations I can make to allow this kind of syntax?
The (?) question mark serves a purpose of indicating the initiation and declaration of query parameters. Excluding it would imply that you have a directory with an equals sign within the name.
RFC 1738 Uniform Resource Locators (URL) December 1994
3.3. HTTP
The HTTP URL scheme is used to designate Internet resources
accessible using HTTP (HyperText Transfer Protocol).
The HTTP protocol is specified elsewhere. This specification only
describes the syntax of HTTP URLs.
An HTTP URL takes the form:
http://<host>:<port>/<path>?<searchpart>
If, however, you must have it your way (without the question mark), you will need to use mod_rewrite.
To answer you question more literally. Yes. The (?) is necessary.
I believe this can be achieved with Apache rewrite module (mod_rewrite)
You can find a few examples here
http://www.sitepoint.com/apache-mod_rewrite-examples/
http://www.askapache.com/htaccess/mod_rewrite-basic-examples.html
Depends on the implementation of the server, but syntactically the ? should be required. Otherwise it looks like the browser is asking for an object named "g=foundation" with no parameters (rather than the default object with a parameter named g, which I believe is what you want).

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