No puedes hacerlo. Vue usa el DOM para configurar el atributo href, por lo que no está codificado de forma rígida desde el servidor de una manera que pueda engañar al analizador de HTML. Es simplemente imposible establecer un atributo con el DOM de una manera que "rompa" el atributo, o inicie un nuevo atributo como si tuviera una fuente de HTML sin formato; todos los caracteres no válidos se escaparán lógicamente, incluso si los valores sin procesar en las herramientas de desarrollo hacen que parezca que el ataque debería funcionar.
Si realizó alguna de las plantillas en el servidor (quizás en un intento de pre-renderización), entonces es un problema, pero tal como está, está seguro.
tenga en cuenta que data:
y javascript:
urls podrían seguir siendo un problema, pero probablemente ya tenga protección de esa configuración, dado su aparente nivel de experiencia.
EDITAR: respondiendo a un comentario
considere una página simple que usa el DOM para inyectar contenido:
<html>
<a id=a href="#">xss</a>
<script>a.href='"><script>alert(123)<\/script>';</script>
</html>
Si observa la vista de inspección de las herramientas del desarrollador, es posible que vea algo aterrador como este:
<a id="a" href=""><script>alert(123)</script>">xss</a>
Parece que hay una etiqueta <script>
dentro de la etiqueta <a>
, y de hecho, si la copia en una página en blanco y la ve, se alertará. Sin embargo, no es realmente un problema porque las herramientas para desarrolladores están jugando un truco visual. El contenido real del elemento cuando se serializa es más parecido a esto:
<a id="a" href=""><script>alert(123)</script>">xss</a>
Eso es lo que quise decir con el DOM que escapa automáticamente cualquier contenido arbitrario; Mientras use el DOM para establecer un atributo, no hay manera de "eliminar" el atributo con ningún contenido. Eso no significa que un atributo con efecto secundario, como onmouseover
no pueda hacerte mal, solo que no puedes establecer onmouseover
ajustando un href
.
Ese protocolo% ur_de% y data:
url se discute bien en otra parte, pero tenga en cuenta que es una forma de vincular documentos de contenido arbitrario ( javascript:
) y código JS ( data:
).
Por ejemplo, ambas alertas "666" (marca de la bestia) cuando se hace clic:
Javascript: jacascript:
Datos: <a href=javascript:alert(666)>xss</a>
Ambos se pueden usar en lugar de una URL de http (s), así que asegúrate de protegerte de eso, especialmente <a href=data:text/html,%3Cscript%3Ealert%28666%29%3C/script%3E>xss</a>
porque no necesita una barra para hacer que el código sea ejecutable.