Question

我在亚马逊S3上托管了Adobe Captivate生成的html5视频。当我使用浏览器访问它时工作正常。

工作网址：http://lmtestforhtmlfive.s3.amazonaws.com/html5version/test/Hello%20World/story_html5.html

但是当我在另一个html页面的IFRAME中使用上述工作视频时，它无效。

错误： “不安全的JavaScript尝试从URL http://temptesttobedelete.s3.amazonaws.com/html5test.html的帧中访问包含URL http://lmtestforhtmlfive.s3.amazonaws.com/html5version/test/Hello%20World/story_html5.html的帧。域，协议和端口必须匹配。”

无效网址：http://temptesttobedelete.s3.amazonaws.com/html5test.html

经过一番研究后，我需要在S3存储桶上启用CORS，在lmtestforhtmlfive存储桶上添加CORS配置。

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

但我仍然无法访问iframe中的html5视频。

请建议我如何在IFRAME中访问html5视频。

谢谢， Laxmilal Menaria

Answer 1

您的问题是storyline_compiled.js文件中的代码正在尝试访问其加载的IFRAME的父页面的DOM，尽管是从其他域加载的，具体使用以下行：

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))}

更具体地说，违规的JS调用是：

top.document.getElementsByTagName

此问题是由于从其他域加载的JS试图修改其嵌入的页面，这违反了大多数浏览器的XSS保护特性。

您可以选择从JS文件中删除该行代码，然后只需将其尝试创建的标记添加到嵌入IFRAME的页面的head部分。即只需将以下内容添加到html5test.html文件中：

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

无法从交叉存取桶访问内容（CORS ENABLED）

1 个答案: