1

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 ?

Improve this question
7
  • 2
    One of the solutions I've faced was generate a security token on backend (like a session) and inject it into frontend, then use it with call to identify user Commented Sep 14, 2014 at 22:27
  • Why not implement some kind of authentication in your front and back-end? Commented Sep 17, 2014 at 18:14
  • you want the data to be public, yet not public? this sounds like a job for DRM. but currently the only standard DRM on the web is EME, which only works with videos. Commented Sep 17, 2014 at 20:00
  • @guest : exactly what I am looking for, visible in the browser yet hard to download (not impossible but hard, at least not like just looking in the console and grabbing clear JSON) Commented Sep 17, 2014 at 22:21
  • 3
    I suggest you re-evaluate your goals. A Restful architecture is meant to be exposed to JSON requests. If you wanted a coupled structure, then Restful is self-defeating. You say 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 but then panic over forcing a users to ONLY REFERENCE YOUR FLASK SERVICE WITHOUT USING YOUR FRONT-END APP. Understand, the value of SoC is NOT caring to couple the 2. You have achieved text-book best practice and worry over the result. Commented Sep 18, 2014 at 21:30

4 Answers 4

Reset to default
4
+100

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

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

Improve this answer

Comments

0

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

Improve this answer

Comments

0

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

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.