XSS when using dataFormat function

[michaelrodov]

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

[oeph]

It is caused by

react-bootstrap-table/src/TableBody.js

Lines 114 to 118 in 26d07de

	if (!React.isValidElement(formattedValue)) {
	columnChild = (
	<div dangerouslySetInnerHTML={ { __html: formattedValue } }></div>
	);
	} else {

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>)}

[eborden]

There is now a CVE pointing at this issue. Are there plans to fix this XSS exploit?

GHSA-2589-w6xf-983r