Description

Detects potentially unsafe HTML content injection through innerHTML assignments or dangerouslySetInnerHTML in React components. These practices can lead to Cross-Site Scripting (XSS) vulnerabilities if unescaped content from untrusted sources is rendered directly into the DOM.

Detection Strategy

• Identifies direct assignments to element.innerHTML property in JavaScript/TypeScript code

• Detects usage of dangerouslySetInnerHTML property in React components

• Flags instances where unescaped or unsanitized content is used with innerHTML

• Reports a vulnerability when dynamic content is directly inserted into HTML without proper sanitization

Vulnerable code example

import React from 'react';

const VulnerableComponent = () => {
  const userProvidedHtml = "<script>alert('xss')</script>"; // Untrusted input source
  
  return (
    <div>
      {/* VULNERABLE: Directly inserting unvalidated HTML can lead to XSS */}...

✅ Secure code example

import React from 'react';
import DOMPurify from 'dompurify'; // Import DOMPurify for HTML sanitization

const SafeComponent = () => {
  const userProvidedHtml = "<script>alert('xss')</script>"; // Untrusted input source
  
  // Option 1: Using sanitization
  const sanitizedHtml = DOMPurify.sanitize(userProvidedHtml); // Sanitize HTML to remove malicious content...