AEM6 (CQ) passando avvincente attraverso la variabile tramite modello in JavaScript

Question

Sto usando la nuova lingua mira in AEM6 per rendere i miei componenti utilizzando i modelli, nel mio componente c'è un video che utilizza il plugin JWPlayer che richiede il seguente codice da initalise il 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> 

.

Ma voglio rendere la dinamica della variabile di YouTube, quindi l'utente può modificare l'ID all'interno dell'autore, quindi ha ottenuto il seguente modello che passa nel videopat (ID di 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>

.

Il problema che sto avendo è il $ {Videopata} nei tag non rendono l'ID dove è quello nella parte superiore del modello.

C'è un modo per risolvere questo usando i modelli avversamente?

Answer 1

Viselicamente contiene protezione XSS fuori-the-box.Rileva che si sta tentando di iniettare la variabile videoPath all'interno del tag <script> e richiede di specificare il contesto , quindi può sfuggire ai caratteri speciali.In questo caso dovrebbe essere il contesto 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>

.

Maggiori informazioni può essere trovato in Adobe Docs.