4

I am building a web page with ASP.NET Core and angular 8 (hosted together). I want to allow requests to my API only from SPA.

At this point, I think to create some kind of rule of hashing that only frontend and backend apps know. For every request I will calculate hash and put it in header of the request. After I receive request, I will calculate hash again and compare it to the hash provided in the header. If they match, then it's OK.

I am interested in how much secure is it and is there any way to hack it.

I am new to angular and I am also interested in if there is any possibility (in production mode) to write some kind of js code (by app user), which will call my 'send request' method (i.e not by clicking button).

EDIT:

I use standard jwt token based authentication in my app, so there is no possibility to access api resources if user is not authenticated. What I want to achieve is that authenticated app user (developer) should not be able to make request from other sources like postman, C# code, browser console for example.

I have some 'valuable' data and I want it to be visible only my web page. I want to eliminate stealing facts..

ABC
  • 351
  • 1
  • 4
  • 9
  • 1
    There are standard solutions for authentication available and most of them are much more secure than what you're trying to do. If there is a special reason why you can't use e.g. identity or oidc, pls explain. Your app users can execute every javascript code they want (open console, type JavaScript and execute). – Christoph Lütjen Mar 28 '20 at 13:17
  • I will edit my question.. – ABC Mar 28 '20 at 13:18

2 Answers2

3

There is no real secure solution for your requirement. The reasons for this:

  • JavaScript code is always readable. Every user can read and debug your SPA and whatever logic you add to protect your requests, developers can see and re-implement in their own app. You can try to make their life harder... that's all.

  • That said: You cannot include secrets in your code. Secrets loaded during runtime will be visible if developers debug your code.

  • Your server cannot see what's the client app because native apps will use any http headers and look exactly like a browser.

The common "solution" for this is to limit and block by the number of requests from an IP assuming that the amount of data typically requested in interactive usage is low.

A simple way to make life harder, may be to switch to websockets (signalR) instead of http requests - assuming standard crawlers are limited to http.

Christoph Lütjen
  • 5,403
  • 2
  • 24
  • 33
0

Suppose your Angular SPA will be using the link: http://localhost:4200

In you Web Api Project's Startup.cs (Configure void method) add app.UseCors

        app.UseCors(
            options => options.WithOrigins("http://localhost:4200").AllowAnyMethod().AllowAnyHeader()
            ); ;

Method is 

public void Configure(IApplicationBuilder app, IWebHostEnvironment env
Useme Alehosaini
  • 2,998
  • 6
  • 18
  • 26
  • CORS will not work here. It sends only response headers that the client can respect. While browsers will respect them, custom apps for fetching content will simply ignore those headers. – Christoph Lütjen Mar 28 '20 at 13:29
  • You may restrict by IP, This could be beneficial Link, check on it: https://stackoverflow.com/questions/473687/restrict-access-to-a-specific-controller-by-ip-address-in-asp-net-mvc-beta – Useme Alehosaini Mar 28 '20 at 13:31
  • As far as I understand he don't want to restrict by IP. He wants to restrict to "only via my own JavaScript app". This app can run anywhere... – Christoph Lütjen Mar 28 '20 at 13:33