XSS when using dataFormat function
Hi When using dataFormat function and not converting the value to react component output is not sanitised. Therefore you can easily run XSS through it.
const Demo = props => {
let data = [
{key: "1", value: "test"},
{key: "2", value: '/1337"><noscript><p title="</noscript><img src=x onerror=alert`openbugbounty`>">'}
]
return (
<BootstrapTable data={data}>
<TableHeaderColumn dataField="key" isKey />
<TableHeaderColumn dataField="value" dataFormat={v => v} />
</BootstrapTable>
);
};
Example: https://codesandbox.io/s/q7oj2v6xo9?fontsize=14
It is caused by https://github.com/AllenFang/react-bootstrap-table/blob/26d07defab759e4f9bce22d1d568690830b8d9d7/src/TableBody.js#L114-L118
If you return a invalid react element, it will use dangerouslySetInnerHTML. Your fix could be to use the following dataFormat:
dataFormat={v => (<span>{v}</span>)}
There is now a CVE pointing at this issue. Are there plans to fix this XSS exploit?
https://github.com/advisories/GHSA-2589-w6xf-983r