Here is an image of the general idea I want to accomplish
I have a react application that is hosted as a Zendesk app via an iFrame from subdomain.zendesk.com, the iFrame fetches the content from Cloudfront / S3 (using S3 Origins) and displays it within the Zendesk UI.
I'm trying to secure it and want to restrict access to the content to a specific origin (subdomain.zendesk.com for example) so that if anyone was to view the Cloudfront distribution directly (by navigating to xxxx.cloudfront.net) it would reject the request.
How can this be achieved? I have tried using AWS WAF and creating a rule that looks at the request origin header and matches it against the subdomain url (example origin: subdomain.zendesk.com) but that doesn't work so I think i'm barking up the wrong tree using that.
I have also tried creating a custom origin request policy on the distributions behaviour but again that didn't yield any results.
Zendesk does offer signed url functionality where the initial request becomes a POST request to the server that contains a JWT as form data in the request payload, I read that it might be possible to use Lambda@edge to accomplish this, I tried to implement this but I have not had any luck so far.
Any tips, examples or outlines as to what I am misunderstanding about these services would be very much appreciated.