fix: bad nonce handling in realtime view

connor4312 · connor4312 · commit 60d74ed51ab3 · 2021-05-17T09:32:23.000-07:00
diff --git a/package.json b/package.json
@@ -9,9 +9,9 @@
     "compile:table": "lerna run --scope vscode-js-profile-table compile",
     "compile:flame": "lerna run --scope vscode-js-profile-flame compile",
     "watch": "concurrently \"npm:watch:core:*\" \"npm:watch:flame:*\" \"npm:watch:table:*\"",
-    "watch:core": "lerna run --scope vscode-js-profile-core watch",
-    "watch:table": "lerna run --scope vscode-js-profile-table watch",
-    "watch:flame": "lerna run --scope vscode-js-profile-flame watch",
+    "watch:core": "lerna run --stream --scope vscode-js-profile-core watch",
+    "watch:table": "lerna run --stream --scope vscode-js-profile-table watch",
+    "watch:flame": "lerna run --stream --scope vscode-js-profile-flame watch",
     "pack": "npm run compile && lerna run pack",
     "fmt": "prettier --write \"packages/**/*.{ts,tsx,css}\" \"!**/out/**\" && npm run test:lint -- --fix",
     "test": "concurrently \"npm:test:*\"",
diff --git a/packages/vscode-js-profile-core/src/bundlePage.ts b/packages/vscode-js-profile-core/src/bundlePage.ts
@@ -3,14 +3,16 @@
  *--------------------------------------------------------*/
 
 import * as vscode from 'vscode';
+import { makeNonce, nonceHeader } from './nonce';
 
 export const bundlePage = async (bundleUri: vscode.Uri, constants: { [key: string]: unknown }) => {
-  const nonce = Math.random().toString();
+  const nonce = makeNonce();
   const html = `<!DOCTYPE html>
     <html lang="en">
     <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
+      ${nonceHeader(nonce)}
       <title>Profile Custom Editor</title>
     </head>
     <body>
diff --git a/packages/vscode-js-profile-core/src/nonce.ts b/packages/vscode-js-profile-core/src/nonce.ts
@@ -0,0 +1,17 @@
+/*---------------------------------------------------------
+ * Copyright (C) Microsoft Corporation. All rights reserved.
+ *--------------------------------------------------------*/
+
+const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+
+export function makeNonce(length = 32) {
+  let str = '';
+  for (let i = 0; i < length; i++) {
+    str += chars[Math.floor(Math.random() * chars.length)];
+  }
+
+  return str;
+}
+
+export const nonceHeader = (nonce: string) =>
+  `<meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src 'unsafe-inline'; script-src 'nonce-${nonce}';">`;
diff --git a/packages/vscode-js-profile-flame/package.json b/packages/vscode-js-profile-flame/package.json
@@ -36,7 +36,7 @@
     "watch": "concurrently \"npm:watch:*\"",
     "watch:client": "webpack --mode development --config webpack.client.js --watch",
     "watch:realtime": "webpack --mode development --config webpack.realtime.js --watch",
-    "watch:ext": "webpack --mode development --config webpack.extension.js --watch"
+    "watch:ext": "webpack --mode development --config webpack.extension.js --watch --target node"
   },
   "icon": "resources/logo.png",
   "activationEvents": [
diff --git a/packages/vscode-js-profile-flame/src/realtimeWebviewProvider.ts b/packages/vscode-js-profile-flame/src/realtimeWebviewProvider.ts
@@ -3,6 +3,7 @@
  *--------------------------------------------------------*/
 
 import * as vscode from 'vscode';
+import { makeNonce, nonceHeader } from 'vscode-js-profile-core/out/nonce';
 import { FromWebViewMessage, MessageType } from './realtime/protocol';
 import { RealtimeSessionTracker } from './realtimeSessionTracker';
 
@@ -40,13 +41,13 @@ export class RealtimeWebviewProvider implements vscode.WebviewViewProvider {
     const scriptUri = webview.asWebviewUri(
       vscode.Uri.joinPath(this.extensionUri, 'out', 'realtime.bundle.js'),
     );
-    const nonce = Math.random().toString();
+    const nonce = makeNonce();
 
     return `<!DOCTYPE html>
 			<html lang="en">
 			<head>
 				<meta charset="UTF-8">
-				<meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src 'unsafe-inline'; script-src 'nonce-${nonce}';">
+        ${nonceHeader(nonce)}
 				<meta name="viewport" content="width=device-width, initial-scale=1.0">
 				<title>Realtime Performance</title>
 			</head>
