Loading New Webpage Using AWS S3 Javascript SDK

Question

I'm new to webdev so forgive me if this is an obvious one, but I can't wrap my head around a solution.

I'm currently hosting a static website on AWS S3. The login page is available for public access, but all other pages are only available to a specific IAM role that an authorized user will assume. Once a user enters their login credentials they will receive temporary AWS credentials that grant them access to restricted pages.

My question is: how do I programmatically load a restricted webpage? Normally I would do something like:

$('body').load(/path/to/index.html);

But the /path/to/index.html is only accessible to users with the IAM role. So do I need to use the S3 sdk to access that file? In my head I would need to do something like:

$('body').load(s3.getObject(/path/to/index.html));

But that wouldn't actually work.

Thanks for the help!

Answer 1

Do not put the page (HTML) itself as secret. Instead, put your essential data into a json file, and do a XHR to it.

Using a frontend framework with router, you can check if the user is authenticated and render a 403 if not.

The method depends on your framework, and I'm not going to describe it. You can use AWS SDK to fetch from S3 with authentication.