拒绝应用内联样式和图像 'data:image/svg+xml;base64,PD94bWwgd，因为它违反了以下内容安全策略指令：

Question

我正在使用 Google 材料设计精简版 https://getmdl.io/ 自行托管的 Identity server 4

在 layout.chtml 我有以下代码

<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 核心中间件

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

问题出在下面一行

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

因为我无法从错误中理解我不能使用内联 css，但我想在某些地方使用内联 css。

错误

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:*".

从网络上可以看到~/lib/mdl/material.min.js已经加载成功了。

我关注但没有帮助的一些链接。

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

Answer 1

img-src 的内容安全策略应该是'self' data:（包括冒号但不包括星号）。