Cross-Site Scripting Vulnerability in react-marked-markdown

Background

react-marked-markdown is an npm package that provides a Markdown preview component for React applications. It allows users to render Markdown content in a preview format. The package is widely used in web development projects to display formatted text and content. However, all versions of react-marked-markdown are vulnerable to a cross-site scripting (XSS) attack when user input is provided to the href attribute.

Vulnerability Detail

The vulnerability in react-marked-markdown arises from a lack of proper input sanitization in the href attribute. When user input is allowed in href values, an attacker can inject malicious JavaScript code that will be executed in the context of the user's browser. This can lead to various security risks, such as stealing sensitive information, performing actions on behalf of the user, or redirecting the user to malicious websites. The vulnerability has been assigned a severity rating of HIGH and is classified under CWE-79 (Cross-Site Scripting).

Workaround

As a workaround, you can manually sanitize the user input before passing it to react-marked-markdown. One way to achieve this is by using a library like DOMPurify to sanitize the href values. Here's an example of how you can implement this workaround:

import React from 'react';
import ReactDOM from 'react-dom';
import { MarkdownPreview } from 'react-marked-markdown';
import DOMPurify from 'dompurify';

const sanitizedHref = DOMPurify.sanitize('[XSS](javascript: alert`1`)');

ReactDOM.render(
  <MarkdownPreview
    markedOptions={{ sanitize: true }}
    value={sanitizedHref}
  />, 
  document.getElementById('root')
);

By using DOMPurify, you can ensure that any potentially malicious code is removed from the href value before rendering it in react-marked-markdown.

Conclusion

The react-marked-markdown package is vulnerable to a cross-site scripting (XSS) attack when user input is allowed in href values. This can lead to various security risks and compromise the integrity of the application. It is recommended to avoid using this module until a fix is available or to implement additional input validation and sanitization measures. For further support on vulnerability remediation, you can reach out to DevNack.com.

See every vulnerability recorded for react-marked-markdown →

FAQ