Getting images from S3 with a cookie to display on react - reactjs

Question

I'm building an application with express backend and react frontend. The user can upload images and they're stored in a S3 bucket with a privacy policy and served through Cloudfront.
Currently, I'm using signed urls as a two step way to retrieve the images:
React requests the Express server for a signed url for the image
Express responds with the url
React then loads the <img src={signedUrl} /> tag.
This works, but I rather eliminate the signed url step and use something like cookies so the client can directly ask cloudfront for the image: <img src={cfUrl + cookies?} /> I've tested this using postman and I can retrieve the image directly as long as I pass the cookies. So i know my cookies are setup correctly and the content is being served.
However, I'm not sure how i can do it on react with axios... The application is currently on localhost but It will be deployed to heroku.
Server
const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors({
origin: ['http://localhost:3000'],
credentials: true,
}));
app.post('/cookies', async (req, res) => {
// Function to generate the signed cookies
const cookies = await awsS3.generateCookies();
Object.entries(cookies).forEach(([key, value]) => {
console.log(key, value);
res.cookie(key, value);
});
res.json([]);
});
const port = process.env.PORT || config.port;
app.listen(port, () => {
console.log(`Express server is running on port: ${port}...`);
});
What i want to do in react:
<img src={image_url} />
However, looking at the network call for the image request, the cookies are not included by default. I don't know if i need to do something special or specific to include the cookies on that image request.

Answer 1

Here is an overview of how CloudFront signed cookies work:
A user signs in to your website and either pays for content or meets some other requirement for access.
Your application returns the Set-Cookie headers in the response, and the viewer stores the name-value pairs.
The user requests a file e.g. an image in your case.
The user's browser or other viewer gets the name-value pairs from step 3 and adds them to the request in a Cookie header. This is the signed cookie.
CloudFront uses the public key to validate the signature in the signed cookie and to confirm that the cookie hasn't been tampered with. If the signature is invalid, the request is rejected.
More details can be found here.
UPDATE
Setting cookies for different domains is obviously not allowed. However, one can use a top level apex domain in a signed cookie, for example, .example.com. If properly set this cookie will always be sent to any request made to example.com, but also to any of its subdomains, e.g., cloudfront.example.com. So we can take advantage of this and have our backend service, which is running on backend.example.com create and set a signed cookie for .example.com. Later when the frontend requests a file form cloudfront.example.com it will automatically include the signed cookie with the request.
This approach requires having a custom domain for a Cloud Front distribution. Here docs how to do that
Best, Stefan