I'm in a sticky situation.
I'm creating a website which is similar to YouTube. However, instead of only playing video files, it also displays HTML files via an <iframe> tag. The HTML files are essentially a video, but produced via animated HTML elements (an Adobe Captivate HTML5 lesson to be exact). The HTML files are hosted on an AWS CDN, and the website code is hosted on an EC2 instance behind a load balancer.
The problem comes in when I try to send commands to the HTML video in the iframe via JavaScript. The web browser refuses to execute my code because the domain name of the web application is different than the domain name of the HTML file in the CDN. The browser treats this as a security threat (since it's two different domains) and rejects executing the command. So the site and the HTML content must have the same domain origin for me to execute my code.
So my question is, how can I have my files on the EC2 instance have the same public domain as the files on my S3 instance, keeping in mind that the S3 is behind a CDN, and the EC2 instances are behind a load balancer.
Or, should I be doing this another way?
Thank you.
Place CloudFront in front of both S3 and your EC2 instance. Then use CloudFront Path Patterns to map the distribution to multiple origins.