Skip to content

Modern theme using "swiper.js" font causes "Content Security Policy" violation #655

@TheFlo

Description

@TheFlo

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions