CODEWITHSUNDEEP
htmlcssgoogle-chrome
sleb
sleb

Reputation: 193

Css inline style error in Chrome: "Refused to apply inline style because it violates the following Content Security Policy directive..."

I have the following html page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <meta charset="utf-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=11"/>
        <meta http-equiv="Cache-Control" content="no-cache"/>
        <meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline';"/>
        <title>
        </title>
    </head>

    <style>
            .container {
                display: flex;
                display: -webkit-flex;
                justify-content: center;
            }

            .label {
                font-size: 20px;
                text-align: center;
            }

    </style>

    <body>
        <div class="container">
            <div class="label">Label content.</div>
        </div>
    </body>
</html>

Despite "Content-Security-Policy" tag with 'unsafe-inline' the styles are not applied and I see the following error in Chrome:

"Refused to apply inline style because it violates the following Content Security Policy directive: "default-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-daGc4DKtFpvn1iqhVz5mJJ4bXSwDGTnQKoxHdrHVEhc='), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'style-src' was not explicitly set, so 'default-src' is used as a fallback."

What can be done to resolve this issue?

Upvotes: 4

Views: 4637

Answers (1)

Sergi Juanati
Sergi Juanati

Reputation: 1416

This may happen because the CSP defined in the HTML differs from the one in your web server settings. In case of Apache, this is located in file '.htaccess'.

However, if you add a CSP with a global 'unsafe-inline' and 'unsafe-eval', there is not security at all and the CSP becomes slightly useless.

In addition, consider creating different files for HTML and CSS, and import the styles whenever you need.

Upvotes: 1

Related Questions