Add Content Security Policy to webviews

[chagong]

Fixes #171

Problem

Issue #171 (filed by the VS Code webview API owner) reported that the extension's webviews do not set a Content Security Policy. After the webview refactor, all webviews wired up a nonce on their <script> tag, but none declared a CSP <meta> tag — so the nonce had no effect and no CSP was enforced.

Change

Added a Content-Security-Policy meta tag to all 8 webviews. Each getHtmlForWebview now reads webview.cspSource and injects:

<meta http-equiv="Content-Security-Policy"
      content="default-src 'none';
               img-src ${cspSource} https: data:;
               script-src 'nonce-${nonce}';
               style-src ${cspSource} 'unsafe-inline';
               font-src ${cspSource} https: data:;">

Policy rationale

• default-src 'none' — deny by default.
• script-src 'nonce-${nonce}' — only the bundled, nonce-tagged script runs. This activates the existing (previously inert) nonce mechanism.
• style-src ${cspSource} 'unsafe-inline' — these React/bundled webviews inject inline <style> tags via style-loader, so 'unsafe-inline' is required (matches the VS Code docs example).
• img-src / font-src allow ${cspSource}, https:, and data: — needed because pages such as the Overview and Extensions Guide load extension icons and remote images.

Webviews updated

Webview	File
Overview	src/overview/index.ts
Help Center / Welcome	src/welcome/index.ts
Extensions Guide	src/ext-guide/index.ts
Beginner Tips	src/beginner-tips/index.ts
Configure Java Runtime	src/java-runtime/index.ts
Install JDK	src/install-jdk/index.ts
Formatter Settings	src/formatter-settings/index.ts
Project Settings	src/project-settings/projectSettingsView.ts

Verification

• npx tsc --noEmit passes with no errors.

Notes

• 'unsafe-inline' for styles is the pragmatic choice given how CSS is currently injected; tightening to nonce/hash-based styles would require build-side changes.
• Recommend a runtime pass opening each webview and checking devtools for CSP violations, in case any page loads a resource from an origin not covered above.

[Copilot]

Pull request overview

This PR addresses Issue #171 by adding a Content Security Policy (CSP) to the extension’s webview HTML, ensuring the existing script nonce mechanism is actually enforced and tightening the default security posture of all webviews.

Changes:

• Injected a Content-Security-Policy <meta http-equiv="..."> tag into each webview HTML template.
• Read and incorporated webview.cspSource into CSP directives to allow extension-hosted resources.
• Standardized CSP directives across 8 webviews (default deny, nonce-restricted scripts, style allowances compatible with current bundling).

Reviewed changes

Copilot reviewed 8 out of 8 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
src/overview/index.ts	Adds CSP meta tag using webviewPanel.webview.cspSource and existing nonce.
src/welcome/index.ts	Adds CSP meta tag using webviewPanel.webview.cspSource and existing nonce.
src/ext-guide/index.ts	Adds CSP meta tag using webviewPanel.webview.cspSource and existing nonce.
src/beginner-tips/index.ts	Adds CSP meta tag using this._panel!.webview.cspSource and existing nonce.
src/java-runtime/index.ts	Adds CSP meta tag using webviewPanel.webview.cspSource and existing nonce.
src/install-jdk/index.ts	Adds CSP meta tag using this._panel!.webview.cspSource and existing nonce.
src/formatter-settings/index.ts	Adds CSP meta tag using this.webviewPanel!.webview.cspSource and existing nonce.
src/project-settings/projectSettingsView.ts	Adds CSP meta tag using webview.cspSource and existing nonce.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.