Remove inline JS event handler from NavMenu component in Blazor Web App template

[Copilot]

Fixes #XXXXX

This PR removes the inline JavaScript event handler from the NavMenu component in the Blazor Web App project template and replaces it with a proper ES6 module approach to improve Content Security Policy (CSP) compliance.

Problem

The current NavMenu component contains an inline onclick attribute:

<div class="nav-scrollable" onclick="document.querySelector('.navbar-toggler').click()">

This inline event handler requires CSP configurations to include 'unsafe-hashes' with a specific SHA-256 hash, which goes against web security best practices. The HTML specification discourages this approach as it can lead to security vulnerabilities.

Solution

• Created NavMenu.razor.js: Added an ES6 module that properly attaches a click event listener to the navigation scrollable area
• Updated NavMenu.razor:
  • Added script module reference: <script type="module" src="@Assets["Components/Layout/NavMenu.razor.js"]"></script>
  • Added ID to target element: <div id="nav-scrollable" class="nav-scrollable">
  • Removed problematic inline onclick attribute

The JavaScript module code:

// Handle navigation menu toggle
const navScrollable = document.getElementById("nav-scrollable");
const navToggler = document.querySelector(".navbar-toggler");

if (navScrollable && navToggler) {
    navScrollable.addEventListener("click", function() {
        navToggler.click();
    });
}

Benefits

• Enhanced Security: Eliminates the need for 'unsafe-hashes' in CSP configurations
• Best Practices: Follows modern web development standards by separating JavaScript from HTML
• Consistency: Matches the pattern already used by other components like ReconnectModal.razor.js and PasskeySubmit.razor.js
• Maintainability: JavaScript logic is now in a dedicated module file

Testing

Verified that the navigation toggle functionality works correctly in both desktop and mobile responsive views. The hamburger menu opens and closes the navigation as expected, maintaining full backward compatibility.

Desktop view showing full navigation: 

Mobile view with hamburger menu:

Mobile view with navigation expanded:

Impact

This change will help developers implement proper Content Security Policies without needing to accommodate inline event handlers, improving the overall security posture of Blazor Web applications created from the template.

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Remove the inline JS event handler in the NavMenu component?</issue_title>
<issue_description>### Is there an existing issue for this?

• I have searched the existing issues

Is your feature request related to a problem? Please describe the problem.

cc: @danroth27 ... IIRC, we chatted about this a few months back. I'm working on CSP guidance updates, and I'm going to add some guidance on it because it 💥 for a CSP that doesn't address it with the most recent templates.

The NavMenu has ...

<div ... onclick="document.querySelector('.navbar-toggler').click()">

Cross-ref: https://github.com/dotnet/aspnetcore/blob/main/src/ProjectTemplates/Web.ProjectTemplates/content/BlazorWeb-CSharp/BlazorWeb-CSharp/Components/Layout/NavMenu.razor#L15

... and it's only in the BWA project template, not the Blazor WebAssembly template.

This will require me to include CSP guidance with ...

'unsafe-hashes' 'sha256-qnHnQs7NjQNHHNYv/I9cW+I62HzDJjbnyS/OFzqlix0='

The HTML spec remarks seem to be saying, 'Don't do it!' 😄 Not so much for the exact example that they give (<a onclick="transferAllMyMoney()">Transfer</a> ... <script>transferAllMyMoney()</script>), but just because it implies that it might be ok to take the approach generally.

I don't see an open issue to consider removing it.

Describe the solution you'd like

Get rid of the inline event handler, which would mirror spec guidance and allow us to drop our CSP guidance on it.

Additional context

No response</issue_description>

<agent_instructions>https://github.com/dotnet/aspnetcore/blob/main/src/ProjectTemplates/Web.ProjectTemplates/content/BlazorWeb-CSharp/BlazorWebCSharp.1/Components/Layout/NavMenu.razor#L15

Add a NavMenu.razor.js (it will be an ES6 module).

Add the script in NavMenu.razor and have it find the element and attach a click event handler. You can give the element an ID if necessary to make it easy to find</agent_instructions>

Comments on the Issue (you are @copilot in this section)

Fixes #61075

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[javiercn]

Can you check the different template configurations to make sure we are only adding this when needed? I imagine it'll be something in .templates.json.