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

明显包含开箱即用的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 docs找到更多信息。

AEM6（CQ）通过变量via模板轻松传递到javascript

1 个答案: