Security Fix for Cross-site Scripting (XSS) - huntr.dev

[huntr-helper]

https://huntr.dev/users/d3v53c has fixed the Cross-site Scripting (XSS) vulnerability 🔨. Think you could fix a vulnerability like this?

Get involved at https://huntr.dev/

Q | A
Version Affected | ALL
Bug Fix | YES
Original Pull Request | 418sec#1
Vulnerability README | https://github.com/418sec/huntr/blob/master/bounties/npm/react-frappe-charts/1/README.md

User Comments:

📊 Metadata *

react-frappe-charts is vulnerable to Cross-Site Scripting (XSS).

Bounty URL: https://www.huntr.dev/bounties/1-npm-react-frappe-charts

⚙️ Description *

Cross-Site Scripting (XSS) attacks are a type of injection, in which malicious scripts are injected into otherwise benign and trusted websites. XSS attacks occur when an attacker uses a web application to send malicious code, generally in the form of a browser side script, to a different end user. Flaws that allow these attacks to succeed are quite widespread and occur anywhere a web application uses input from a user within the output it generates without validating or encoding it.

💻 Technical Description *

Cross-Site Scripting (XSS) attacks are mitigated by sanitizing the user inputs before rendering, thereby preventing malicious execution.

🐛 Proof of Concept (PoC) *

Create a sandbox using "React" https://codesandbox.io/s
Edit the data in the file App.js with the following code

//App.js
import React, { useRef } from "react";
import ReactFrappeChart from "react-frappe-charts";

export default function MyChart(props) {
  const chartRef = useRef();

  const exportChart = () => {
    if (chartRef && chartRef.current) {
      chartRef.current.export();
    }
  };

  return (
    <div>
      <ReactFrappeChart
        ref={chartRef}
        type="bar"
        colors={["#21ba45"]}
        axisOptions={{ xAxisMode: "tick", yAxisMode: "tick", xIsSeries: 1 }}
        height={250}
        data=
          labels: ["Sun", "Mon'><img src=x onerror=alert(1)>", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          datasets: [{ values: [18, 60, 30, 35, 8, 52, 17, 4] }],
      />
      <button onClick={exportChart} type="button">
        Export
      </button>
    </div>
  );
}

And add the appropriate dependencies
XSS payload will get executed.

🔥 Proof of Fix (PoF) *

Before:

After:

👍 User Acceptance Testing (UAT)

After the fix, functionality is unaffected.

[JamieSlome]

@gilangmlr - sorted! 🍰