Snippet

Validierung externer Link-Protokolle gegen Skriptausführung in Vue

Bösartige URLs mit Pseudo-Protokollen wie 'javascript:' können beliebigen Code ausführen, wenn sie direkt an href-Attribute gebunden werden. Die Prüfung, dass URLs nur mit vertrauenswürdigen Protokollen wie 'http://' oder 'https://' beginnen, verhindert Cross-Site-Scripting-Angriffe (XSS) in Komponenten-Templates.

snippet.js

javascript

import { ref, computed } from 'vue';
 
export default {
  setup() {
    const userUrl = ref('javascript:alert(1)');
 
    const safeUrl = computed(() => {
      const isHttp = userUrl.value.startsWith('http://');
      const isHttps = userUrl.value.startsWith('https://');
      return (isHttp || isHttps) ? userUrl.value : '#';
    });
 
    return { userUrl, safeUrl };
  }
};

vue

Erklärung

const userUrl = ref('javascript:alert(1)');

Enthält die ungeprüfte URL-Zeichenkette aus Benutzereingaben.

const isHttp = userUrl.value.startsWith('http://');

Prüft, ob die URL mit dem unverschlüsselten HTTP-Protokoll-Präfix beginnt.

const isHttps = userUrl.value.startsWith('https://');

Prüft, ob die URL mit dem sicheren HTTPS-Protokoll-Präfix beginnt.

return (isHttp || isHttps) ? userUrl.value : '#';

Gibt die Original-URL zurück, wenn sie gültig ist, andernfalls einen sicheren Fallback-Anker '#' bei unerlaubten Protokollen.

Vorheriges Snippet Nächstes Snippet

Mehr JavaScript-Übungen für Anfänger →

Validierung externer Link-Protokolle gegen Skriptausführung in Vue

Verwandt