Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Validate User-provided URL to prevent XSS #271

Open
wants to merge 1 commit into
base: dev
Choose a base branch
from

Conversation

gtsp233
Copy link

@gtsp233 gtsp233 commented Jan 21, 2024

Fix for Cross-Site Scripting (XSS) Vulnerability

I've identified a Cross-Site Scripting (XSS) vulnerability in the package "@bangle.dev/react-menu"

Vulnerability Details:

  • Severity: High/Critical
  • Description: There's a risk of malicious script execution when user-provided URL is passed to window.open.

Steps to Reproduce:
In a React.js project:

import { PluginKey } from "@bangle.dev/core";
import "@bangle.dev/core/style.css";
import { BangleEditor, useEditorState } from "@bangle.dev/react";
import {
  floatingMenu,
  FloatingMenu,
  LinkSubMenu,
} from "@bangle.dev/react-menu";
import "@bangle.dev/react-menu/style.css";
import "@bangle.dev/tooltip/style.css";
import React from "react";
import {
  bold,
  italic,
  link,
  bulletList,
  heading,
  listItem,
  orderedList,
  paragraph,
} from "@bangle.dev/base-components";
const menuKey = new PluginKey("menuKey");

export default function Example() {
  const editorState = useEditorState({
    specs: [
      bold.spec(),
      italic.spec(),
      link.spec(),
      orderedList.spec(),
      bulletList.spec(),
      listItem.spec(),
      paragraph.spec(),
      heading.spec(),
    ],
    plugins: () => [
      bold.plugins(),
      italic.plugins(),
      link.plugins(),
      orderedList.plugins(),
      bulletList.plugins(),
      listItem.plugins(),
      paragraph.plugins(),
      heading.plugins(),
      floatingMenu.plugins({
        key: menuKey,
      }),
    ],
    initialValue: `<div>
    <p>Hi there, try selecting me to see a floating menu</p>
    <p>Also, checkout this awesome <a href="https://blog.ycombinator.com/the-airbnbs/">article!</a></p>
    </div>`,
  });

  return (
    <BangleEditor state={editorState}>
      <FloatingMenu menuKey={menuKey} />
      <LinkSubMenu></LinkSubMenu>
    </BangleEditor>
  );
}

Then edit the link menu to input "javascript:alert(1)". The malicious code alert(1) will be executed after clicking the menu

Suggested Fix or Mitigation:
It is best practice for a React.js components package to sanitize the user-provided URL. React.js and many popular libraries such as react-router-dom and Next.js also ensure the safety of href attributes. 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.

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

1 participant