Odd CSP error in Stage/Prod, but no error in Dev

Help Requests
1

So all of a sudden my new CLI bundler project rework has stopped working when built for stage and prod.
I am getting Content-Policy-Errors for styles…Any idea what would generate that?
Beta.13

Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-P+c8ECBvv52v/qARPiHHM3YQaxqw+XMjE5ZERD4djJk='), or a nonce ('nonce-...') is required to enable inline execution.

Additional info
I have added to my ASP.NET Core app startup the CSP headers.
Here is what I see in Chrome headers:

Content-Security-Policy: script-src 'self';style-src 'self'
2

do you have style interpolation instead of css in your app?

3

Hi @bigopon,
So I am reading that as using the aurelia css attribute tag for adding computed style properties and I do only use css=""

I did however find one instance in ckeditor that used style instead that is in a included .js file.

I will also add I have the original app using webpack, that builds and runs fine in all environments that has all the same css/styles (including that ckeditor file.)

4

So I set reportonly and here is a sample list of the errors being reported by CSP

I should note Chrome did update yesterday as well.

The Content Security Policy 'default-src 'none'' was delivered in report-only mode, but does not specify a 'report-uri'; the policy will have no effect. Please either add a 'report-uri' directive, or deliver the policy via the 'Content-Security-Policy' header.
Navigated to https://xcelltest.azurewebsites.net/
xcelltest.azurewebsites.net/:8 [Report Only] Refused to load the stylesheet 'https://xcelltest.azurewebsites.net/sw.css' because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'style-src-elem' was not explicitly set, so 'default-src' is used as a fallback.

xcelltest.azurewebsites.net/:13 [Report Only] Refused to apply inline style because it violates the following Content Security Policy directive: "default-src 'none'". Either the 'unsafe-inline' keyword, a hash ('sha256-P+c8ECBvv52v/qARPiHHM3YQaxqw+XMjE5ZERD4djJk='), 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.

xcelltest.azurewebsites.net/:1 [Report Only] Refused to load the script 'https://xcelltest.azurewebsites.net/scripts/vendor-bundle.js' because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'script-src-elem' was not explicitly set, so 'default-src' is used as a fallback.

(index):18 [Report Only] Refused to execute inline script because it violates the following Content Security Policy directive: "default-src 'none'". Either the 'unsafe-inline' keyword, a hash ('sha256-kG4VawP32UwgFkvvdelFyfMvHoZ/cY96EwHUL44XMWk='), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'script-src' was not explicitly set, so 'default-src' is used as a fallback.

(index):41 [Report Only] Refused to create a worker from 'https://xcelltest.azurewebsites.net/sw.js' because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'worker-src' was not explicitly set, so 'default-src' is used as a fallback.

(anonymous) @ (index):41
alameda.js:730 [Report Only] Refused to load the script 'https://xcelltest.azurewebsites.net/scripts/app-bundle.js' because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'script-src-elem' was not explicitly set, so 'default-src' is used as a fallback.

a @ alameda.js:730
i @ alameda.js:781
L @ alameda.js:588
(anonymous) @ alameda.js:1079
n @ alameda.js:1061
(anonymous) @ alameda.js:363
Promise.then (async)
i @ alameda.js:359
(anonymous) @ aurelia-loader-default.js:165
f.loadModule @ aurelia-loader-default.js:164
p @ aurelia-bootstrapper.js:133
(anonymous) @ aurelia-bootstrapper.js:169
Promise.then (async)
g @ aurelia-bootstrapper.js:168
(anonymous) @ aurelia-bootstrapper.js:155
Promise.then (async)
m @ aurelia-bootstrapper.js:150
(anonymous) @ aurelia-bootstrapper.js:175
e @ alameda.js:1233
M @ alameda.js:493
I @ alameda.js:526
(anonymous) @ alameda.js:589
Promise.then (async)
L @ alameda.js:588
(anonymous) @ alameda.js:1079
n @ alameda.js:1061
i @ alameda.js:746
L @ alameda.js:588
(anonymous) @ alameda.js:1079
n @ alameda.js:1061
i @ alameda.js:746
L @ alameda.js:588
(anonymous) @ alameda.js:1079
n @ alameda.js:1061
(anonymous) @ alameda.js:363
Promise.then (async)
i @ alameda.js:359
(anonymous) @ alameda.js:1296
(anonymous) @ alameda.js:10
(index):96 SW Run Update
aurelia-pal-browser.js:545 [Report Only] Refused to apply inline style because it violates the following Content Security Policy directive: "default-src 'none'". Either the 'unsafe-inline' keyword, a hash ('sha256-ATeSIcqM6UxTblzmyyICgZWZUpvkDFfJxeK3WjeUN90='), 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.

e @ aurelia-pal-browser.js:545
s @ aurelia-hide-style.js:17
R @ aurelia-templating-resources.js:73
(anonymous) @ aurelia-framework.js:303
aurelia-pal-browser.js:545 [Report Only] Refused to apply inline style because it violates the following Content Security Policy directive: "default-src 'none'". Either the 'unsafe-inline' keyword, a hash ('sha256-Kpx4OpmZL3SfwpnegX50PgvKwcfm5ifUMhfHPiYdLzQ='), 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.

e @ aurelia-pal-browser.js:545
_apply @ aurelia-dialog.js:262
t @ aurelia-dialog.js:257
O @ aurelia-dialog.js:532
(anonymous) @ aurelia-framework.js:303
aurelia-logging-console.js:31 INFO [aurelia] Aurelia Started
aurelia-pal-browser.js:545 [Report Only] Refused to apply inline style because it violates the following Content Security Policy directive: "default-src 'none'". Either the 'unsafe-inline' keyword, a hash ('sha256-bXazH1RpUtK7DbDkp83M6gNoWs0snuo+SS+lMtgI/kc='), 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.

e @ aurelia-pal-browser.js:545
(anonymous) @ css-resource.js:71
aurelia-pal-browser.js:545 [Report Only] Refused to apply inline style because it violates the following Content Security Policy directive: "default-src 'none'". Either the 'unsafe-inline' keyword, a hash ('sha256-He3QEBKoL/nMXlVsoM7S2C2kjFQqS5L+mgA+F8LpG+U='), 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.

e @ aurelia-pal-browser.js:545
(anonymous) @ css-resource.js:71
aurelia-pal-browser.js:545 [Report Only] Refused to apply inline style because it violates the following Content Security Policy directive: "default-src 'none'". Either the 'unsafe-inline' keyword, a hash ('sha256-SChiM+ohTlme5dwq/TZx6zq9uT0et1o0rcEtuyJe1+w='), 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.

e @ aurelia-pal-browser.js:545
(anonymous) @ css-resource.js:71
aurelia-pal-browser.js:545 [Report Only] Refused to apply inline style because it violates the following Content Security Policy directive: "default-src 'none'". Either the 'unsafe-inline' keyword, a hash ('sha256-5U3z9K3P17cKgGYxXQA5rBZO5EDju+lgtXG6oDXNbNY='), 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.

e @ aurelia-pal-browser.js:545
(anonymous) @ css-resource.js:71
aurelia-pal-browser.js:432 [Report Only] Refused to load the image 'https://xcelltest.azurewebsites.net/img/loading.svg' because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.

e @ aurelia-pal-browser.js:432
e @ aurelia-templating.js:2774
(anonymous) @ aurelia-templating.js:3517
Promise.then (async)
(anonymous) @ aurelia-templating.js:3510
Promise.then (async)
e @ aurelia-templating.js:3492
e @ aurelia-templating.js:596
e @ aurelia-templating.js:4274
e @ aurelia-templating.js:3294
e @ aurelia-templating.js:3236
(anonymous) @ aurelia-templating.js:3623
Promise.then (async)
e @ aurelia-templating.js:3592
t @ aurelia-templating.js:3562
(anonymous) @ aurelia-templating.js:3510
Promise.then (async)
e @ aurelia-templating.js:3492
e @ aurelia-templating.js:596
e @ aurelia-templating.js:4274
(anonymous) @ aurelia-templating.js:4883
Promise.then (async)
e @ aurelia-templating.js:4871
e @ aurelia-templating.js:4843
e @ aurelia-templating.js:4945
e @ aurelia-templating.js:5210
e @ aurelia-framework.js:215
(anonymous) @ main.ts:58
Promise.then (async)
l @ main.ts:58
(anonymous) @ aurelia-bootstrapper.js:138
Promise.then (async)
p @ aurelia-bootstrapper.js:133
(anonymous) @ aurelia-bootstrapper.js:169
Promise.then (async)
g @ aurelia-bootstrapper.js:168
(anonymous) @ aurelia-bootstrapper.js:155
Promise.then (async)
m @ aurelia-bootstrapper.js:150
(anonymous) @ aurelia-bootstrapper.js:175
e @ alameda.js:1233
M @ alameda.js:493
I @ alameda.js:526
(anonymous) @ alameda.js:589
Promise.then (async)
L @ alameda.js:588
(anonymous) @ alameda.js:1079
n @ alameda.js:1061
i @ alameda.js:746
L @ alameda.js:588
(anonymous) @ alameda.js:1079
n @ alameda.js:1061
i @ alameda.js:746
L @ alameda.js:588
(anonymous) @ alameda.js:1079
n @ alameda.js:1061
(anonymous) @ alameda.js:363
Promise.then (async)
i @ alameda.js:359
(anonymous) @ alameda.js:1296
(anonymous) @ alameda.js:10
aurelia-templating.js:2658 [Report Only] Refused to load the image 'https://xcelltest.azurewebsites.net/img/loading.svg' because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.

e @ aurelia-templating.js:2658
e @ aurelia-templating.js:4389
qe @ aurelia-templating.js:2468
e @ aurelia-templating.js:2689
e @ aurelia-templating.js:4389
(anonymous) @ aurelia-templating.js:4885
Promise.then (async)
e @ aurelia-templating.js:4884
e @ aurelia-templating.js:4843
e @ aurelia-templating.js:4945
e @ aurelia-templating.js:5210
e @ aurelia-framework.js:215
(anonymous) @ main.ts:58
Promise.then (async)
l @ main.ts:58
(anonymous) @ aurelia-bootstrapper.js:138
Promise.then (async)
p @ aurelia-bootstrapper.js:133
(anonymous) @ aurelia-bootstrapper.js:169
Promise.then (async)
g @ aurelia-bootstrapper.js:168
(anonymous) @ aurelia-bootstrapper.js:155
Promise.then (async)
m @ aurelia-bootstrapper.js:150
(anonymous) @ aurelia-bootstrapper.js:175
e @ alameda.js:1233
M @ alameda.js:493
I @ alameda.js:526
(anonymous) @ alameda.js:589
Promise.then (async)
L @ alameda.js:588
(anonymous) @ alameda.js:1079
n @ alameda.js:1061
i @ alameda.js:746
L @ alameda.js:588
(anonymous) @ alameda.js:1079
n @ alameda.js:1061
i @ alameda.js:746
L @ alameda.js:588
(anonymous) @ alameda.js:1079
n @ alameda.js:1061
(anonymous) @ alameda.js:363
Promise.then (async)
i @ alameda.js:359
(anonymous) @ alameda.js:1296
(anonymous) @ alameda.js:10
aurelia-pal-browser.js:545 [Report Only] Refused to apply inline style because it violates the following Content Security Policy directive: "default-src 'none'". Either the 'unsafe-inline' keyword, a hash ('sha256-ATeSIcqM6UxTblzmyyICgZWZUpvkDFfJxeK3WjeUN90='), 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.

e @ aurelia-pal-browser.js:545
a @ aurelia-hide-style.js:23
e @ show.js:34
e @ aurelia-templating.js:3682
e @ aurelia-templating.js:1669
e @ aurelia-templating.js:4442
qe @ aurelia-templating.js:2468
e @ aurelia-templating.js:2689
e @ aurelia-templating.js:4389
(anonymous) @ aurelia-templating.js:4885
connection-service.ts:41 onlineCheck
9[Report Only] Refused to connect to '<URL>' because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback.

aurelia-pal-browser.js:545 [Report Only] Refused to apply inline style because it violates the following Content Security Policy directive: "default-src 'none'". Either the 'unsafe-inline' keyword, a hash ('sha256-wftA4D2pcUBM+mtHoSvVfUBkoJbrmZXsVH5U1QJE2uo='), 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.

e @ aurelia-pal-browser.js:545
(anonymous) @ css-resource.js:71
aurelia-templating.js:1771 [Report Only] Refused to apply inline style because it violates the following Content Security Policy directive: "default-src 'none'". Either the 'unsafe-inline' keyword, a hash ('sha256-kfeD8uY84k73NKhC+UyxTJ7AGbNV2OXgOo4elUpDSn0='), 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.

e @ aurelia-templating.js:1771
e @ aurelia-templating.js:1965
(anonymous) @ aurelia-templating.js:4828
(index):1 [Report Only] Refused to load the font 'https://xcelltest.azurewebsites.net/font-awesome/fonts/fontawesome-webfont.woff2?v=4.7.0' because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'font-src' was not explicitly set, so 'default-src' is used as a fallback.

(index):1 [Report Only] Refused to load the font 'https://xcelltest.azurewebsites.net/font-awesome/fonts/fontawesome-webfont.woff?v=4.7.0' because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'font-src' was not explicitly set, so 'default-src' is used as a fallback.

(index):1 [Report Only] Refused to load the font 'https://xcelltest.azurewebsites.net/font-awesome/fonts/fontawesome-webfont.ttf?v=4.7.0' because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'font-src' was not explicitly set, so 'default-src' is used as a fallback.

(index):1 [Report Only] Refused to load the image 'data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(255, 255, 255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e' because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.

connection-service.ts:26 onlineChangeAction
aurelia-binding.js:3712 [Report Only] Refused to apply inline style because it violates the following Content Security Policy directive: "default-src 'none'". Either the 'unsafe-inline' keyword, a hash ('sha256-elwtDI8Uk7M5JQ1zgkQNrJlpEnQ8yEATD2CGKFuobPg='), 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.

e @ aurelia-binding.js:3712
e @ aurelia-binding.js:4966
e @ aurelia-binding.js:5024
e @ aurelia-templating.js:1700
e @ repeat.js:262
e @ array-repeat-strategy.js:113
e @ array-repeat-strategy.js:37
e @ repeat.js:152
e @ aurelia-templating.js:4007
e @ aurelia-templating.js:3868
e @ aurelia-templating.js:3848
t.set @ aurelia-templating.js:3962
e @ aurelia-binding.js:3712
e @ aurelia-binding.js:4966
e @ aurelia-binding.js:4981
me @ aurelia-binding.js:363
e @ aurelia-binding.js:3785
e @ aurelia-task-queue.js:96
e @ aurelia-task-queue.js:147
(anonymous) @ aurelia-task-queue.js:72
aurelia-binding.js:3712 [Report Only] Refused to apply inline style because it violates the following Content Security Policy directive: "default-src 'none'". Either the 'unsafe-inline' keyword, a hash ('sha256-ZQkHcqqjcMzd8htWhI9bvHZL4RmSqa0BFD7YBMqFxA4='), 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.

e @ aurelia-binding.js:3712
e @ aurelia-binding.js:4966
e @ aurelia-binding.js:5024
e @ aurelia-templating.js:1700
e @ repeat.js:262
e @ array-repeat-strategy.js:113
e @ array-repeat-strategy.js:37
e @ repeat.js:152
e @ aurelia-templating.js:4007
e @ aurelia-templating.js:3868
e @ aurelia-templating.js:3848
t.set @ aurelia-templating.js:3962
e @ aurelia-binding.js:3712
e @ aurelia-binding.js:4966
e @ aurelia-binding.js:4981
me @ aurelia-binding.js:363
e @ aurelia-binding.js:3785
e @ aurelia-task-queue.js:96
e @ aurelia-task-queue.js:147
(anonymous) @ aurelia-task-queue.js:72
(index):1 [Report Only] Refused to load the image 'https://xcelltest.azurewebsites.net/favicon.ico' because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.```
5

So been trying a few things.
I used the ASP.NET Core nuget package noted in this blog for setting up the header information:
https://joonasw.net/view/csp-in-aspnet-core

I added this to the startup and it cleared the errors and let the site load, however its not a good final solution I don’t think with the AllowUnsafeInline.

csp.AllowStyles .FromSelf();
csp.AllowStyles.AllowUnsafeInline();
6

So I have discovered how use the base CLI generated template to get this to recreate.

au new
csp-test
custom
3
2
3
3
2
2
1
2
1
1

Basically, moving the files into a ‘dist’ folder triggers the CSP errors as noted in the link below:

7

Since I could reproduce this using a plain vanilla CLI generated project I opened an issue here:

9

The current open issue was closed, as the reproduction of the error was flawed due to an error on my part.

Still looking at this, again, changing the webapp to set the CSP header to allow unsafe-inline does work, but seems to be fixing a symptom and not the cause unless webpack does something different.