Content Security Policy violation because of empty style attribute style="" #7101

dandelionn · 2024-11-08T18:26:55Z

dandelionn
Nov 8, 2024

I've spent hours trying to fix this security issue:

Content-Security-Policy: The page’s settings blocked an inline style (style-src-attr) from being applied because it violates the following directive: “style-src 'self' 'nonce-NzM3MWVhOTgtYzI2OS00Zjk5LThiYmEtM2M0M2UzMjBhZGY3' 'strict-dynamic'”
Source: --title-fw:var(--mantine-h1-font-weight)…

securitypolicyviolation { 
target: h1.title_titleLabel__gWiGn.m_8a5d1357.mantine-Title-root, 
isTrusted: true, 
documentURI: "https://www.company.com/login", 
referrer: "",
blockedURI: "inline", 
violatedDirective: "style-src-attr", 
effectiveDirective: "style-src-attr", 
originalPolicy: "default-src 'self'; 
script-src 'self' 'nonce-NzM3MWVhOTgtYzI2OS00Zjk5LThiYmEtM2M0M2UzMjBhZGY3' 'strict-dynamic'; style-src 'self' 'nonce-NzM3MWVhOTgtYzI2OS00Zjk5LThiYmEtM2M0M2UzMjBhZGY3' 'strict-dynamic'; img-src 'self' blob: data:; font-src 'self'; object-src 'none'; frame-src 'self' https://js.stripe.com/; base-uri 'self'; form-action 'self'; frame-ancestors 'none'; upgrade-insecure-requests", 
sourceFile: "https://www.company.com/login", sample: "", … }

blockedURI: "inline"
bubbles: true
cancelBubble: false
cancelable: false
columnNumber: 
composed: true
currentTarget: null
defaultPrevented: false
disposition: "enforce"
documentURI: "https://www.company.com/login"
effectiveDirective: "style-src-attr"
eventPhase: 0
explicitOriginalTarget: <h1 class="title_titleLabel__gWiGn …1357 mantine-Title-root" style="" data-order="1">
isTrusted: true
lineNumber: 0
originalPolicy: "default-src 'self'; script-src 'self' 'nonce-NzM3MWVhOTgtYzI2OS00Zjk5LThiYmEtM2M0M2UzMjBhZGY3' 'strict-dynamic'; style-src 'self' 'nonce-NzM3MWVhOTgtYzI2OS00Zjk5LThiYmEtM2M0M2UzMjBhZGY3' 'strict-dynamic'; img-src 'self' blob: data:; font-src 'self'; object-src 'none'; frame-src 'self' https://js.stripe.com/; base-uri 'self'; form-action 'self'; frame-ancestors 'none'; upgrade-insecure-requests"
originalTarget: <h1 class="title_titleLabel__gWiGn …1357 mantine-Title-root" style="" data-order="1">
referrer: ""
returnValue: true
sample: ""
sourceFile: "https://www.company.com/login"
srcElement: <h1 class="title_titleLabel__gWiGn …1357 mantine-Title-root" style="" data-order="1">
statusCode: 200
target: <h1 class="title_titleLabel__gWiGn …1357 mantine-Title-root" style="" data-order="1">
timeStamp: 199
type: "securitypolicyviolation"
violatedDirective: "style-src-attr"
<get isTrusted()>: function isTrusted()
<prototype>: SecurityPolicyViolationEventPrototype { documentURI: Getter, referrer: Getter, blockedURI: Getter, … }

I seems to happen because Mantine generates this empty style attribute on html elements (style="") and CSP Policy is not happy with it.

These are the values that I have configured in the Security Policy Header:

const nonce = Buffer.from(crypto.randomUUID()).toString('base64')
const cspHeader = `
  default-src 'self';
  script-src 'self' 'nonce-${nonce}' 'strict-dynamic';
  style-src 'self' 'nonce-${nonce}' 'strict-dynamic';
  img-src 'self' blob: data:;
  font-src 'self';
  object-src 'none';
  frame-src 'self' https://js.stripe.com;
  base-uri 'self';
  form-action 'self';
  frame-ancestors 'none';
  upgrade-insecure-requests;
`

I am using:
"@mantine/core": "^7.13.5",
"next": "^14.2.17", with App Directory

I've tried using getStyleNonce property like this:

'use client'

import { MantineProvider } from "@mantine/core";

export default function CustomMantineProvider({theme, nonce, children}: {theme: any, nonce: string, children: React.ReactNode}) {
    return (
        <MantineProvider 
            theme={theme}
            getStyleNonce={() => nonce}
        >
            {children}
        </MantineProvider>
    )
}

const nonce = Buffer.from(crypto.randomUUID()).toString('base64');

export default function RootLayout({
    children,
}: {
    children: React.ReactNode
}) {
    return (
        <html lang="en">
            <head>
                  ...
            </head>
            <body>
                <div id="root">
                    <CustomMantineProvider theme={theme} nonce={nonce}>
                        {children}
                    </CustomMantineProvider>
                </div>
            </body>
        </html>
    );
}

The only thing that worked is setting:

  style-src 'self' 'unsafe-inline';

But it is not a solution because I check security issue using ZAP Scan:

Alert Detail:

Medium	CSP: style-src unsafe-inline
Description	Content Security Policy (CSP) is an added layer of security that helps to detect and mitigate certain types of attacks, including (but not limited to) Cross Site Scripting (XSS), and data injection attacks. These attacks are used for everything from data theft to site defacement or distribution of malware. CSP provides a set of standard HTTP headers that allow website owners to declare approved sources of content that browsers should be allowed to load on that page — covered types are JavaScript, CSS, HTML frames, fonts, images, and embeddable objects such as Java applets, ActiveX, audio, and video files.
URL	https://www.company.com/
Method	GET
Parameter	content-security-policy
Attack
Evidence	`default-src 'self'; script-src 'self' 'nonce-ZGE3MzQzNDgtNDkxMC00ZmYwLThkOWItZWY5ZTUwMmZlOWY1' 'strict-dynamic'; style-src 'self' 'unsafe-inline' 'strict-dynamic'; img-src 'self' blob: data:; font-src 'self'; object-src 'none'; frame-src 'self' https://js.stripe.com; base-uri 'self'; form-action 'self'; frame-ancestors 'none'; upgrade-insecure-requests;`
Other Info	style-src includes unsafe-inline.

How can I fix it?

rtivital · 2024-11-08T18:47:37Z

rtivital
Nov 8, 2024
Maintainer

style-src 'self' 'unsafe-inline'; is a reasonable CSP. Mantine components use inline styles to declare dynamic properties like colors and sizes. Without these variables, the library will not function. If you need to support a stricter CSP, then it is better to create a library from scratch.

1 reply

dandelionn Nov 8, 2024
Author

Thanks for the fast reply. Does getStyleNonce attribute provides any benefit when we have: style-src 'self' 'unsafe-inline'; ? When should I use it?

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Mantine

Content Security Policy violation because of empty style attribute style="" #7101

{{title}}

Replies: 1 comment 1 reply

{{title}}

{{title}}

Select a reply

Mantine

Content Security Policy violation because of empty style attribute style="" #7101

dandelionn Nov 8, 2024

Replies: 1 comment · 1 reply

rtivital Nov 8, 2024 Maintainer

dandelionn Nov 8, 2024 Author

dandelionn
Nov 8, 2024

Replies: 1 comment 1 reply

rtivital
Nov 8, 2024
Maintainer

dandelionn Nov 8, 2024
Author