Avoid adding inline styles to table as it violates Content security policy headers

[Sanbala]

Avoid adding inline styles as it causes security violation when adding CSP headers

In table renderer, inline style attribute is added to the React element when there are styles specified in the markdown. This causes security violation. In order

Your environment

• OS: Windows
• Packages: Latest (v4.3.1)
• Env: All browsers

Steps to reproduce

1. Write a table with center aligned column and right aligned column in markdown.
2. Pass this to react markdown and check the final output. The rendered react element will have the style attribute assigned to th element.

Provided the sample app code below,
https://codesandbox.io/s/react-markdown-debug-forked-1ifpx?file=/src/App.js

Expected behavior

align attribute should be added to the element

Actual behavior

Style attribute is getting added to the element

To solve the above issue, table cell renderer has to be changed. I am currently overriding the table cell renderer and adding "align" attribute if style has text-align and removed the style attribute. Please find the code Below,

export function customTableCellRenderer(props: any) {
  let tableCellElement = tableCellRenderer(props); //**Original react markdown tableCellRenderer**
  let elementProps = { ...tableCellElement.props };

  if (elementProps.style?.textAlign) {
    elementProps.align = elementProps.style.textAlign;
    delete elementProps.style;
    tableCellElement = { ...tableCellElement, ...{ props: elementProps } };
  }

  return tableCellElement;
}

[wooorm]

Hmm. React warns about align, because it’s deprecated. That’s why most react markdown tools use style instead.

Can you allow inline style in your CSP? And, otherwise, I think it’s fine that you override it yourself?

[Sanbala]

Its possible to allow inline style in CSP headers but that will cause security vulnerability. so, we didn't do that.
Will my above override cause any issue anytime?

[wooorm]

Its possible to allow inline style in CSP headers but that will cause security vulnerability

Such as?

Will my above override cause any issue anytime?

We will probably rewrite renderers next major: #549. So then it’d need to change. But otherwise it looks good