Redirecting URL With Token Parameter That Contains '+' - javascript

I'm having issues creating a redirect to an URL from an API that I'm using within my application. I request a session token which is used in the redirect URL, but I experience issues when the token contains a + in it. My guess is that the browser is picking this up as a space instead of an actual token character which is causing the redirect to fail ever so often.
Here is an example token that can come back from a request to the API: 1w5OX65MRj+3J9R5AXjMWQLAAXIo5TXa
Looking at the network tab I see that it tries to request the redirect with this token instead:
1w5OX65MRj 3J9R5AXjMWQLAAXIo5TXa, which would be why it's causing issues.
I tried replacing the + with %2B but it seems like my application isn't replacing it at all which is a little odd to me.
Here is my code:
let token = "";
$.get('/_token_req', {contentType: "application/x-www-form-urlencoded"}, (response) => {
//console.log(response);
token = response;
token = token.replace(/\+/g, "%2B"); // this doesn't replace the + character for some reason
$.get('/_redirect', {token: response}, (response) => {
//console.log(response);
if(response == "OK"){
window.location.href = "https://someapi/payments/?auth_token=" + token;
}
})
})
I don't know much about URL encoding, but if someone could point me in the right direction, that would be super helpful. Thanks!

You have 2 issues with your code:
One that you need to use encodeURIComponent to encode any symbols in your token so that it can be sent in appropriate manner.
Two, while calling the second request $.get('/_redirect', you didn't use the replaced token but the simple response that you received from earlier request.
Change your code to this to eliminate both errors:
let token = "";
$.get('/_token_req', {contentType: "application/x-www-form-urlencoded"}, (response) => {
token = encodeURIComponent(response);
$.get('/_redirect', {token: token}, (response) => {
if(response == "OK"){
window.location.href = "https://someapi/payments/?auth_token=" + token;
}
})
})

Related

API Access Token expiration is very short

I'm pretty new to APIs, and I'm starting my first API project. I'm using the Petfinder API v2 to create a website that searches for adoptable animals. But their API uses OAuth, and they give you a key and secret. Then you use those to get a token using something like CURL. But this token expires in 60 minutes. After that, you need to request a new token.
Does anyone know how to increase the token's expiration? Or is there a way to have an unlimited amount of time? Or is there a code that will automatically get new tokens? I'm using vanilla JavaScript to program this.
This is their documentation: https://www.petfinder.com/developers/v2/docs/
There's nothing you can do to extend your access tokens expiration time. It's a security measure for Petfinders benefit so they don't have a bunch of old tokens lying around.
What you can do is update your code to fetch a new token if your token has expired. Original inspiration in vanilla javascript is here.
// Get OAuth token
const getOAuth = function() {
return fetch('https://api.petfinder.com/v2/oauth2/token', {
method: 'POST',
body: 'grant_type=client_credentials&client_id=' + key + '&client_secret=' + secret,
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
}).then(function(resp) {
return resp.json();
}).then(function(data) {
// Store token data
token = data.access_token;
tokenType = data.token_type;
expires = new Date().getTime() + (data.expires_in * 1000);
});
};
// Make call if token expired
const makeCall = () => {
// If current token is invalid, get a new one
if (!expires || expires - new Date().getTime() < 1) {
getOAuth().then(function() {
// use access token
});
}
};

POST request sent twice using fetch js

I call a POST method with javascript using fetch, Checked my server logs and see these lines:
2020-02-08,14:07:21 [WARNING] (web.py:web:1618): 400 POST /login (::1): Missing argument username
2020-02-08,14:07:21 [WARNING] (web.py:web:2106): 400 POST /login (::1) 8.64ms
...
2020-02-08,14:07:21 [DEBUG] (base_handler.py:base_handler:123): Attempted Sign-in by asdas
2020-02-08,14:07:21 [INFO] (web.py:web:2106): 200 POST /login (::1) 6.07ms
Here is the js which sends the request and then uses the response to add text to the page if login is unsuccessful:
function ready(){
function pwdSubmission(){
const url = window.location.href;
var result = document.getElementById("result-text");
var username = document.getElementById("user").value;
var password = document.getElementById("pwd").value;
fetch(url, {method:"post", headers:{
"Content-Type": "application/json",
"Accept": "application/json"},
body:{"username":username, "password":password}}
).then(function(data){
if (data.status !== 200){
result.style.color = '#d9534f';
}
return data.json()
}).then(data =>
result.innerText = data["message"])
}
var postbtn = document.getElementById("post-btn");
postbtn.addEventListener("click", pwdSubmission)
}
So why is the POST sent twice and the first time it doesn't include the arguments.
UPDATE
My server have no problem grabbing the arguments from the body even without stringify but there is no body in the first request, only the second, so I get an error which sends json back
The body param isn't correct. You're passing an object when it should be a JSON string.
body:JSON.stringify({username:username, password:password}})
Figured it out. My inputs were wrapped in a form tag and the button was defaulting to a form submit so I removed those tags and it only sends once now.
Your body data type must match your "Content-Type" header ("application/json" in your case).
Using ES6 object shorthand you could do...
body: JSON.stringify({username, password})

