how to implement extracting a user id from JWT on front end? - javascript

is there a way to simply extract the id of the user from the jwt since my jwt has the user id, I don't want it send 2 requests regarding 2 different things since the json web token has the id inside of it can i extract that info without having to send the id separately ??
// get the id from Cookies
let cookie = document.cookie;
console.log(cookie, "Raw");
cookie = cookie.split('; ');
//console.log(cookie, "Split");
let cookieObject = {};
for (let i = 0; i < cookie.length; i++) {
let element = cookie[i].split('=');
cookieObject[element[0]] = element[1];
}
//console.log(cookieObject);
let jwt = cookieObject.JWT
//console.log(jwt);
let id = `${cookieObject.id}`
//console.log(id);
instead of sending the id alone in another request ?

JWT Tokens transfered with cookies are usually not tagged with "secure", because the tokens are included in the header of each Ajax-Request to avoid CSRF (Cross-Site-Request-Forgery).
So I assume you can access the cookie.
Read the cookie:
const token = (document.cookie.match('(^|; )' + JWT_COOKIE_NAME + '=([^;]*)') || 0)[2] || '';
^^make sure to replace JWT_COOKIE_NAME with your cokies name.
Parse the cookie:
if (token.length > 0) {
try {
jwt = JSON.parse(atob(token.split('.')[1]));
console.log('my id: ' + jwt.id);
// ^^ have a look at your jwt token- I only guess it's jwt.id
} catch (e) {
console.log('error: ' + e);
}
}
So.. what's going on here:
A JWT-token consists of 3 parts separated by a dot.
We concentrate on the middle part- the payload.
token.split('.')[1]
The payload is base64 encoded.. to get the original string we have to use
atob()
or even include some code if this function is not available (in older browsers).
Finally:
JSON.parse()
returns a js object. This object can have any properties, so I had to guess that jwt.id exists and includes your id.

Related

Newbie needs with cryptojs and md5

I am a total newbie in JavaScript. I want to play with a Rest API. This requires the creation of an X-Auth key for authentication.
The documentation said:
The X-Auth-Key header should be constructed using the following
algorithm: md5(api_key + md5(url + X-Auth-User + api_key +
X-Auth-Expires)).
For example, consider a GET request to
https://<server_ip>/api/live_events/1?clean=true by the user 'admin'
with the api_key '1acpJN7oEDn3BDDYhQ' that expires on June 1, 2011
UTC. In this case the url parameter is '/live_events/1' and the
X-Auth-Expires value is '1306886400'. Thus the value of X-Auth-Key
should be computed as follows:
md5('1acpJN7oEDn3BDDYhQ' +
md5('/live_events/1'+'admin'+'1acpJN7oEDn3BDDYhQ'+'1306886400'))
=> md5('1acpJN7oEDn3BDDYhQ' + md5('/live_events/1admin1acpJN7oEDn3BDDYhQ1306886400'))
=> '180c88df8d0d4182385f6eb7e7045a42'
I have tried to implement this with CryptoJs so far, but unfortunately I can't get the values of the example:
<script>
var md5xx = CryptoJS.MD5('/live_events/1admin1acpJN7oEDn3BDDYhQ1306886400')
var md5yy = CryptoJS.MD5(('1acpJN7oEDn3BDDYhQ') + String(md5xx));
console.log(md5yy.toString());
// => 17222238c238b7ac9f76ea8d0fe1e330
</script>
I would really appreciate some help! Thanks in advance!
The md5 hash you obtained 17222238c238b7ac9f76ea8d0fe1e330 is correct.
The given 180c88df8d0d4182385f6eb7e7045a42 example with reverse lookup gives a different link /jobs/1admin1acpJN7oEDn3BDDYhQ1306886400 instead of /live_events/1admin1acpJN7oEDn3BDDYhQ1306886400.
You can cross check with
https://md5.gromweb.com/?md5=180c88df8d0d4182385f6eb7e7045a42
and
https://md5.gromweb.com/?md5=a39ee4e3aa79939249cb6b5e7faead28
//the hash you actually expected
var md5xx = CryptoJS.MD5('/jobs/1admin1acpJN7oEDn3BDDYhQ1306886400')
var md5yy = CryptoJS.MD5(('1acpJN7oEDn3BDDYhQ') + String(md5xx));
console.log(md5yy.toString());
//correct hash according to the given link
var md5xx = CryptoJS.MD5('/live_events/1admin1acpJN7oEDn3BDDYhQ1306886400')
var md5yy = CryptoJS.MD5(('1acpJN7oEDn3BDDYhQ') + String(md5xx));
console.log(md5yy.toString());
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>

