I've inherited an old MVC app which uses OAuth to authenticate against Active Directory. Our server administrator has recently made some changes to the server which requires authentication to complete before the app can even begin to load. The end result is that the app tries to load images stored on the server before the user has completed authentication, so that by the time the app is rendered, the images are broken links.
I don't know a lot about how authentication works, but I need to change the app to wait for authentication before it attempts to load images. How can I accomplish this, preferably on the back end? Is there something that the controller can listen for before loading the view? An alternative approach could be to reload the images via AJAX after authentication, but again, I'm not sure what to tell the Javascript to listen for, specifically.
It is worth thinking this through in terms of separating web and API sides of the architecture.
Typically, web resources such as JS and JPG files are not secured, since they should reveal no secrets. This ensures optimal performance, such as use of a content delivery network, to reduce download times. It also allows unauthenticated pages to be rendered, such as a page that prompts the user to begin authentication.
Only requests to the API side of the architecture should be secured. This means they require a credential - a cookie or token. For websites, an HTML page containing data can be thought of as an API resource. Websites do not usually secure inage requests though.
If you want to avoid images being served unless the user is authenticated, then structure views that way, by removing images from unauthenticated views, or serving some images from a location that does not require credentials.
It is possible to serve images in an API driven manner, by returning their URLs in an API JSON response. Then using Javascript to update the DOM and set the src property of img tags. You should svoid this type of non standard architecture though.