stackoom
  简体   繁体   中英

Css inline style error in Chrome: “Refused to apply inline style because it violates the following Content Security Policy directive…”

 原文  2020-09-02 15:22:14  9   1    html/ css/ google-chrome

Question

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?

1 answers

solution1
 0  2020-09-11 16:30:12

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.

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Chrome extension policy error: Refused to execute inline event handler because it violates the following Content Security Policy directive Refused to load the stylesheet because it violates the following Content Security Policy directive: "style-src 'self' 'unsafe-inline'" Refused to load the script because it violates the following Content Security Policy directive: "style-src 'self' 'unsafe-inline' Refused to apply inline style and image 'data:image/svg+xml;base64,PD94bWwgd because it violates the following Content Security Policy directive: Cordova error: Refused to execute inline script because it violates the following Content Security Policy directive I keep getting the error "Refused to execute inline event handler because it violates the following Content Security Policy directive how to fix error " Refused to execute inline script because it violates the following Content Security Policy directive: Refused to execute inline script because it violates the following Content Security Policy directive: "default-src 'self'" Refused to load scripts because it violates the following Content Security Policy directive Chrome Extension “Refused to load the script because it violates the following Content Security Policy directive”
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM