4

テンプレートを使用してコンポーネントをレンダリングするために、AEM6 で新しい見やすい言語を使用しています。私のコンポーネントには、ビデオを初期化するために次のコードが必要な JWPlayer プラグインを使用するビデオがあります。

<div id='playerpwSIOjcRZrCa'></div>
<script type='text/javascript'>
    jwplayer('playerpwSIOjcRZrCa').setup({
        file: '//www.youtube.com/watch?v=123456',
        title: 'Video title',
        width: '100%',
        aspectratio: '16:9'
    });
</script>

しかし、ユーザーが作成者内で id を変更できるように Youtube 変数を動的にしたいので、次のテンプレートを videoPath (youtube id) で渡します。

<template data-sly-template.player="${@ videoPath}">

    Video Id: ${videoPath}

    <script src="//jwpsrv.com/library/HjcD1BZoEeS7ByIAC0MJiQ.js"></script>

    <div id='playerpwSIOjcRZrCa'></div>
    <script type='text/javascript'>
        jwplayer('playerpwSIOjcRZrCa').setup({
            file: '//www.youtube.com/watch?v=' ${videoPath},
            title: 'Video title',
            width: '100%',
            aspectratio: '16:9'
        });
    </script>

</template>

私が抱えている問題は、タグの ${videoPath} がテンプレートの上部にある ID をレンダリングしていないことです。

見栄えの良いテンプレートを使用してこれを解決する方法はありますか?

4

1 に答える 1

8

Sightly には、すぐに使える XSS 保護が含まれています。タグvideoPath内に変数を挿入しようとしていることを検出し、コンテキストを指定する必要があるため、特殊文字をエスケープできます。この場合、それはコンテキストでなければなりません:<script>scriptString

<script type='text/javascript'>
    jwplayer('playerpwSIOjcRZrCa').setup({
        file: '//www.youtube.com/watch?v=${videoPath @ context="scriptString"}',
        title: 'Video title',
        width: '100%',
        aspectratio: '16:9'
    });
</script>

詳細については、Adobe ドキュメントを参照してください。

于 2014-08-01T15:52:51.580 に答える