CSP header issue

[akatiyar3c]

Summary

Hello , I'm using @shopify/polaris version "^12.27.0" in my react app.
After create production build in my react app i got CSP issue

index-CLCn771u.js:42 Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-QPy5zGEcgJF2y9uZ6f6kJJM3Yjn5TLSiMk4Yn/FqfxQ='), or a nonce ('nonce-...') is required to enable inline execution. Note that hashes do not apply to event handlers, style attributes and javascript: navigations unless the 'unsafe-hashes' keyword is present.

index-CLCn771u.js:42 Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-9PXU9ctHkYu+kAmEuAGDoNW6RQM+FRlSaiM8WKwp0BU='), or a nonce ('nonce-...') is required to enable inline execution. Note that hashes do not apply to event handlers, style attributes and javascript: navigations unless the 'unsafe-hashes' keyword is present.

After some debugging i got AppProvider.tsx file injecting inline css

polaris/polaris-react/src/components/AppProvider/AppProvider.tsx

Line 43 in 34ade0c

`position: absolute; opacity: 0; transform: translate3d(-9999px, -9999px, 0); pointer-events: none; width:${SCROLLBAR_TEST_ELEMENT_PARENT_SIZE}px; height:${SCROLLBAR_TEST_ELEMENT_PARENT_SIZE}px;`,

For now i can solve this problem to mention hash value and "unsafe-hashes" in style-src directive. Can you check and let me know is it right way to do this or i can manage it without "unsafe-hashes" ?

This is my current CS header

Expected behavior

JS chunk will load in browser without any CSP issue. JS chunk is already whitelisted using 'self' parameter in script-src and style-src directive

Actual behavior

CSP header issue comes in browser

Steps to reproduce

No response

Are you using React components?

Yes

Polaris version number

12.27.0

Browser

Chrome: 138.0.7204.169

Device

System: OS: macOS 15.5 CPU: (8) arm64 Apple M2 Memory: 120.80 MB / 8.00 GB Shell: 5.9 - /bin/zsh

[akatiyar3c]

Same issue is happend in app-bridge.js file

Due to ibjection of <style>:host{display: none;}</style>
causing CSP issue