Error in HTTP GET Request with gadgets.io.makeRequest

Sorry but I spent a half a day practicing first with gadgets.io.makeRequest, and can not understand why the request response contains an error. The code is Javascript working as OpenSocial gadget:
requestURI = "https://jazz.server.com:9443/rm/views?projectURL=https%3A%2F%2Fjazz.server.com%3A9443%2Frm%2Fprocess%2Fproject-areas%2F_FvrWIG3nEeexYJvvGxVsZg&oslc.query=true&oslc.prefix=rt=<https://jazz.server.com:9443/rm/types/>&oslc.select=rt:_W0SGoW3nEeexYJvvGxVsZg";
makeGETRequest(requestURI);
...
function makeGETRequest(url) {
try {
var params = {};
params[gadgets.io.RequestParameters.METHOD] = gadgets.io.MethodType.GET;
params[gadgets.io.RequestParameters.HEADERS] = {
"Accept" : "application/rdf+xml",
"OSLC-Core-Version": "2.0"
}
gadgets.io.makeRequest(url, function(obj) {
console.log("===== HTTP REQUEST START =====");
console.log("Method : GET");
console.log("URL : " + url);
console.log("Response : " + obj.text);
console.log("====== HTTP REQUEST END ======");
}, params);
}
catch(err) {
console.log("Can not perform HTTP request because of error: " + err.message);
}
};
When I do the same request with REST Client in Firefox, everything works properly. But if I do that with the code above, then I get an error in the log (abbreviated):
===== HTTP REQUEST START =====
common.js:311 Method : GET
common.js:312 URL : https://jazz.server.com:9443/rm/views?projectURL=https%3A%2F%2Fjazz.server.…roject-areas%2F_FvrWIG3nEeexYJvvGxVsZg&oslc.query=true&oslc.prefix=rt=<https://jazz.server.com:9443/rm/types/>&oslc.select=rt:_W0SGoW3nEeexYJvvGxVsZg
common.js:313 Response : {"errorMessage":"Illegal character in query at index 178: https://jazz.server.com:9443/rm/views?projectURL=https%3A%2F%2Fjazz.server.com%3A9443%2Frm%2Fprocess%2Fproject-areas%2F_FvrWIG3nEeexYJvvGxVsZg&amp;oslc.query=true&oslc.prefix=rt=<https://jazz.server.com:9443/rm/types/>&oslc.select=rt:_W0SGoW3nEeexYJvvGxVsZg","errorClass":"java.lang.IllegalArgumentException","errorTrace":["java.net.URI.create(URI.java:871)","org.apache.http.client.methods.HttpGet.<init>
...
common.js:314 ====== HTTP REQUEST END ======
I tried to replace greater and less symbols by their hex values but there's no result. And there's no ideas currently.
May be somebody could make a fresh sight to the code and define the problem on the fly. Help me please, I'm at a dead end.
Thank you very much in advance for any advice!
The error in your Response indicates the Java system on the server side can't create a valid URI from your query. Therefor it throws back an error
My best guess would be the dot just before query=true in oslc.query=true. And therefor all following uses of oslcDOT .
From RFC 1738 specification:
Thus, only alphanumerics, the special characters "$-_.+!*'(),", and reserved characters used for their reserved purposes may be used unencoded within a URL.
I discovered that gadgets.io.makeRequest isn't very stable as I would like to expect. May be I do some wrong but sometimes this function completes without any feedback and without starting the response function in the parameters. I changed to next code:
function makeGETRequest(urlValue) {
try {
$.ajax({
url: urlValue,
type: 'GET',
dataType: 'text',
headers: {
'Accept': 'application/rdf+xml',
'OSLC-Core-Version': '2.0'
},
success: function (result) {
var data = result;
},
error: function (error) {
console.log("Can not perform HTTP request because of error: " + error.message);
}
});
}
catch(err) {
console.log("Can not perform HTTP request because of error: " + err.message);
}
};
And there's no problem!

Transfer cookies across domains in express

I've got a proxy set up in nodejs that goes to one of our backend servers for data; some of that data (such as session id) is stored as cookies. what I want to do is have the proxy get the remote cookies, push then into the header of the response to the original request, then send the response back. I'm close, but hit a snag:
app.get(/\/json\/(.+)/, getJson);
var getJson = function(req, response1) {
response1.setHeader('Content-Type', 'application/json; charset=utf-8');
var before1stWrite = true;
utils.setCookies(response1, ["floo=flum"]) // this works
var options = {
host : config.scraperUrl.replace('http://', ''),
path : '/rwd/' + req.params[0] + '?' + querystring.stringify(req.query),
method : "GET",
rejectUnauthorized : false
};
var request = https.request(options, function(response2) {
response2.setEncoding('utf8');
// utils.setCookies(response1, ["flib=flah"]) // this fails, too
response2.on('data', function(d) {
if (before1stWrite) {
console.log(response2.headers['set-cookie']); // remote's cookies
utils.setCookies(response1, ["flib=flah"]) // this fails
before1stWrite = false;
}
response1.write(d);
});
response2.on('end', function() {
response1.end()
});
});
request.end();
request.on('error', function(e) {
console.error("error occurred: " + e.message);
response1.end();
});
}
setCookies(response1, cookies) just loops thru the cookies and does
res.setHeader('Set-Cookie', cookie)
The problem is that it looks like the headers have been baked by the time the second setCookies is called; moving the method to the 'data' event handler does not help. The error I get is:
http.js:689
throw new Error('Can\'t set headers after they are sent.');
Any way to add headers to response1 that I receive from the response2?
UPDATE
I fixed the code to be sure that the attempt to write to headers of response1 was done before any other writes; it is not a fix, however.
Yes, you cannot send headers after data has started flowing. Did you try setting the header after this line?
response.setEncoding('utf8');
Also, did you consider using streams rather than transferring in chunks? http://nodejs.org/api/stream.html
You'll need to buffer the data.
Doing this is pretty much like piping:
response.on('data', function(d) {
res.write(d);
});
so you're sending the response straight away. Haven't tried it but this should work:
var data = "";
response.on('data', function(d) {
data += d;
});
response.on('end', function() {
console.log(response.headersSent);
console.log(response.headers['set-cookie']);
utils.setCookies(res, ["flib=flah"])
res.write(data);
res.end();
});
Just remember you're buffering all that data into memory, not recommended for large responses.

Posting to Twitter through OAuthSimple.js

I've been stuck on this one for a while. I'm trying to use OAuthSimple.js to interact with Twitter in a Chrome extension I've written.
The signing process seems to work fine for requests to retrieve a user's statuses, but I can't seem to construct a request that will successfully authenticate when I try to retweet, reply, or mark a tweet as favorite.
I'm following the guides here. I have also tried numerous ways of structuring the request, and comparing the request contents against the output of the OAuth tool provided by Twitter ( which seems to check out ), but I'm still getting 401 errors and generic "We couldn't authenticate you" responses.
Here's how I'm trying to form the request:
var sendTwitterRequest = function(url, params, method, callback) {
var request = null;
if ( localStorage.twitterAuthToken ) {
OAuthSimple().reset();
request = OAuthSimple(TwitterConsumerKey,TwitterConsumerSecret).sign({
action:method,
method:"HMAC-SHA1",
dataType:"JSON",
path:url,
parameters:params,
signatures:{
oauth_version:'1.0',
oauth_token:localStorage.twitterAuthToken,
oauth_secret:localStorage.twitterAuthVerifier
}
});
console.log(request);
$j.ajax({
url:request.signed_url,
type:method,
data:request.parameters,
success:callback
});
}
};
Then, making calls into this method like this:
// this works, I get the data and can do stuff with it
sendTwitterRequest('http://api.twitter.com/1/statuses/user_timeline.json?user_id=',null,'GET',someMethod());
// this fails and throws a 401 error every time
sendTwitterRequest("https://api.twitter.com/1/statuses/retweet/"+tweetKey+".json",null,'POST',someOtherMethod());
Am I missing something? Thanks in advance!
It turns out the requests I am creating are fine, I just needed a final one to exchange request tokens for OAuth tokens. I thought this step was covered when the user was prompted for input, but turns out I was wrong.
I also ended up switching from OAuthSimple.js to just OAuth.js, on account of the fact that I could only get OAuth.js to process both the token requests and the timeline requests.
Some of this is pretty specific to what my application is doing, so you will probably need to modify it.
The new sendTwitterRequest method:
var sendTwitterRequest = function(options){
var accessor={
consumerSecret:TwitterConsumerSecret
};
var message={
action:options.url,
method:options.method||"GET",
parameters:[
["oauth_consumer_key",TwitterConsumerKey],
["oauth_signature_method","HMAC-SHA1"],
["oauth_version","1.0"]
]
};
if(options.token){
message.parameters.push(["oauth_token",options.token])
}
if(options.tokenSecret){
accessor.tokenSecret=options.tokenSecret
}
for(var a in options.parameters) {
message.parameters.push(options.parameters[a])
}
OAuth.setTimestampAndNonce(message);
OAuth.SignatureMethod.sign(message,accessor);
try {
$j.ajax({
url:message.action,
async:options.async||true,
type:message.method||'GET',
data:OAuth.getParameterMap(message.parameters),
dataType:options.format||'JSON',
success:function(data) {
if (options.success) {options.success(data);}
}
});
} catch ( e ) {
}
};
And the methods that depend on it:
// asks Twitter for an oauth request token. User authorizes and the request token is provided
requestTwitterToken = function() {
// this is semi-specific to what my extension is doing, your callback string may need
// to be slightly different.
var callbackString = window.top.location + "?t=" + Date.now();
var params = [
[ 'oauth_callback', callbackString ]
];
sendTwitterRequest({
url: "https://api.twitter.com/oauth/request_token",
method: 'POST',
parameters: params,
format: 'TEXT',
success: function(data) {
var returnedParams = getCallbackParams(data);
if ( returnedParams.oauth_token ) {
chrome.tabs.create({
url:"https://api.twitter.com/oauth/authorize?oauth_token=" + returnedParams.oauth_token
});
}
},error:function( e ) {
console.log( 'error' );
console.log( e );
}
});
};
// exchanges the Twitter request token for an actual access token.
signIntoTwitter = function(token, secret, callback) {
var auth_url = "https://api.twitter.com/oauth/access_token";
var authCallback = function(data) {
var tokens = getCallbackParams(data);
localStorage.twitterAuthToken = tokens.oauth_token || null;
localStorage.twitterAuthTokenSecret = tokens.oauth_token_secret || null;
callback();
};
try {
sendTwitterRequest({url:auth_url, method:'POST', async:true, format:'TEXT', token:token, tokenSecret:secret, success:authCallback});
} catch ( e ) {
console.log(e);
}
};
With this, the steps are as follows:
ask Twitter for a token ( requestTwitterToken() ) and provide a callback
in the callback, check to see if a token is provided. If so, it's an initial token
pass the token back to Twitter and open the Twitter auth page, which allows the user to grant access
in the callback to this call, see if an access token was provided
exchange the request token for an access token ( signIntoTwitter() )
After that, I simply use the sendTwitterRequest() method to hit Twitter's API to fetch the timeline and post Tweets.

Categories