SVG

Definition

SVG (Scalable Vector Graphics) is an XML-based format for describing two-dimensional vector graphics. It supports interactivity and animation, making it a popular choice for web graphics. SVG files can be manipulated via CSS and JavaScript, which introduces potential security risks such as cross-site scripting (XSS) if not properly sanitized.

Secure Settings Example

To ensure SVG files are securely embedded in a web application, sanitize the SVG content to remove any potentially harmful scripts or elements. Use a library like DOMPurify to clean SVGs before rendering them in the browser.

import DOMPurify from 'dompurify';

const sanitizedSVG = DOMPurify.sanitize(unsafeSVGContent, { USE_PROFILES: { svg: true } });
document.getElementById('svg-container').innerHTML = sanitizedSVG;

Insecure Settings Example

An insecure practice is directly embedding user-generated SVG content into a webpage without any sanitization, which can lead to XSS attacks.

// Directly embedding user-generated SVG content without sanitization
document.getElementById('svg-container').innerHTML = userProvidedSVGContent;