Which data should I encrypt to create a secure ajax call? - javascript

I'm creating a web application that will use a lot of ajax calls. The application will hold user's personal data. In the ajax calls are variables used like Id, profile_id, message_id etc.. to complete operations like adding posts to profiles, getting connections, etc..
I want to make the calls so secure as posible. I already implemented crsf in the $.post calls. What kind of varibales of the ajax calls must/should I encrypt and which not?
Example of a ajax call (simplified):
function post_msg(profile_id, msg) {
var json_data = new Object();
json_data.profile_id = profile_id;
json_data.msg = msg;
var data_str = JSON.stringify(json_data);
$.post("/ajax/get_posts", { data: data_str, csrf_key: "950egg22b771xxxxxxxxxxxxxxxx1a"}, func_that_does_something_with_ret_data);
}
//Some where else in the front-end
$('#button').click(function() {
var msg = $('#input').value();
post_msg(1, msg); //should I encrypt the id?
});

Don't think about encrypting individual bits of data. If security is important, run the entire transaction across HTTPS.

Related

node.js and hapi: fetching data from a database synchronously

Coming from a .net world where synchronicity is a given I can query my data from a back end source such as a database, lucene, or even another API, I'm having a trouble finding a good sample of this for node.js where async is the norm.
The issue I'm having is that a client is making an API call to my hapi server, and from there I need to take in the parameters and form an Elasticsearch query to call, using the request library, and then wait for the instance to return before populating my view and sending it back to the client, problem being is that the request library uses a callback once the data is returned, and the empty view has long been returned to the client by then.
Attempting to place the return within the call back doesn't work since the EOF for the javascript was already hit and null returned in it's place, what is the best way to retrieve data within a service call?
EX:
var request = require('request');
var options = {
url: 'localhost:9200',
path: {params},
body: {
{params}
}
}
request.get(options, function(error, response){
// do data manipulation and set view data
}
// generate the view and return the view to be sent back to client
Wrap request call in your hapi handler by nesting callbacks so that the async tasks execute in the correct logic order. Pseudo hapi handler code is as following
function (request, reply) {
Elasticsearch.query((err, results) => {
if (err) {
return reply('Error occurred getting info from Elasticsearch')
}
//data is available for view
});
}
As I said earlier in your last question, use hapi's pre handlers to help you do async tasks before replying to your client. See docs here for more info. Also use wreck instead of request it is more robust and simpler to use

Stop AJAX call from executing query

In my web application, on click on a specific button, AJAX call is triggered. On the server side, I want to execute a query to a DB.
Now, I am thinking about this, there are queries that are executing for some period, and maybe user isn't patient enough to wait for the results, and wants to stop the execution.
Is there a way to add one more button, that when clicked could stop previous AJAX call from executing and ALSO stop execution of a query? And is it a safe approach?
I am using angularjs, alongside with C# on server side.
related answers on your question
client side is streight forward
How to cancel/abort jQuery AJAX request?
but serverside is not as easy as client side, here related post to move forward
How do you cancel an AJAX long running MVC action client side (in javascript)?
The best way to go about "cancelling" your request on the client side is by taking advantage of the $q service, creating a deferred and then attaching it to your request using the "timeout" property for the $http({}) function call.
function sendSomeRequestToServer() {
var requestCanceler = $q.defer();
var request = $http({
method: "get",
url: "/your/url",
timeout: requestCanceler.promise
});
var promise = request.then(function(response) {
return response.data;
});
promise._requestCanceler = requestCanceler;
return promise;
}
function cancel(requestPromise) {
if (promise && promise._requestCanceler && promise._requestCanceler.resolve) {
promise._requestCanceler.resolve();
}
}
Most likely these functions would be wrapped in the same angular service. Credit to Ben Nadel and his blog for the tutorial and code.

Reconciling WP API, AngularJS, and $resource/$http requests (getting X-WP-TotalPages)

I'm putting together an app using WP-API with an Angular frontend. I'm developing locally, with the data I'm trying to use loaded in from a remote server. Doing a $resource request for all posts works great.
But, I'm trying now to get the result of the X-WP-TotalPages header and can't figure out how to do it. Here's the code as it stands:
var request = function() {
var fullRoute = 'http://dylangattey.com/wp-json/posts/';
var defaultGet = {
method: 'GET',
transformResponse: function(data, headers){
response = {};
response.posts = JSON.parse(data);
response.headers = headers();
console.log(headers['X-WP-TotalPages']);
return response;
}
};
return $resource(fullRoute, {}, {
get: defaultGet,
query: defaultGet
});
};
// This gives me back the first 10 posts
request().query();
Chrome and curl both show that X-WP-TotalPages should be equal to 2 as a header. However, it just logs undefined.
Am I missing something? No matter whether I use $http or $resource I get the same result. I also have the same issue whether I use a remote site or a local WP installation on localhost. Really, I just want to know the total number of pages or even just the total number of posts for a given request, so if there's a better way to do it, I'd love to know.
You probably need to control the access to the specific headers you want on the server side.
See this thread for a brief discussion, or MDN on Access-Control-Expose-Headers.

Meteor - transfer data from API to Server to Client

I am struggling a bit with Meteor, i have this app that i would like to connect with an API client, which provides me a Secret API key, which i must not publish (in the client).
The thing is when i send the request, i get a JSON data, and i would like to pass this data to the client.
API > Server Call -> Client (Rendering).
But so far i have not come to a solution how can i do this.
I have a basic understanding how Meteor Works, but i have a good knowledge about JavaScript/NodeJS etc.
A little bit of help would really be appreciated.
Thank you.
This sounds like a good use case for a client making a call to a server-side method. The server can then use the secret key to make an HTTP request and send the result back to the client without exposing the key. Please note that your server-method must exist inside of a server directory to avoid inadvertently shipping the key to the client (see Structuring your application).
client
Meteor.call('getApiResult', function(err, result) {
if (result) {
return console.log(result);
}
});
server
Meteor.methods({
getApiResult: function() {
var secret = 'abc123';
try {
var result = HTTP.get('http://example.com/', {params: {key: secret}});
return result.data;
} catch (_error) {
return false;
}
}
});

Sending JSON object back to server through YUI IO utility?

I am running a web page that generates random data and displays it in a HTML table. From the table I run a loop to gather the basic information (all rows that exist and exclude headers of table). This data gets stored in a JSON object called jData.
I want to send this data back to the server and store in a sqlite table named data. The way I am trying to do this is therough the YUI IO utility.
I am trying to wade the API documentation, but I am having no luck. I have two buttons on the page. One to generate the data and on to store the data. The store code is as follows:
var savedata = function(){
var tabledata = Y.one("#generatedtable")._node;
var jData = [];
var i = 1;
var length = tabledata.rows.length
while (i<length){
var samplerow = {};
var r = tabledata.rows[i];
samplerow.timestamp = r.cells[0].innerHTML;
samplerow.volts = r.cells[1].innerHTML;
samplerow.amps = r.cells[2].innerHTML;
samplerow.kW = r.cells[3].innerHTML;
samplerow.kWh = r.cells[4].innerHTML;
jData.push(samplerow);
i++;
}
Y.io("./savedata", Y.System_Config.postjData(jData));
};
Using the chrome debugger tools I see the array being stored properly into jData. I need some basic help with Y.io and how to make posts. Any basic help is much appreciated. My server is run bu the Django Python web application framework.
You should read the IO User Guide. Making a POST request with JSON data in YUI is as simple as setting the HTTP method to POST, adding the data and setting the Content-Type to application/json. The only caveat is that you need to turn the JSON object into a string first using JSON.stringify().
Y.io('/savedata', {
method: 'POST',
data: Y.JSON.stringify(jData),
headers: {
'Content-Type': 'application/json'
},
on: {
success: function (id, response) {
// do something with the response from the server, for example
Y.one('#some-node').set('text', response.responseText);
}
}
});
You can read more about all the configuration options for IO in the "Configuration Object" section of the User Guide. There is an example there of a POST request with JSON data.

Categories