2

私はAmazonS3でAdobecaptivateによって生成されたhtml5ビデオをホストしました。ブラウザを使用してアクセスすると、正常に動作します。

作業用URL：http: //lmtestforhtmlfive.s3.amazonaws.com/html5version/test/Hello%20World/story_html5.html

しかし、IFRAMEの別のhtmlページで上記の動作するビデオを使用すると、動作しません。

エラー：「安全でないJavaScriptがURLhttp://lmtesttobedelete.s3.amazonaws.com/html5test.htmlのフレームにURLhttp://lmtestforhtmlfive.s3.amazonaws.com/html5version/test/Hello%20World/のフレームからアクセスしようとしましたstory_html5.html。ドメイン、プロトコル、ポートは一致する必要があります。」

動作しないURL：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ビデオにアクセスする方法を教えてください。

ありがとう、ラクシュミラルメナリア

4

1 に答える 1

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保護特性に違反していることが原因です。

1つのオプションは、JSファイル自体からそのコード行を削除してから、作成しようとしているタグを、IFRAMEを埋め込んでいるページのヘッドセクションに追加することです。html5test.htmlつまり、ファイルに以下を追加するだけです。

<meta name="viewport" id="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
于 2013-03-05T09:19:26.003 に答える