AEM6 (CQ) наглядно передает переменную через шаблон в javascript

Question

Я использую новый язык Visually в 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 динамической, чтобы пользователь мог изменить идентификатор внутри автора, поэтому в videoPath передается следующий шаблон (идентификатор YouTube):

<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} в тегах не отображает идентификатор там, где он находится в верхней части шаблона.

Есть ли способ решить эту проблему с помощью визуальных шаблонов?

Answer 1

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.