react
react copied to clipboard
sanitize submission value
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 an adversary controls the submission content.
Steps to Reproduce: In a React.js project, render the SubmissionGrid component with the data:
import { SubmissionGrid } from '@formio/react'
<SubmissionGrid
submissions={{
limit: 1,
pagination: {
page: 1,
numPages: 1,
total: 1,
},
submissions: [
{
id: "1",
isHtml: true,
content: `<img src='' onError=alert(1)`,
data: {
firstName: (submission) => {
return "1";
},
lastName: `<img src='' onError=alert(1)>`,
},
},
],
}}
form={{
components: [
{
type: "textfield",
key: "firstName",
label: "First Name",
input: true,
tableView: true,
},
{
type: "button",
key: "lastName",
label: "Last Name",
input: true,
tableView: true,
},
],
}}
columns={[
{
key: "firstName",
label: "First Name",
sort: true,
value: (submission) => {
return {
content: submission.data.lastName,
isHtml: true,
};
},
},
]}
/>
Then the malicious code alert(1) will be executed.
Suggested Fix or Mitigation: It is best practice for a React.js components package to sanitize content before passing it to dangerouslySetInnerHTML, even when the data has been pre-sanitized on the server side.
I've used isomorphic-dompurify to sanitize the submission content and tested it locally. Please review and merge my pull request at your earliest convenience to resolve this vulnerability. Thanks!