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

Sightly 包含开箱即用的 XSS 保护。它检测到您试图在<script> 标记内注入videoPath 变量，并且需要指定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找到。