Skip to content

[Validation] A new Blazor Web App under a strict Content Security Policy #68486

Description

@oroztocil

Scenario contact: @javiercn

Scenario

Organisations with security requirements often have to apply a strict Content Security Policy that forbids scripts written directly into the page. A brand new app used to trip over that on its own navigation menu, so the very first thing such a team did was work around the template. This validates that an app created from the template works under a strict policy without that concession, and that its navigation menu still behaves.

Minimum build

.NET 11 Preview 7 or later.

Configurations to cover

  • Blazor Web App
    • Static SSR
    • Interactive Server
    • Interactive WebAssembly
    • Interactive Auto
  • Standalone WebAssembly
  • Hybrid (MAUI)

Also exercise

  • Published output
  • An existing .NET 10 app upgraded to .NET 11
  • Trimming or ahead-of-time compilation
  • More than one server instance, or a proxy in front
  • Hot Reload
  • An IDE as well as the command line
  • Container

Setup

Nothing beyond the shared instructions, but you will be adding a strict Content Security Policy to the app yourself as part of the exercise.

What to build

Create an app from the template with the sample content included, and confirm it works as it stands. Then apply a strict Content Security Policy that forbids scripts embedded in the page, without granting any exception for the app's own inline scripts, and without unsafe-inline or unsafe-hashes in script-src. Then use the app on a narrow window or a phone-sized viewport, where the navigation menu collapses and has to be opened and closed.

Things to try

  • Using the app before applying the policy, so you know what correct looks like.
  • Applying the policy and reloading, watching the browser console for anything the policy blocked.
  • Starting in report-only mode to collect violations without breaking the app, then switching to enforcing.
  • Narrowing the window until the navigation menu collapses, then opening and closing it.
  • Opening the menu and choosing a page from it.
  • Opening the menu, then tapping outside it.
  • Moving between pages and then using the menu again, without a full reload.
  • Resizing the window back and forth across the point where the menu collapses.

Expected behavior

The app runs under a strict policy that forbids scripts embedded in the page, and the browser console reports nothing blocked. The navigation menu opens, closes and navigates on narrow viewports exactly as it does without the policy, including after moving between pages. Nothing in the template requires a per-app exception to be added to the policy for its own scripts.

Must hold

  • With the policy applied and no exception granted for inline scripts, the browser console reports nothing blocked.
  • On a narrow viewport the navigation menu opens, closes, and navigates to a chosen page.
  • The menu still works after moving between pages without a full reload.
  • Nothing in the template requires a per-app inline script exception to be added to the policy.

Expected differences between configurations

  • No differences are expected.

Documentation to use

The new behavior is built into the project template, so there is no .NET 11 documentation to follow for the feature itself. These are references for writing and checking the policy.

What to report

Report results using the format described in the validation testing manual. Include link to a repository with the test app.

Metadata

Metadata

Labels

ValidationThis issue is used to track validation effortsarea-blazorIncludes: Blazor, Razor Componentsvalidation-scenarioThis issue describes a validation testing scenario

Type

No type

Projects

No projects

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions