flawopen.com/JavaScript में XSS/Vue v-html

Vue v-html से XSS का जोखिम

<p v-html="comment"></p>
// comment को वास्तविक markup की तरह parse किया जाता है

<script setup>
import { computed } from 'vue'
import DOMPurify from 'dompurify'

const props = defineProps({ comment: String })
const safeComment = computed(() =>
  DOMPurify.sanitize(props.comment ?? '', {
    ALLOWED_TAGS: ['p', 'strong', 'em'],
    ALLOWED_ATTR: []
  })
)
</script>

<template>
  <div v-html="safeComment"></div>
</template>

v-html से पहले rich HTML साफ़ करें

जब सामग्री टेक्स्ट होनी चाहिए, तो Vue का {{ }} interpolation प्राथमिकता दें। यदि किसी सुविधा को सच में उपयोगकर्ता-लिखित rich HTML चाहिए, तो DOMPurify जैसी अनुरक्षित library को सीमित allowlist के साथ उपयोग करें; केवल साफ़ किए गए परिणाम को v-html से bind करें। sanitizer अपडेट रखें और अनुमत markup नीति को test करें। sanitization जोखिम घटाता है, लेकिन हर HTML को हर संदर्भ में सुरक्षित नहीं बनाता; सक्रिय सामग्री को अविश्वसनीय रखते हुए दिखाना हो तो अलग iframe का उपयोग करें। Vue v-html सामग्री को Vue template की तरह compile नहीं करता।

v-html का audit करें और data flow trace करें

सभी v-html bindings खोजें। हर binding के लिए source, sanitizer और उसकी configuration, तथा rendered सामग्री देखने वाले उपयोगकर्ताओं की पहचान करें। सीधे user input, stored comments, CMS fields और API responses चिन्हित करें; सामान्य टेक्स्ट के लिए interpolation का उपयोग जाँचें।

आम सवाल

संदर्भ

• Vue.js दस्तावेज़ — सुरक्षा: HTML सामग्री
• DOMPurify — HTML sanitizer दस्तावेज़
• OWASP — Cross-Site Scripting से बचाव
• flawopen.com — JavaScript में XSS