Added Content-Security-Policy meta tags to webviews

tsmaeder · fbricon · commit 061cd2ae99d7 · 2025-10-03T19:27:51.000+02:00
Signed-off-by: Thomas Mäder &lt;t.s.maeder@gmail.com&gt;
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -2024,7 +2024,7 @@
     "mocha": "^11.1.0",
     "request": "^2.88.2",
     "sinon": "^14.0.0",
-    "style-loader": "^3.3.1",
+    "mini-css-extract-plugin": "^2.9.4",
     "ts-loader": "^9.4.2",
     "typescript": "^4.6.4",
     "webpack": "^5.94.0",
diff --git a/src/dashboard/dashboard.ts b/src/dashboard/dashboard.ts
@@ -110,27 +110,23 @@ class DashboardPanel {
 	}
 
 	private getWebviewContent(): string {
-		const scriptUri = getUri(this.webView, this.context.extensionUri, [
-			"dist",
-			"dashboard.js",
-		]);
-
-		const nonce = getNonce();
-		const codiconsUri = this.webView.asWebviewUri(vscode.Uri.joinPath(this.context.extensionUri, 'node_modules', '@vscode/codicons', 'dist', 'codicon.css'));
+		const scriptUri = getUri(this.webView, this.context.extensionUri, "dist", "dashboard.js");
+		const styleUri = getUri(this.webView, this.context.extensionUri, "dist", "dashboard.css");
 
 		return /* html*/ `
 	  <!DOCTYPE html>
 	  <html lang="en">
 		<head>
 		  <meta charset="utf-8">
+		  <meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src ${this.webView.cspSource}; font-src ${this.webView.cspSource} data:; style-src ${this.webView.cspSource};">
 		  <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
 		  <meta name="theme-color" content="#000000">
-		  <link href="${codiconsUri}" rel="stylesheet" />
 		  <title>Dashboard</title>
+		  <link href="${styleUri}" rel="stylesheet">
 		</head>
 		<body>
 		  <div id="root"></div>
-		  <script nonce="${nonce}" src="${scriptUri}"></script>
+		  <script src="${scriptUri}"></script>
 		</body>
 	  </html>
 	`;
diff --git a/src/refactoring/changeSignaturePanel.ts b/src/refactoring/changeSignaturePanel.ts
@@ -108,26 +108,24 @@ export class ChangeSignaturePanel {
 	}
 
 	private getWebviewContent(webview: Webview, extensionUri: Uri) {
-
-		const scriptUri = getUri(webview, extensionUri, [
-			"dist",
-			"changeSignature.js",
-		]);
-
-		const nonce = getNonce();
+		const scriptUri = getUri(webview, extensionUri, "dist", "changeSignature.js");
+		const styleUri = getUri(webview, extensionUri, "dist", "changeSignature.css");
 
 		return /* html*/ `
       <!DOCTYPE html>
       <html lang="en">
         <head>
           <meta charset="utf-8">
+		  <!-- We need the 'unsafe-inline' because of webview UI toolkit setting style attributes -->
+		  <meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src ${webview.cspSource}; font-src ${webview.cspSource} data:; style-src ${webview.cspSource} 'unsafe-inline';">
           <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
           <meta name="theme-color" content="#000000">
           <title>Change Signature</title>
+		  <link rel = "stylesheet" href="${styleUri}">
         </head>
         <body>
           <div id="root"></div>
-          <script nonce="${nonce}" src="${scriptUri}"></script>
+          <script src="${scriptUri}"></script>
         </body>
       </html>
     `;
diff --git a/src/webview/dashboard/dashboard.css b/src/webview/dashboard/dashboard.css
@@ -1,3 +1,5 @@
+@import "../../../node_modules/@vscode/codicons/dist/codicon.css";
+
 .toolbar {
     margin: 8px;
 	width: 100%;
diff --git a/src/webviewUtils.ts b/src/webviewUtils.ts
@@ -1,6 +1,6 @@
 import { Uri, Webview } from "vscode";
 
-export function getUri(webview: Webview, extensionUri: Uri, pathList: string[]) {
+export function getUri(webview: Webview, extensionUri: Uri, ...pathList: string[]) {
     return webview.asWebviewUri(Uri.joinPath(extensionUri, ...pathList));
 }
 
diff --git a/webpack.config.js b/webpack.config.js
@@ -53,6 +53,8 @@ const config = {
 	},
 }
 
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+
 const configChangeSignature = {
 	name: 'changeSignature',
 	mode: 'none',
@@ -70,7 +72,7 @@ const configChangeSignature = {
 		}, {
 			test: /\.(css)$/,
 			use: [{
-				loader: 'style-loader'
+				loader: MiniCssExtractPlugin.loader,
 			}, {
 				loader: 'css-loader'
 			}]
@@ -86,6 +88,9 @@ const configChangeSignature = {
 		devtoolModuleFilenameTemplate: "../[resource-path]"
 	},
 	plugins: [
+		new MiniCssExtractPlugin({
+			filename: 'changeSignature.css'
+		}),
 		new webpack.ProvidePlugin({
 			process: 'process/browser',
 		}),
@@ -113,7 +118,7 @@ const configDashboard = {
 		}, {
 			test: /\.(css)$/,
 			use: [{
-				loader: 'style-loader'
+				loader: MiniCssExtractPlugin.loader,
 			}, {
 				loader: 'css-loader'
 			}]
@@ -129,6 +134,9 @@ const configDashboard = {
 		devtoolModuleFilenameTemplate: "../[resource-path]"
 	},
 	plugins: [
+		new MiniCssExtractPlugin({
+			filename: 'dashboard.css'
+		}),
 		new webpack.ProvidePlugin({
 			process: 'process/browser',
 		}),

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+@import "../../../node_modules/@vscode/codicons/dist/codicon.css";`
	`2`	`+`
`1`	`3`	`.toolbar {`
`2`	`4`	`margin: 8px;`
`3`	`5`	`width: 100%;`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`import { Uri, Webview } from "vscode";`
`2`	`2`
`3`		`-export function getUri(webview: Webview, extensionUri: Uri, pathList: string[]) {`
	`3`	`+export function getUri(webview: Webview, extensionUri: Uri, ...pathList: string[]) {`
`4`	`4`	`return webview.asWebviewUri(Uri.joinPath(extensionUri, ...pathList));`
`5`	`5`	`}`
`6`	`6`