Aprenda a crear directivas personalizadas: cree directivas de desinfección de URL seguras

Comienzo

Vue.js viene con un conjunto de directivas predeterminadas que son importantes para casos de uso comunes. Estas directivas predeterminadas incluyen v-for, v-html y v-text. Además, Vue.js también nos brinda la posibilidad de registrar directivas personalizadas para satisfacer necesidades específicas.

Las directivas personalizadas a menudo incluyen enlaces de ciclo de vida y pueden operar en etapas como "montado", "actualizado" y "antes de desmontar". Estos ganchos reciben elementos de directivas de aplicación y sus valores asociados, lo que les permite realizar acciones específicas en la entrada.

Además, las funciones se pueden activar de forma selectiva en función de enlaces de ciclo de vida específicos, como 'onUpdated' o 'beforeUnmount'.

Revise cómo personalizar las instrucciones de registro

Las instrucciones se pueden registrar de tres formas diferentes. Se pueden registrar dentro de una configuración de script (función de configuración) o fuera de una función de configuración (función de configuración), o se pueden registrar globalmente durante la inicialización de la aplicación.

1. Función de registro interno

En Vue.js, las variables declaradas con camelCase y con el prefijo 'v' se reconocen automáticamente como directivas. En el ejemplo anterior, definimos la directiva v-text-color, que acepta un elemento vinculado y establece el color del texto según el valor proporcionado.

<script setup>
import { ref } from 'vue'

const msg = ref('Hello World!')

const vTextColor = {
  mounted: (el,binding) => el.style.color = binding.value
}
</script>

<template>
  <h1 v-text-color="`green`">{
    
    { msg }}</h1>
  <input v-model="msg">
</template>

2. Función de registro externo.

También podemos registrar directivas fuera de la función de configuración utilizando la opción API de directivas. El siguiente fragmento de código demuestra cómo lograrlo.

export default {
  setup() {
    /*...*/
  },
  directives: {
    // enables v-textcolor in template
    textcolor: {
      /* ... */
    }
  }
}

3. Registro global

Para las directivas que planea reutilizar con frecuencia en su aplicación, se recomienda registrarlas globalmente, así:

const app = createApp({})

// make v-textcolor usable in all components
app.directive('textcolor', {
  /* ... */
})

Cree nuestra directiva de desinfección de URL personalizada

Ahora que hemos explorado las diferentes formas de registrar directivas personalizadas en Vue.js, pasemos a crear una directiva que desinfecte de forma segura la URL proporcionada. Para evitar reinventar la rueda y garantizar la solidez del análisis de URL, utilizaremos el paquete @braintree/sanitize-url. El paquete ha sido probado exhaustivamente, tiene una adopción generalizada entre los desarrolladores y se mantiene activamente.

Esencialmente, el propósito de esta directiva es obtener el valor del elemento vinculado, que es una URL, y desinfectarlo para garantizar su seguridad. Dependiendo de su administrador de paquetes preferido, puede instalar '@braintree/sanitize-url'. En este ejemplo usaremos npm.

npm install -S @braintree/sanitize-url

URL no segura

A continuación se muestra un ejemplo de una URL insegura que pretendemos limpiar.

http://example.com/login?redirect=http://malicious-site.com/attack?payload=<script>alert('XSS Attack');</script>

En este ejemplo:

La URL parece ser una página de inicio de sesión (http://example.com/login) con un parámetro de consulta redirigido.
El parámetro de redireccionamiento apunta a un sitio web potencialmente malicioso (http://malicious-site.com/attack) y contiene una carga útil que puede realizar un ataque de secuencias de comandos entre sitios (XSS).

Nuestro limpiador de URL personalizado

<script setup>
import { ref } from 'vue'
import { sanitizeUrl } from '@braintree/sanitize-url'

const  msg = ref('Hello World!')
const url = ref('http://example.com/login?redirect=http://malicious-site.com/attack?payload=<script>alert('XSS Attack');</script>
')

const vSafeUrl = {
  mounted:(el,binding)=> {
    el.setAttribute('href', sanitizeUrl(binding.value))
    }
}
</script>

<template>
  <h1>{
    
    { msg }}</h1>
  <a v-safe-url="`url`">Safe url</a>
</template>

Finalizar

Explorar directivas personalizadas en Vue.js resalta su excelente adaptabilidad y utilidad para adaptar aplicaciones a necesidades específicas. En este artículo también analizamos varios métodos de registro de directivas, lo que demuestra la flexibilidad de Vue a la hora de definir su alcance y reutilización.

Debido al espacio limitado del artículo, el contenido de hoy se compartirá aquí. Al final del artículo, me gustaría recordarles que la creación de artículos no es fácil. Si le gusta que comparta, no olvide Me gusta y reenvíalo para que más personas necesitadas lo vean. Al mismo tiempo, si quieres obtener más conocimientos sobre tecnología front-end, sígueme, tu apoyo será mi mayor motivación para compartir. Continuaré publicando más contenido, así que estad atentos.

Cómo escribir un limpiador de URL usando directivas personalizadas en Vue.js