Restrict a SPA application

Hi There,
Could you pls answer the following two questions:

  1. In general, is that possible to restrict a SPA angular client application(internet facing) to access backend API(internal) by whitelisting its host SPA application IP at the firewall? This means, my backend API is allowed at the firewall to this SPA angular application clients only not to any other sites. I don’t want to block the user IP, since there are tons of users to this site.
  2. My angular app2 spa application is redirected to okta for login.At okta network layer is that possible to allow only this SPA application to access Okta hosted login by whitelisting app2(SPA) ip?

You could use CORS to only allow a certain IP or domain to access your app. For the 2nd one, you can use a Content Security Policy that makes it so your frontend can only access your Okta domain and your API’s domain.

Thanks for your quick response. Where is the Content Security Policy located?
Isn’t that possible at all to restrict a specific spa application at a load balancer by whitelisting the SPA hosted IP?

The content security policy is usually served up by the web server that hosts your application. My Angular Deployment blog post has a few examples for cloud providers like Heroku and Netlify. You might be able to restrict it at your load balancer. I’m not sure, I’ve never tried it.