Unsafe inline style violate Content Security Policy

[yinlam22]

Description

Unsafe inline style is used in some of the chakra UI components that will violate the Content Security Policy
Example:

• chakra-ui/packages/components/toast/src/toast.provider.tsx

  Line 130 in d3fc1fd

  style={getToastListStyle(position)}

• https://github.com/chakra-ui/chakra-ui/blob/d3fc1fd61dcee50a8916dfee9bd403e645bf6cbb/packages/components/toast/src/toast.utils.ts#:~:text=%3A%20undefined-,return%20%7B,%7D,-%7D

  return {
    position: "fixed",
    zIndex: "var(--toast-z-index, 5500)",
    pointerEvents: "none",
    display: "flex",
    flexDirection: "column",
    margin,
    top,
    bottom,
    right,
    left,
  }

Expected behavior

• A way to add nonce globally to all chakra UI components
• Avoid the use of unsafe inline style

Link to Reproduction

Not really possible to show this in CodeSandbox

Steps to reproduce

Add the Content-Security-Policy header on a website with this value:

"base-uri; child-src; connect-src 'self' *; default-src; font-src; form-action; frame-ancestors 'self' *; frame-src 'self'; img-src 'self' * data:; manifest-src 'self'; media-src 'self'; object-src 'none'; script-src 'self'; style-src 'self' ;"

Chakra UI Version

2.4.1

Browser

No response

Operating System

• macOS
• Windows
• Linux

Additional Information

No response

[segunadebayo]

Hi @yinlam22,

The styles used in that component are not unsafe, except I misunderstand what you're saying. Adding styles in the style attribute is not an issue with React.

As far as I know, this will only be an issue when style elements are injected into the document.

[yinlam22]

Hi @segunadebayo
Sorry, I should have provided more clarification and shared my finding on this.

What I meant by unsafe inline style on that chakra UI component is it is blocked by the Content Security Policy when the "unsafe-inline" is not added to the Content-Security-Policy: style-src

if the unsafe-inline source is not specified in the CSP style-src, then it will block the inline style attributes: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src#unsafe_inline_styles

I reproduced the scenario using codesandbox
https://codesandbox.io/s/chakra-ui-toast-example-ds6lwm?file=/src/App.js

when inspecting the page, we noticed that all the <div> rendered under <div class="chakra-portal"> has style attribute injected directly to the element and thus it is violating the no unsafe-inline CSP

[jacklimwenjie]

Hey @segunadebayo is it possible to reopen this? I'm having the same issue

[NoobTW]

Same here. I think this should be reopen.

[ptim]

If using vite, this seems relevant (doesn't require Content-Security-Policy: style-src 'unsafe-inline';):

When html.cspNonce is set, Vite adds a nonce attribute with the specified value to any <script> and <style> tags, as well as tags for stylesheets and module preloading. Additionally, when this option is set, Vite will inject a meta tag (<meta property="csp-nonce" nonce="PLACEHOLDER" />).

The nonce value of a meta tag with property="csp-nonce" will be used by Vite whenever necessary during both dev and after build.

https://vitejs.dev/guide/features.html#content-security-policy-csp

Would be great to see mention of this in Chakra docs 👍 (I'm not enough of an authority to contribute such, at this stage...)