My application is based on AngularJS, totally client-side; the server is based on Express JS. For data communication I am using the http post method. When I send a http request, the server responds with data in JSON format, but all the JSON data shows in the client browser. I don't want to show JSON data in client browser.
Is there any way to hide or secure json data in client browser?
What ever the response you will send, will be shown at the client-end. If you want to hide some data, you can always encrypt them and send it. One of the useful tool for such is Crypto-JS.
User will still see the data but as it will be encrypted, he cannot understand it.
But, still it is safer not to send user-sensitive data to client-side.
Related
Is there any limit on sending JSON data to a rest API?I am building an app where I have used a rest API to send an email. Here I want to send app logs to API,but before going through that I want to know about the limitation on send data to rest API.
Secondly which one is better option file or send JSON data to rest API?
In ASP.NET there's by default a 4MB limit of the size of a request. This can be adjusted using the maxRequestLength attribute on the httpRuntime element:
<httpRuntime targetFramework="4.5.2" maxRequestLength="1048576" />
In this example we set the maximum request size to be 1GB.
Secondly which one is better option file or send JSON data to rest API?
If you are planning to send large request payloads I would recommend you using the multipart/form-data content type for the request instead of JSON. This would allow you to directly send the raw bytes in the request payload. If you use JSON then you would need to encode those raw bytes to something like base64 which would make the request even larger. To even further optimize network traffic the client could gzip the raw bytes before sending them over the wire and then unzip the stream on the server.
You may also find the following article useful in setting up this file upload on the server side.
Is the HTTP response always in HTML? When a mobile application, uses HTTP to interact with back-end server and seeks some data in response, what is the format of that data? is it always in HTML?
No, of course not! HTTP is just a protocol to transfer an amount of data from the server to the client.
It's up to the client to decide what to do with the data. If you want, it can be a JSON, XML, HTML or just plain text. That's why you can have a look at the source of a webpage. In that case the webbrowser shows you (almost) the raw data which the server sent.
It's up to you how you want to handle it. As an HTML Syntaxed text, a Plain text, binary, or whatever you can imagine.
I got a (Flask) backend powering an API that serves JSON to an Angular app.
I love the fact that my backend (algorithms, database) is totally disconnected from my frontend (design, UI) as it could literally run from two distinct servers. However since the view is entirely generated client side everyone can access the JSON data obviously. Say the application is a simple list of things (the things are stored in a JSON file).
In order to prevent direct access to my database through JSON in the browser console I found these options :
Encrypting the data (weak since the decrypting function will be freely visible in the javascript, but not so easy when dealing with minified files)
Instead of $http.get the whole database then filtering with angular, $http.get many times (as the user is scrolling a list for example) so that it is programmatically harder to crawl
I believe my options are still weak. How could I make it harder for a hacker to crawl the whole database ? Any ideas ?
As I understand this question - the user should be permitted to access all of the data via your UI, but you do not want them to access the API directly. As you have figured out, any data accessed by the client cannot be secured but we can make accessing it a little more of PITA.
One common way of doing this is to check the HTTP referer. When you make a call from the UI the server will be given the page the request is coming from. This is typically used to prevent people creating mashups that use your data without permission. As with all the HTTP request headers, you are relying on the caller to be truthful. This will not protect you from console hacking or someone writing a scraper in some other language. #see CSRF
Another idea is to embed a variable token in the html source that bootstraps your app. You can specify this as an angular constant or a global variable and include it in all of your $http requests. The token itself could be unique for each session or be a encrypted expiration date that only the server can process. However, this method is flawed as well as someone could parse the html source, get the code, and then make a request.
So really, you can make it harder for someone, but it is hardly foolproof.
If users should only be able to access some of the data, you can try something like firebase. It allows you to define rules for who can access what.
Security Considerations When designing web applications, consider
security threats from:
JSON vulnerability XSRF Both server and the client must cooperate in
order to eliminate these threats. Angular comes pre-configured with
strategies that address these issues, but for this to work backend
server cooperation is required.
JSON Vulnerability Protection A JSON vulnerability allows third party
website to turn your JSON resource URL into JSONP request under some
conditions. To counter this your server can prefix all JSON requests
with following string ")]}',\n". Angular will automatically strip the
prefix before processing it as JSON.
For example if your server needs to return:
['one','two'] which is vulnerable to attack, your server can return:
)]}', ['one','two'] Angular will strip the prefix, before processing
the JSON.
Cross Site Request Forgery (XSRF) Protection XSRF is a technique by
which an unauthorized site can gain your user's private data. Angular
provides a mechanism to counter XSRF. When performing XHR requests,
the $http service reads a token from a cookie (by default, XSRF-TOKEN)
and sets it as an HTTP header (X-XSRF-TOKEN). Since only JavaScript
that runs on your domain could read the cookie, your server can be
assured that the XHR came from JavaScript running on your domain. The
header will not be set for cross-domain requests.
To take advantage of this, your server needs to set a token in a
JavaScript readable session cookie called XSRF-TOKEN on the first HTTP
GET request. On subsequent XHR requests the server can verify that the
cookie matches X-XSRF-TOKEN HTTP header, and therefore be sure that
only JavaScript running on your domain could have sent the request.
The token must be unique for each user and must be verifiable by the
server (to prevent the JavaScript from making up its own tokens). We
recommend that the token is a digest of your site's authentication
cookie with a salt for added security.
The name of the headers can be specified using the xsrfHeaderName and
xsrfCookieName properties of either $httpProvider.defaults at
config-time, $http.defaults at run-time, or the per-request config
object.
Please Kindly refer the below link,
https://docs.angularjs.org/api/ng/service/$http
From AngularJS DOCs
JSON Vulnerability Protection
A JSON vulnerability allows third party website to turn your JSON resource URL into JSONP request under some conditions. To counter this your server can prefix all JSON requests with following string ")]}',\n". Angular will automatically strip the prefix before processing it as JSON.
There are other techniques like XSRF protection and Transformations which will further add security to your JSON communications. more on this can be found in AngularJS Docs https://docs.angularjs.org/api/ng/service/$http
You might want to consider using JSON Web Tokens for this. I'm not sure how to implement this in Flask but here is a decent example of how it can be done with a Nodejs backend. This example at least shows how you can implement it in Angularjs.
http://www.kdelemme.com/2014/03/09/authentication-with-angularjs-and-a-node-js-rest-api/
Update: JWT for Flask:
https://github.com/mattupstate/flask-jwt
Title question asks it all, what's the process going on under there? Why do I have to use AJAX if I wanted to submit that form asynchrously?
It's due to the way HTTP was designed. Back then, JavaScript was not as ubiquitous and not as powerful as it is today.
As it is, when you POST data to a page (a path), you are issuing a request to a server. The server can then respond in a variety of manners. There is the simple "return some content", whether it be HTML, text, JSON, XML, etc. There is also the possibility for the server to return a redirect, sending you to a different location.
What AJAX does is simply to run this request in the background and hide the fact that data was submitted to the server and a response was returned from the user's perspective.
The answer to this little question will clear everything up for me.
If have a form tag that has a Get method and an action of some random script.
When I hit the submit button on the page, the Get Method is sent to HTTP and HTTP is what appends the query string to the url, the HTTP then returns a 20X status if the response is good and a 40X is a bad response? And our action goes to our webserver to run the script?
HTTP is transport and HTML is content. The Form submit calls a GET or POST request on the server depending on the action defined for the HTML form. The Form's arguments are appended by the Browser's form logic to the HTTP request, depending whehter GET or POST is used, they are attached to the request URL or put into the request body.
Then the request is handled on the server and the result is returned by the server logic (which can be a CGI, some perl script, a J2EE application etc.).
The server seponds with a HTTP status code (where everything below 300 is a success, and everything above 399 is an error - see here:HTTP staus codes ).
You are sending your form's data via HTTP using the "get" request. HTTP is a protocol and not a server. Your request is handled by a server who knows how to handle the HTTP protocol, eg. Apache.
The server processes the data and sends back a response. As you mention there are different kind of responses. 404 is best known (document not found).
The script is not run on the server, it is run on the client (the browser).
HTML is the markup code that describes the structure of the page. Browsers interpet the HTML code they receive and construct your page from it. Check here for more details: Wikipedia: HTML
The HTTP is the protocol used by the browser to talk to the server. Check this for more details: Wikipedia again: HTTP