Question

运行应用程序时出现以下错误

拒绝应用内联样式，因为它违反了以下内容安全策略指令：“ style-src'self'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/'sha256-47DEQpj8HBSa + / TImW + 5JCeuQeRkm5NMpJWZG3hSuFU =''sha256-5uIP + HBVRu0WW8ep6d6 + YVfhgbs ”。要启用内联执行，要么使用哈希（'sha256-4Su6mBWzEIFnH4pAGMOuaeBrstwJN4Z3pq / s1Kn4 / KQ ='），要么使用随机数（nonce（... nonce -...））。

下面是我当前正在使用的代码

const string modernizrHash1 = "sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU=";
            const string modernizrHash2 = "sha256-5uIP+HBVRu0WW8ep6d6+YVfhgkl0AcIabZrBS5JJAzs=";
            app.UseCsp(options => options
                .DefaultSources(s => s.Self())
                .ScriptSources(s => s.Self().CustomSources("https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/"))
                .StyleSources(s => s.Self().CustomSources("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/", modernizrHash1, modernizrHash2))
                .FontSources(s => s.Self().CustomSources("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/"))
                .ImageSources(s => s.Self().CustomSources("data:"))
            );

Answer 1

您会收到此错误，因为根据您的内容安全策略和返回的错误，不允许使用内联样式（可以散列到sha256-4Su6mBWzEIFnH4pAGMOuaeBrstwJN4Z3pq/s1Kn4/KQ=）。

我建议两个可能的步骤，或者：

远离内联样式（因为它们可能是不安全的），并且每次内联样式发生更改时都将要求您更改CSP。
将提供的SHA添加到CSP的StyleSources中。但是请注意，必须为应用程序中所有页面上添加的每种内联样式维护和更新此样式。

根据答案下方的评论进行更新

注意：当我在IE浏览器中运行它时，没有任何问题，只有在chrome和firefox中，我遇到了问题

看看Can I Use，表明IE仅对内容安全策略提供了部分支持，这可以解释为什么您在控制台中没有看到此错误。即Internet Explorer不支持CSP，因此未应用它。

我已通过更改浏览器控制台错误中显示的哈希键解决了该问题，已将控制台错误哈希键替换为我的代码哈希键，但不确定这是否是永久解决方案

这并不是一个永久的解决方案。如果（和何时）内联样式发生更改，则必须更改CSP中的哈希值才能再次应用样式。

哪个引导我进入：

能否请您指导我如何生成哈希键以及如何永久解决此问题

查看原始问题中的代码：

const string modernizrHash1 = "sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU=";
const string modernizrHash2 = "sha256-5uIP+HBVRu0WW8ep6d6+YVfhgkl0AcIabZrBS5JJAzs=";
// other things
.StyleSources(s => s.Self().CustomSources("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/", modernizrHash1, modernizrHash2))

您正在告诉浏览器（通过生成的内容安全策略）仅允许从以下位置加载样式：

自己（您网站的原始域）
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/

以及与以下散列匹配的那些：

sha256-47DEQpj8HBSa + / TImW + 5JCeuQeRkm5NMpJWZG3hSuFU =
sha256-5uIP + HBVRu0WW8ep6d6 + YVfhgkl0AcIabZrBS5JJAzs =

您提到您还包含了哈希：

sha256-4Su6mBWzEIFnH4pAGMOuaeBrstwJN4Z3pq / s1Kn4 / KQ =

浏览器开始呈现页面时，它将查看该页面呈现所需的资源，并将其与内容安全策略中的列表进行比较。如果列表中没有资源（将内联样式和内联javascript分类为资源），则浏览器将对资源内容进行简单的SHA-2并将其与列表中列出的任何哈希值进行比较CSP。

注意：使用nonce

可以实现相同的目的

如果该资源不是来自允许的资源，或者其哈希值与CSP中列出的哈希值不匹配，则浏览器将主动拒绝该资源。

因为SHA-2算法使用资源的内容生成哈希，所以当它的内容更改时，哈希的计算值将有所不同。

例如，此处的内联样式：

<p style="color: red;">hello, world</p>

可能哈希到F1FF77E5DDBB1AF52EB51C98F725927143221549385937595112128987CF39E4（即“红色：红色”的哈希）

以下内联样式：

<p style="color: green;">hello, world</p>

可能必须使用2F262B22412B633D12B27FA9F94A3B0495821CB8341CFF0A88C80E3FED5DC9E8（即“颜色：绿色”的哈希值）

如您所见，哈希样式存在巨大差异。这是设计使然（在算法中）。

要停止缓解此问题，我将内联样式替换为css文件，以描述应如何设置页面内容的样式。只要css文件是从与HTML相同的来源提供的，那么self规则将覆盖该文件。

CSP是一个非常复杂的主题，需要学习（但是一旦掌握了基础知识，就很容易掌握）。我建议您查看MDN page for Content Security Policy，以获取有关其工作方式以及如何使用它保护Web应用程序安全的更多信息。

收到“拒绝应用内联样式，因为它违反了以下内容安全策略”错误

1 个答案: