AEM6(CQ)通过变量via模板轻松传递到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作为模板顶部的id.

有没有办法使用明亮的模板解决这个问题？

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文档中找到更多信息.