CODEWITHSUNDEEP
amazon-s3cors
Laxmi Lal Menaria
Laxmi Lal Menaria

Reputation: 1445

Unable to access contents from cross bucket (CORS ENABLED)

I have hosted a html5 video generated by Adobe captivate at Amazon S3. When I access using browser its working fine.

Working url : http://lmtestforhtmlfive.s3.amazonaws.com/html5version/test/Hello%20World/story_html5.html

But when I use the above working video in IFRAME at another html page, its not working.

Error : "Unsafe JavaScript attempt to access frame with URL http://temptesttobedelete.s3.amazonaws.com/html5test.html from frame with URL http://lmtestforhtmlfive.s3.amazonaws.com/html5version/test/Hello%20World/story_html5.html. Domains, protocols and ports must match."

Not working URL : http://temptesttobedelete.s3.amazonaws.com/html5test.html

After few research I got need to enable CORS on S3 bucket, added below CORS configuration on lmtestforhtmlfive bucket.

<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<AllowedHeader>*</AllowedHeader>
<MaxAgeSeconds>3000</MaxAgeSeconds>
</CORSRule>

But still I am not able to access the html5 video in iframe.

Please suggest me how to access html5 videos in IFRAME.

Thanks, Laxmilal Menaria

Upvotes: 2

Views: 694

Answers (1)

Ryan
Ryan

Reputation: 6517

Your problem is that code inside your storyline_compiled.js file is attemping to access the DOM of the parent page of the IFRAME it's loaded in despite being loaded from a different domain, specifically with the following line:

if(self!=top){var meta=$('<meta name="viewport" id="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>');top.document.getElementsByTagName("head")[0].appendChild(meta.get(0))}

More specifically, the offending JS call is:

top.document.getElementsByTagName

This issue is due to the fact that JS loaded from a different domain is attempting to modify the page it's embedded in, violating the XSS protection characteristics of most browsers.

One option you have is to remove that line of code from the JS file itself, and then simply add the tag it's trying to create into the head section of your page that's embedding the IFRAME. ie just add the following to your html5test.html file:

<meta name="viewport" id="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

Upvotes: 1

Related Questions