AEM6（CQ）がテンプレートを介して変数を透過する概要JavaScript

Question

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> 

.

しかし、私はYouTube変数を動的にしたいので、ユーザが作者内のIDを変更することができるので、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をレンダリングしていません。

これを目指してテンプレートを使って解く方法はありますか？

Answer 1

晴れたXSS保護を視覚的に含みます。videoPathタグ内に<script>変数を挿入しようとしていることを検出し、 context を指定する必要があるため、特殊文字をエスケープできます。この場合、それは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 Docsにあります。