sanitize javascript url to prevent XSS

Fix for Cross-Site Scripting (XSS) Vulnerability

I've identified a Cross-Site Scripting (XSS) vulnerability in this package.

Vulnerability Details:

Severity: High/Critical
Description: There's a risk of malicious script execution when the input to ClickToComponent is controlled by an attacker.

Steps to Reproduce: In a React.js project:

import React from "react";
import ReactDOM from "react-dom/client";
import { ClickToComponent } from "click-to-react-component";

const root = ReactDOM.createRoot(document.getElementById("root"));

function App() {
  return (
    <ClickToComponent
      editor="javascript:alert(1);'"
      pathModifier={() => {
        return `'`;
      }}
    />
  );
}
root.render(<App />);

Then the malicious code alert(1) will be executed.

Suggested Fix or Mitigation: It is best practice for a React.js component package to sanitize the URL before passing it to window.location.assign. React.js and many popular libraries such as react-router-dom and Next.js also ensure URL safety to prevent XSS. For instance, React.js issues warnings about URLs starting with javascript: and is planning to block these in future versions, as indicated in this pull request.

Using a whitelist to filter the "editor" props is also suggested.

I've already fixed and tested this issue, and have submitted a pull request with the necessary changes. Please review and merge my pull request to resolve this vulnerability. Thanks!

ericclemmons / click-to-component

sanitize javascript url to prevent XSS #80

Fix for Cross-Site Scripting (XSS) Vulnerability

⚠️ No Changeset found