获取“拒绝应用内联样式，因为它违反了以下内容安全策略”错误 [英] Getting “refused to apply inline style because it violates the following content security policy” error

问题描述

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



拒绝应用内联样式，因为它违反了以下内容安全策略指令：style-src'self 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/'sha256-47DEQpj8HBSa + / TImW + 5JCeuQeRkm5NMpJWZG3hSuFU =''sha256-5uIP + HBVRu0WW8ep6d6 + YVfhgkl0AcIabZrBS5JJAzs ='。可以使用'unsafe-inline'关键字，散列（'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：））
 ）; 

解决方案

看起来这可能是Modernizr不与网站Content-Security-Policy相处。在我看来，你不是唯一一个遇到这个问题的人：



Modernizr导致内容安全策略（CSP）违规错误·问题＃1450·Modernizr / Modernizr·GitHub [ ^ ]



可能的解决方法

内容安全政策限制由termi解决方案·Pull Request＃1263·Modernizr / Modernizr·GitHub [ ^ ]



更多关于CSP

内容安全策略（CSP） - HTTP | MDN [ ^ ]

Quote：

'unsafe-inline'关键字，一个哈希值（'sha256-4Su6mBWzEIFnH4pAGMOuaeBrstwJN4Z3pq / s1Kn4 / KQ ='）或nonce（'nonce -...'）是启用内联执行所必需的。

您添加到CSP的两个哈希值都不符合您尝试加载的内联< style> 内容。



为内联样式表生成一个哈希值，并将其添加到您的CSP中。



报告URI：CSP哈希生成器 [ ^ ]

I am getting the below error while running the application

Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/ 'sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU=' 'sha256-5uIP+HBVRu0WW8ep6d6+YVfhgkl0AcIabZrBS5JJAzs='". Either the 'unsafe-inline' keyword, a hash ('sha256-4Su6mBWzEIFnH4pAGMOuaeBrstwJN4Z3pq/s1Kn4/KQ='), or a nonce ('nonce-...') is required to enable inline execution.

Below is the code currently I am using

What I have tried:

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:"))
);

解决方案

It looks like this may be Modernizr not getting along with the sites Content-Security-Policy. Seems to me that you are not the only one experiencing this:

Modernizr Causes Content Security Policy (CSP) Violation Errors · Issue #1450 · Modernizr/Modernizr · GitHub[^]

Possible workaround
Content Security Policy restrictions workaround by termi · Pull Request #1263 · Modernizr/Modernizr · GitHub[^]

More on CSP
Content Security Policy (CSP) - HTTP | MDN[^]

Quote:

Either the 'unsafe-inline' keyword, a hash ('sha256-4Su6mBWzEIFnH4pAGMOuaeBrstwJN4Z3pq/s1Kn4/KQ='), or a nonce ('nonce-...') is required to enable inline execution.

Neither of the two hashes you've added to your CSP match the inline <style> content you're trying to load.

Generate a hash for the inline stylesheet, and add it to your CSP.

Report URI: CSP Hash Generator[^]

这篇关于获取“拒绝应用内联样式，因为它违反了以下内容安全策略”错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！