Create Cookie Array that never expires with JS/JQuery?

I have a website with quotes and want users to be able to favourite quotes clicking on a star-icon. I have this code:
jQuery('.fav').click(function(event) {
event.preventDefault();
$this = $(this).parent();
var id = $this.attr("data-id");
// Build the expiration date string:
var expiration_date = new Date();
var cookie_string = '';
expiration_date.setFullYear(expiration_date.getFullYear() + 1);
// Build the set-cookie string:
cookie_string = "fav="+id+"; path=/; expires=" + expiration_date.toGMTString();
// Create/update the cookie:
document.cookie = cookie_string;
});
But this only saves one cookie "fav=id". I wanted to create a cookie array where all quotes that will be clicked are saved with their id in the cookie array "fav", so I could show a list to the user of all saved quotes. How could I accomplish this?
to write the array
var cookieArray= {};
cookieArray[id] = true; //or whatever value
var stringifiedArr = JSON.stringify(cookieArray);
$.cookie("favs",stringifiedArr , { path: '/' });
to read the cookie
var arrFromCookie = $.cookie("favs");
var favsCookieData = JSON.parse(arrFromCookie);
Use the JSON.stringify() and JSON.parse() methods to store an array or an object as a string in the cookie and to retrieve it later.
Cookies only can hold as strings. If I would like to simulate an array I will to serialize it and deserialize it. Can use Json library

Pulling specific variable from URL with javascript

How do I get the access_token variable in my URL using javascript .match()?
http://www.facebook.com/connect/login_success.html#access_token=pYBACn8NQeCAVWgiaFG4ZD&expires_in=0
Thanks a lot for your help!
var url = 'http://www.facebook.com/connect/login_success.html#access_token=pYBACn8NQeCAVWgiaFG4ZD&expires_in=0';
var token = url.split("#")[1].match(/access_token=([^&]+)/)[1];
The same as Parth's solution, but without split and a tiny bit more strict:
var url = 'http://www.facebook.com/connect/login_success.html#access_token=pYBACn8NQeCAVWgiaFG4ZD&expires_in=0';
var token = url.match(/(?:#|#.+&)access_token=([^&]+)/)[1];
Same as Eugene's but does not throw exception should the match fail
var url = 'http://www.facebook.com/connect/login_success.html#access_token=pYBACn8NQeCAVWgiaFG4ZD&expires_in=0';
var token = (url.match(/(?:#|#.+&)access_token=([^&]+)/) || ['', null])[1];
Returns null if the token is not present in the URL

OAuth nonce value

I am working with the FatSecret REST API
Im using the OAuthSimple javascript library to generate the signed url.
Here's the code I have -
params['oauth_timestamp'] = Math.floor(new Date().getTime()/1000);
params['oauth_nonce'] = '1234';
params['oauth_version'] = '1.0';
var paramStr = '';
for(var key in params){
paramStr += key+"="+params[key]+"&";
}
paramStr = paramStr.substring(0,paramStr.length-1);
var oauth = OAuthSimple();
oauth.setAction('GET');
var o = oauth.sign(
{
path:this.requestURL,
parameters: paramStr,
signatures:{
api_key:this.apiKey,
shared_secret:this.sharedSecret,
access_token: this.accessToken,
access_secret: this.accessSecret
}
});
console.log(o.signed_url);
return o.signed_url;
params is an associative array containing all the non oauth related parameters for this call.
When I use this signed url I get an "invalid/used nonce"
The OAuth Testing Tool uses the same OAuthSimple library and if I put in all the same parameters (including the timestamp) it generates exactly the same url.
The only difference is that the url generated by the testing tool works and gives me the full response from the server. The url generated by my code does't.
I tried various nonce values including sending a MD5 of the timestamp but I get the same error. The reason I'm using 1234 right now is that the testing tool uses 1234 by default and that seems to work.
Any help is appreciated. Thanks in advance.
Updating #Saravanan's answer with something that works on current browsers:
function genNonce() {
const charset = '0123456789ABCDEFGHIJKLMNOPQRSTUVXYZabcdefghijklmnopqrstuvwxyz-._~'
const result = [];
window.crypto.getRandomValues(new Uint8Array(32)).forEach(c =>
result.push(charset[c % charset.length]));
return result.join('');
}
console.info(genNonce());
The nonce value as per twitter documentation:
The value for this request was generated by base64 encoding 32 bytes of random data, and stripping out all non-word characters, but any
approach which produces a relatively random alphanumeric string should
be OK here.
Based on the above notes, I use the following javascript code to generate nonce value each time I send a request:
var nonceLen = 32;
return crypto.randomBytes(Math.ceil(nonceLen * 3 / 4))
.toString('base64') // convert to base64 format
.slice(0, nonceLen) // return required number of characters
.replace(/\+/g, '0') // replace '+' with '0'
.replace(/\//g, '0'); // replace '/' with '0'
Try this if it works!
Try this
This works every time
var nonce = Math.random().toString(36).replace(/[^a-z]/, '').substr(2);

Read a javascript cookie by name

I have set a cookie using
document.cookie =
'MYBIGCOOKIE=' + value +
'; expires=' + now.toGMTString() +
'; path=/';
Now there are between 5 and 10 cookies set on this site, is there a way to check the value ofthis cookie by name.
if (document.cookie.MYBIGCOOKIE == '1') {
alert('it is 1')
}
Use the RegExp constructor and multiple replacements to clarify the syntax:
function getCook(cookiename)
{
// Get name followed by anything except a semicolon
var cookiestring=RegExp(cookiename+"=[^;]+").exec(document.cookie);
// Return everything after the equal sign, or an empty string if the cookie name not found
return decodeURIComponent(!!cookiestring ? cookiestring.toString().replace(/^[^=]+./,"") : "");
}
//Sample usage
var cookieValue = getCook('MYBIGCOOKIE');
Unfortunately, Javascript's cookie syntax is nowhere near as nice as that. In fact, in my opinion, it's one of the worst designed parts.
When you try to read document.cookie, you get a string containing all the cookies set. You have to parse the string, separating by the semicolon ; character. Rather than writing this yourself, there are plenty of versions available on the web. My favourite is the one at quirksmode.org. This gives you createCookie, readCookie and deleteCookie functions.
function getCookie(c_name)
{
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0;i<ARRcookies.length;i++)
{
x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
x=x.replace(/^\s+|\s+$/g,"");
if (x==c_name)
{
return unescape(y);
}
}
}
Source: W3Schools
Edit: as #zcrar70 noted, the above code is incorrect, please see the following answer Javascript getCookie functions
You can use the following function:
function getCookiesMap(cookiesString) {
return cookiesString.split(";")
.map(function(cookieString) {
return cookieString.trim().split("=");
})
.reduce(function(acc, curr) {
acc[curr[0]] = curr[1];
return acc;
}, {});
}
When, called with document.cookie as parameter, it will return an object, with the cookies keys as keys and the cookies values.
var cookies = getCookiesMap(document.cookie);
var cookieValue = cookies["MYBIGCOOKIE"];
using jquery-cookie
I find this library helpful. 3.128 kb of pure convenience.
add script
<script src="/path/to/jquery.cookie.js"></script>
set cookie
$.cookie('name', 'value');
read cookie
$.cookie('name');
One of the shortest ways is this, however as mentioned previously it can return the wrong cookie if there's similar names (MyCookie vs AnotherMyCookie):
var regex = /MyCookie=(.[^;]*)/ig;
var match = regex.exec(document.cookie);
var value = match[1];
I use this in a chrome extension so I know the name I'm setting,
and I can make sure there won't be a duplicate, more or less.
document.cookie="MYBIGCOOKIE=1";
Your cookies would look like:
"MYBIGCOOKIE=1; PHPSESSID=d76f00dvgrtea8f917f50db8c31cce9"
first of all read all cookies:
var read_cookies = document.cookie;
then split all cookies with ";":
var split_read_cookie = read_cookies.split( ";" );
then use for loop to read each value. Into loop each value split again with "=":
for ( i = 0; i < split_read_cookie.length; i++ ){
var value = split_read_cookie[i];
value = value.split( "=" );
if( value[0] == "MYBIGCOOKIE" && value[1] == "1" ){
alert( 'it is 1' );
}
}
The point of Stack Overflow is to provide a database of good quality answers, so I am going to reference some standard source code and an article that gives examples:
http://www.codelib.net/javascript/cookies.html
Note: The code is regular-expression free for greatly enhanced efficiency.
Using the source code provided, you would use cookies like this:
makeCookie('color', 'silver');
This saves a cookie indicating that the color is silver. The cookie would expire after the current session (as soon as the user quits the browser).
makeCookie('color', 'green', { domain: 'gardens.home.com' });
This saves the color green for gardens.home.com.
makeCookie('color', 'white', { domain: '.home.com', path: '/invoices' });
makeCookie('invoiceno', '0259876', { path: '/invoices', secure: true });
saves the color white for invoices viewed anywhere at home.com. The second cookie is a secure cookie, and records an invoice number. This cookie will be sent only to pages that are viewed through secure HTTPS connections, and scripts within secure pages are the only scripts allowed to access the cookie.
One HTTP host is not allowed to store or read cookies for another HTTP host. Thus, a cookie domain must be stored with at least two periods. By default, the domain is the same as the domain of the web address which created the cookie.
The path of an HTTP cookie restricts it to certain files on the HTTP host. Some browsers use a default path of /, so the cookie will be available on the whole host. Other browsers use the whole filename. In this case, if /invoices/overdue.cgi creates a cookie, only /invoices/overdue.cgi is going to get the cookie back.
When setting paths and other parameters, they are usually based on data obtained from variables like location.href, etc. These strings are already escaped, so when the cookie is created, the cookie function does not escape these values again. Only the name and value of the cookie are escaped, so we can conveniently use arbitrary names or values. Some browsers limit the total size of a cookie, or the total number of cookies which one domain is allowed to keep.
makeCookie('rememberemail', 'yes', { expires: 7 });
makeCookie('rememberlogin', 'yes', { expires: 1 });
makeCookie('allowentergrades', 'yes', { expires: 1/24 });
these cookies would remember the user's email for 7 days, the user's login for 1 day, and allow the user to enter grades without a password for 1 hour (a twenty-fourth of a day). These time limits are obeyed even if they quit the browser, and even if they don't quit the browser. Users are free to use a different browser program, or to delete cookies. If they do this, the cookies will have no effect, regardless of the expiration date.
makeCookie('rememberlogin', 'yes', { expires: -1 });
deletes the cookie. The cookie value is superfluous, and the return value false means that deletion was successful. (A expiration of -1 is used instead of 0. If we had used 0, the cookie might be undeleted until one second past the current time. In this case we would think that deletion was unsuccessful.)
Obviously, since a cookie can be deleted in this way, a new cookie will also overwrite any value of an old cookie which has the same name, including the expiration date, etc. However, cookies for completely non-overlapping paths or domains are stored separately, and the same names do not interfere with each other. But in general, any path or domain which has access to a cookie can overwrite the cookie, no matter whether or not it changes the path or domain of the new cookie.
rmCookie('rememberlogin');
also deletes the cookie, by doing makeCookie('rememberlogin', '', { expires: -1 }). This makes the cookie code longer, but saves code for people who use it, which one might think saves more code in the long run.
I use this to read cookie:
function getCookie (key) {
let value = ''
document.cookie.split(';').forEach((e)=>{
if(e.includes(key)) {
value = e.split('=')[1]
}
})
return value
}
let name = getCookie(name)
Using string.match. Returns the cookie or null
function checkForCookie(name) {
let cookieString = document.cookie.match(name + '=[^;]+')
return cookieString ? cookieString[0] : cookieString
}
Here is an example implementation, which would make this process seamless (Borrowed from AngularJs)
var CookieReader = (function(){
var lastCookies = {};
var lastCookieString = '';
function safeGetCookie() {
try {
return document.cookie || '';
} catch (e) {
return '';
}
}
function safeDecodeURIComponent(str) {
try {
return decodeURIComponent(str);
} catch (e) {
return str;
}
}
function isUndefined(value) {
return typeof value === 'undefined';
}
return function () {
var cookieArray, cookie, i, index, name;
var currentCookieString = safeGetCookie();
if (currentCookieString !== lastCookieString) {
lastCookieString = currentCookieString;
cookieArray = lastCookieString.split('; ');
lastCookies = {};
for (i = 0; i < cookieArray.length; i++) {
cookie = cookieArray[i];
index = cookie.indexOf('=');
if (index > 0) { //ignore nameless cookies
name = safeDecodeURIComponent(cookie.substring(0, index));
if (isUndefined(lastCookies[name])) {
lastCookies[name] = safeDecodeURIComponent(cookie.substring(index + 1));
}
}
}
}
return lastCookies;
};
})();
This is my simple solution:
function getCookieValue(userKey){
let items = document.cookie.split(";")
for(item of items){
let [key, value] = item.split("=");
if(key === userKey)
return value;
};
return null;
}
I have come up with confusing yet very simple step after 2 hrs of concentration.
suppose a cookie 'username' is stored with a value 'John Doe'.
Then call readCookies('username'), this function (defined just below ) returns the value 'John Doe'.
function readCookies(requestedKey){
var cookies = document.cookie;
var temporaryKeyIndex=-1,temporaryKeySet=false,temporaryKey,temporaryValue;
var temporaryValueIndex = -1,previousTemporaryValueIndex=-2;
var readableCookie=[];
var a;
for(var i=0;i<cookies.length;i++){
if(cookies[i]!='='&&!temporaryKeySet){
temporaryKeyIndex++;
temporaryValueIndex++;
}
else{
temporaryKeySet = true;
if(cookies[i]==';'||i==(cookies.length-1)){
temporaryKey = cookies.slice(previousTemporaryValueIndex+2,temporaryKeyIndex+1);
if(cookies.length>temporaryValueIndex+2){
temporaryValue = cookies.slice(temporaryKeyIndex+2,temporaryValueIndex+1);
}
else{
temporaryValue = cookies.slice(-((cookies.length-1) - (temporaryKeyIndex+1)))
}
alert('tempkey: '+temporaryKey+', reqKEY: '+requestedKey);
if(requestedKey.trim()==temporaryKey.trim()){
alert(1);
return temporaryValue;
}
previousTemporaryValueIndex = temporaryValueIndex;
temporaryKeyIndex = ++temporaryValueIndex;
temporaryKeySet=false;
}
else{
temporaryValueIndex++;
}
}
}
}
Here is an API which was written to smooth over the nasty browser cookie "API"
https://github.com/jaaulde/cookies
The simplest way to read a cookie I can think is using Regexp like this:
**Replace COOKIE_NAME with the name of your cookie.
document.cookie.match(/COOKIE_NAME=([^;]*);/)[1]
How does it work?
Cookies are stored in document.cookie like this: cookieName=cookieValue;cookieName2=cookieValue2;.....
The regex searches the whole cookie string for literaly "COOKIE_NAME=" and captures anything after it that is not a semicolon until it actually finds a semicolon;
Then we use [1] to get the second item from array, which is the captured group.

Categories