AEM6 (CQ) sightly passing through variable via template into javascript

Question

I'm using the new sightly language in AEM6 to render my components using templates, in my component there is a video that uses the JWPlayer plugin which needs the following code to initalise the video:

<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> 

But I want to make the Youtube variable dynamic so the user can change the id within the author so have got the following template passing in the 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>

The problem I'm having is the ${videoPath} in the tags is not rendering the id where as the one at the top of the template is.

Is there a way in solving this using the sightly templates?

Answer 1

Sightly contains out-of-the-box XSS protection. It detects that you are trying to inject videoPath variable inside the <script> tag and requires to specify the context, so it can escape special characters. In this case it should be scriptString context:

<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>

More info can be found in the Adobe docs.