Hi GrandNode team,
In Modern theme, on branch 2.3.x, the "swiper.js" library uses a css class to load a font from a base64 string:
@font-face {
font-family: swiper-icons;
src: url("data:application/font-woff;charset=utf-8;base64, <base64-font-value>") format("woff");
font-weight: 400;
font-style: normal
}
When applying UseDefaultSecurityHeaders: true in appsettings.json:
//This settings adds the following headers to all responses that pass
//X-Content-Type-Options: nosniff
//Strict-Transport-Security: max-age=31536000; includeSubDomains
//X-Frame-Options: Deny
//X-XSS-Protection: 1; mode=block
//Referrer-Policy: strict-origin-when-cross-origin
//Content-Security-Policy: object-src 'none'; form-action 'self'; frame-ancestors 'none'
"UseDefaultSecurityHeaders": true,
We get this error in the browser (tested with Edge 145.0.3800.97) :
Loading the font 'data:application/font-woff;charset=utf-8;base64, <base64-font-value>' violates the following Content Security Policy directive: "font-src *". Note that '*' matches only URLs with network schemes ('http', 'https', 'ws', 'wss'), or URLs whose scheme matches `self`'s scheme. The scheme 'data:' must be added explicitly. The action has been blocked.
Seems that there need to add Data() to builder.AddFontSrc().From("*") in UseDefaultSecurityHeaders method in Grand.Web.Common/Infrastructure/ApplicationBuilderExtensions.cs to fix the issue.
/// <summary>
/// Configures the default security headers for your application.
/// </summary>
/// <param name="application">Builder for configuring an application's request pipeline</param>
public static void UseDefaultSecurityHeaders(this WebApplication application)
{
var policyCollection = new HeaderPolicyCollection()
// [...]
.AddContentSecurityPolicy(builder =>
{
builder.AddUpgradeInsecureRequests();
builder.AddDefaultSrc().Self();
builder.AddConnectSrc().From("*");
// add "Data()" ?
builder.AddFontSrc().From("*").Data();
// [...]
})
}
Do you see a better solution in order to fix this issue ?
Kind regards