Non puoi farlo. Vue usa il DOM per impostare l'attributo href, quindi non è codificato dal server in un modo che potrebbe ingannare il parser HTML. È semplicemente impossibile impostare un attrib con il DOM in un modo che "scoppi" dell'attrib, o inizi un nuovo attributo come se avessi una sorgente HTML grezza; tutti i caratteri non validi saranno evitati logicamente, anche se i valori non elaborati negli strumenti dev lo fanno sembrare che l'attacco dovrebbe funzionare.
Se hai eseguito uno dei template sul server (forse nel tentativo di pre-rendering), allora è un problema, ma così com'è, sei al sicuro.
tieni presente che data:
e javascript:
urls potrebbero essere ancora un problema, ma probabilmente hai già ottenuto la protezione da tale configurazione, dato il tuo livello apparente di competenza.
EDIT: risposta al commento
considera una semplice pagina che usa il DOM per iniettare contenuti:
<html>
<a id=a href="#">xss</a>
<script>a.href='"><script>alert(123)<\/script>';</script>
</html>
Se guardi gli strumenti dello sviluppatore ispeziona la visualizzazione, potresti vedere qualcosa di spaventoso come questo:
<a id="a" href=""><script>alert(123)</script>">xss</a>
Sembra che ci sia un tag <script>
all'interno del tag <a>
e, in effetti, se lo copi in una pagina vuota e lo guardi, avverrà. Tuttavia, non è in realtà un problema perché gli strumenti di sviluppo stanno giocando un trucco visivo. Il contenuto effettivo dell'elemento quando serializzato è più simile a questo:
<a id="a" href=""><script>alert(123)</script>">xss</a>
Questo è ciò che intendevo quando il DOM scappava automaticamente da qualsiasi contenuto arbitrario; Finché usi il DOM per impostare un attrib, non c'è modo di "sbaragliare" l'attrib con qualsiasi contenuto. Ciò non significa che un attributo con effetto collaterale, come onmouseover
non può sbagliarti, solo che non puoi impostare onmouseover
regolando un href
.
Quel data:
e javascript:
url protocol è ben discusso altrove, ma tieni presente che è un modo per collegare a documenti di contenuto arbitrario ( data:
) e codice JS ( jacascript:
).
Ad esempio, entrambi questi avvisi "666" (segno della bestia) quando si fa clic:
Javascript: <a href=javascript:alert(666)>xss</a>
Dati: <a href=data:text/html,%3Cscript%3Ealert%28666%29%3C/script%3E>xss</a>
Entrambi possono essere utilizzati al posto di un URL http (s), quindi assicurati di proteggerti, specialmente javascript:
perché non ha bisogno di una barra per rendere eseguibile il codice.