0

I am using the Identity server 4 self hosted with Google material design lite https://getmdl.io/

In the layout.chtml I have the below code

<head>
    <meta charset="utf-8"/>
    <meta http-equiv="Content-Security-Policy" content="default-src *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src 'self' 'unsafe-inline' *; img-src 'self' data:*">
    <link rel="stylesheet" href="~/lib/mdl/material.min.css">
    <script src="~/lib/mdl/material.min.js"></script>
    <link rel="stylesheet" href="~/lib/mdl/mdl-fonts-css.css"/>
</head>

Asp.net core Middleware

csp.AllowScripts.FromSelf();
            csp.AllowStyles.FromSelf();
            csp.AllowFonts.FromAnywhere();
            csp.AllowImages.FromAnywhere();
        });

The issue is with below line 

<script src="~/lib/mdl/material.min.js"></script>
<div class="mdl-card mdl-shadow--2dp" style="width: 100% !important;">

As I can undetstand from the error that I can't use the inline css, but I want to use the inline css in some of the places.

Error

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-c2d5qa05NGXcgHRIBMvdmXcUZeZvdQK1bXt65QKaVnM='), 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.
textfield.js:236 Refused to load the image 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczbGU9ImZpbGw6IzAwMDAwMDtmaWxsLW9wYWNpdHk6MTtzdHJva2U6bm9uZSIgLz4KPC9zdmc+Cg==' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.

L.init @ snackbar.js:73
L @ snackbar.js:73
a @ material.min.js:8
n @ material.min.js:8
_ @ material.min.js:8
(anonymous) @ material.min.js:8
load (async)
(anonymous) @ material.min.js:8
(anonymous) @ snackbar.js:73
textfield.js:236 Refused to load the image 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3d2lkdGg9IjEiCiAgICAgaGVpZ2h0PSIxIgogICAgIHg9IjAiCiAgICAgeT0iMCIKICAgICBjbGlwLXBhdGg9InVybCgjY2xpcCkiCiAgICAgc3R5bGU9ImZpbGw6IzAwMDAwMDtmaWxsLW9wYWNpdHk6MTtzdHJva2U6bm9uZSIgLz4KPC9zdmc+Cg==' because it violates the following Content Security Policy directive: "img-src 'self' data:*".

I can see from the network ~/lib/mdl/material.min.js is loaded successfully.

Some of the links I followed but didn't helped.

Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self'" modernizr

https://forum.ionicframework.com/t/refuse-to-load-the-image-svg-issue-with-search-bar-icons/47234

San Jaisy
  • 15,327
  • 34
  • 171
  • 290

1 Answers1

0

The Content Security Policy for img-src should be 'self' data: (including the colon but excluding the asterisk).

nyrygyk
  • 23
  • 1
  • 6