CVE-2021-31712: Cross-site Scripting in React Draft Wysiwyg
Summary
CVE-2021-31712: Cross-site Scripting in React Draft Wysiwyg. Affects react-draft-wysiwyg versions < 1.14.6. Fixed in 1.14.6. How to fix ↓
Check if this vulnerability affects your application
Upload a manifest or SBOM and we'll show whether you're affected, plus every other risky package in the same scan.
No signup required · Results in about 60 seconds
Background
React Draft Wysiwyg is a rich text editor component for React that allows users to create and edit content with formatting options. It is commonly used in web applications to provide a user-friendly interface for text input. However, versions of React Draft Wysiwyg prior to 1.14.6 are vulnerable to a cross-site scripting (XSS) attack. This vulnerability occurs when a javascript: URI is allowed in the Link Target of the link decorator in decorators/Link/index.js. If a draft created with React Draft Wysiwyg is shared across users, an attacker can inject malicious scripts into the shared content, leading to XSS attacks.
Vulnerability Detail
The vulnerability in React Draft Wysiwyg allows an attacker to execute arbitrary JavaScript code in the context of a victim's browser. By crafting a malicious link with a javascript: URI as the target, an attacker can trick a user into clicking the link and executing the injected code. This can lead to various security risks, such as stealing sensitive information, performing actions on behalf of the user, or modifying the content of the web page. The vulnerability has a high severity rating (CWE-79) and should be addressed promptly to prevent potential exploitation.
How To Fix
Minimum fixed version
1.14.6
This is the first release that contains the fix.
npm install react-draft-wysiwyg@1.14.6Tip — Not sure which version your app runs? Vulert can match this fix to it. Scan free →
Workaround
If upgrading to the latest version of React Draft Wysiwyg is not immediately feasible, a temporary workaround is to manually sanitize the Link Target input to prevent the execution of javascript: URIs. This can be done by implementing custom validation or sanitization logic in the decorators/Link/index.js file. Here is an example of how to sanitize the Link Target input using the DOMPurify library:
import DOMPurify from 'dompurify';
// Inside the link decorator
const Link = (props) => {
const { children, entityKey } = props;
const { url } = Entity.get(entityKey).getData();
const cleanUrl = DOMPurify.sanitize(url);
return <a href={cleanUrl}>{children}</a>;
};
Conclusion
The vulnerability in React Draft Wysiwyg can lead to cross-site scripting (XSS) attacks, allowing an attacker to execute arbitrary JavaScript code in the context of a victim's browser. It is important to upgrade to the latest version of React Draft Wysiwyg (1.14.6 or later) or apply the provided workaround to mitigate the risk of exploitation. Regularly updating and patching all dependencies is also crucial to ensure the security of web applications. For further support on vulnerability remediation, you can contact DevNack.com.
See every vulnerability recorded for react-draft-wysiwyg →
FAQ
React Draft Wysiwyg is a rich text editor component for React that allows users to create and edit content with formatting options. It provides a user-friendly interface for text input in web applications.
Cross-site scripting (XSS) is a type of security vulnerability that allows attackers to inject malicious scripts into web pages viewed by other users. This can lead to various security risks, such as stealing sensitive information or performing actions on behalf of the user.
The vulnerability occurs when a javascript: URI is allowed in the Link Target of the link decorator in decorators/Link/index.js. If a draft created with React Draft Wysiwyg is shared across users, an attacker can inject malicious scripts into the shared content, leading to XSS attacks.
The vulnerability can allow an attacker to execute arbitrary JavaScript code in the context of a victim's browser. This can lead to various security risks, such as stealing sensitive information, performing actions on behalf of the user, or modifying the content of the web page.
To fix this vulnerability, it is recommended to upgrade to React Draft Wysiwyg version 1.14.6 or later. This version includes a fix for the XSS vulnerability by properly sanitizing the Link Target input. Developers should update their application's dependencies to use the latest version of React Draft Wysiwyg.
References
Related vulnerabilities
Recent vulnerabilities recorded for react-draft-wysiwyg.
