Webview resources (microsoft#375)

xnkevinnguyen · web-flow · commit 499565ac6de7 · 2020-05-29T10:31:04.000-07:00
* Update typing for vscode api

* Webviews will load ressources from webviewUri instead of hardcoded vscode-ressources

* Add script security policy with CSP

* Add link to sample code
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -257,7 +257,7 @@
         "@types/node": "^10.12.21",
         "@types/react": "16.8.6",
         "@types/react-dom": "16.8.4",
-        "@types/vscode": "^1.34.0",
+        "@types/vscode": "^1.45.1",
         "css-loader": "^1.0.0",
         "del": "^4.0.0",
         "event-stream": "^4.0.1",
diff --git a/src/constants.ts b/src/constants.ts
@@ -40,6 +40,10 @@ export const CONSTANTS = {
         MICROBIT: "micro:bit",
         CLUE: "CLUE",
     },
+    SCRIPT_PATH: {
+        SIMULATOR: "out/simulator.js",
+        VSCODE_API: "out/vscode_import.js",
+    },
     ERROR: {
         BAD_PYTHON_PATH:
             'Your interpreter is not pointing to a valid Python executable. Please select a different interpreter (CTRL+SHIFT+P and type "python.selectInterpreter") and restart the application',
diff --git a/src/extension.ts b/src/extension.ts
@@ -134,7 +134,8 @@ export async function activate(context: vscode.ExtensionContext) {
             messagingService.setWebview(currentPanel.webview);
             currentPanel.webview.html = webviewService.getWebviewContent(
                 WEBVIEW_TYPES.SIMULATOR,
-                true
+                true,
+                currentPanel
             );
             currentPanel.reveal(vscode.ViewColumn.Beside);
         } else {
@@ -158,7 +159,8 @@ export async function activate(context: vscode.ExtensionContext) {
 
             currentPanel.webview.html = webviewService.getWebviewContent(
                 WEBVIEW_TYPES.SIMULATOR,
-                true
+                true,
+                currentPanel
             );
             messagingService.setWebview(currentPanel.webview);
 
diff --git a/src/service/webviewService.ts b/src/service/webviewService.ts
@@ -26,35 +26,44 @@ export class WebviewService {
         }
     }
 
-    public getWebviewContent(webviewType: string, hasDevice: boolean) {
+    public getWebviewContent(
+        webviewType: string,
+        hasDevice: boolean,
+        panel: vscode.WebviewPanel
+    ) {
+        const onDiskPath = vscode.Uri.file(
+            this.context.asAbsolutePath(CONSTANTS.SCRIPT_PATH.SIMULATOR)
+        );
+        const scriptSrc = panel.webview.asWebviewUri(onDiskPath);
+
+        const vscodeImportPath = vscode.Uri.file(
+            this.context.asAbsolutePath(CONSTANTS.SCRIPT_PATH.VSCODE_API)
+        );
+        const vscodeImportPathSrc = panel.webview.asWebviewUri(
+            vscodeImportPath
+        );
+
+        const attributeString = this.getAttributeString(webviewType, hasDevice);
+        const nonce = getNonce();
+
         return `<!DOCTYPE html>
               <html lang="en">
               <head>
                 <meta charset="UTF-8">
                 <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    
+                <meta
+                http-equiv="Content-Security-Policy"
+                content=" script-src ${panel.webview.cspSource}  nonce-${nonce}"
+              />
                 <title>${CONSTANTS.NAME}</title>
                 </head>
               <body>
                 <div id="root"></div>
-                <script >
-                  const vscode = acquireVsCodeApi();
-                </script>
-                <script ></script>
-                ${this.loadScript(
-                    this.context,
-                    webviewType,
-                    "out/vendor.js",
-                    hasDevice
-                )}
-                ${this.loadScript(
-                    this.context,
-                    webviewType,
-                    "out/simulator.js",
-                    hasDevice
-                )}
-              </body>
-              </html>`;
+                <script nonce="${nonce}" src=${vscodeImportPathSrc} ></script>
+                <script nonce="${nonce}" src=${scriptSrc} ${attributeString} ></script>
+
+            </body>
+            < /html>`;
     }
 
     private createTutorialPanel() {
@@ -69,7 +78,8 @@ export class WebviewService {
         );
         this.tutorialPanel.webview.html = this.getWebviewContent(
             WEBVIEW_TYPES.GETTING_STARTED,
-            false
+            false,
+            this.tutorialPanel
         );
         this.tutorialPanel.onDidDispose(() => {
             this.disposeTutorialPanel();
@@ -79,27 +89,24 @@ export class WebviewService {
     private disposeTutorialPanel() {
         this.tutorialPanel = undefined;
     }
-
-    private loadScript(
-        context: vscode.ExtensionContext,
-        attributeValue: string,
-        scriptPath: string,
-        hasDevice: boolean
-    ) {
-        let attributeString: string;
+    private getAttributeString(webviewType: string, hasDevice: boolean) {
         if (hasDevice) {
-            attributeString = `${
-                WEBVIEW_ATTRIBUTES_KEY.TYPE
-            }=${attributeValue} ${
+            return `${WEBVIEW_ATTRIBUTES_KEY.TYPE}=${webviewType} ${
                 WEBVIEW_ATTRIBUTES_KEY.INITIAL_DEVICE
-            }=${this.deviceSelectionService.getCurrentActiveDevice()}`;
+            }=${this.deviceSelectionService.getCurrentActiveDevice()} `;
         } else {
-            attributeString = `${WEBVIEW_ATTRIBUTES_KEY.TYPE}=${attributeValue} `;
+            return `${WEBVIEW_ATTRIBUTES_KEY.TYPE}=${webviewType} `;
         }
-        return `<script ${attributeString} src="${vscode.Uri.file(
-            context.asAbsolutePath(scriptPath)
-        )
-            .with({ scheme: "vscode-resource" })
-            .toString()}"></script>`;
     }
 }
+// Nonce generator taken from vscode extension samples found here:
+// https://github.com/microsoft/vscode-extension-samples/blob/master/custom-editor-sample/src/util.ts
+function getNonce() {
+    let text = "";
+    const possible =
+        "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+    for (let i = 0; i < 32; i++) {
+        text += possible.charAt(Math.floor(Math.random() * possible.length));
+    }
+    return text;
+}
diff --git a/src/vscode_import.ts b/src/vscode_import.ts
@@ -0,0 +1,3 @@
+declare const acquireVsCodeApi;
+
+const vscode = acquireVsCodeApi();
diff --git a/webpack.config.js b/webpack.config.js
@@ -9,7 +9,10 @@ module.exports = {
     path: path.resolve(__dirname, "out"),
     filename: "[name].js"
   },
-  devtool: "eval-source-map",
+  devServer: {
+    historyApiFallback: true
+  },
+  devtool: "source-map",
   resolve: {
     extensions: [".js", ".ts", ".tsx", ".json"]
   },

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+declare const acquireVsCodeApi;`
	`2`	`+`
	`3`	`+const vscode = acquireVsCodeApi();`