Fix Graphviz WASM module not loading for graph viewer

koesie10 · koesie10 · commit bc51e7462b5a · 2023-02-15T15:41:36.000+01:00
It seems that when we added the CSP policy to the webview, we did not
take into account that `d3-graphviz` uses `@hpcc-js/wasm` to load
Graphviz as a WASM module. This commit adds `'wasm-unsafe-eval'` to the
CSP policy to allow this.
diff --git a/extensions/ql-vscode/src/interface-utils.ts b/extensions/ql-vscode/src/interface-utils.ts
@@ -163,7 +163,7 @@ export function getHtmlForWebview(
   /*
    * Content security policy:
    * default-src: allow nothing by default.
-   * script-src: allow only the given script, using the nonce.
+   * script-src: allow the given script, using the nonce. also allow loading WebAssembly modules.
    * style-src: allow only the given stylesheet, using the nonce.
    * connect-src: only allow fetch calls to webview resource URIs
    * (this is used to load BQRS result files).
@@ -172,7 +172,7 @@ export function getHtmlForWebview(
 <html>
   <head>
     <meta http-equiv="Content-Security-Policy"
-          content="default-src 'none'; script-src 'nonce-${nonce}'; font-src ${fontSrc}; style-src ${styleSrc}; connect-src ${
+          content="default-src 'none'; script-src 'nonce-${nonce}' 'wasm-unsafe-eval'; font-src ${fontSrc}; style-src ${styleSrc}; connect-src ${
     webview.cspSource
   };">
         ${stylesheetsHtmlLines.join(`    ${EOL}`)}
diff --git a/extensions/ql-vscode/src/view/results/graph.tsx b/extensions/ql-vscode/src/view/results/graph.tsx
@@ -5,7 +5,7 @@ import {
   InterpretedResultSet,
   GraphInterpretationData,
 } from "../../pure/interface-types";
-import { graphviz } from "d3-graphviz";
+import { graphviz, GraphvizOptions } from "d3-graphviz";
 import { tryGetLocationFromString } from "../../pure/bqrs-utils";
 export type GraphProps = ResultTableProps & {
   resultSet: InterpretedResultSet<GraphInterpretationData>;
@@ -59,11 +59,12 @@ export class Graph extends React.Component<GraphProps> {
       return;
     }
 
-    const options = {
+    const options: GraphvizOptions = {
       fit: true,
       fade: false,
       growEnteringEdges: false,
       zoom: true,
+      useWorker: false,
     };
 
     const element = document.querySelector(`#${graphId}`);
@@ -77,8 +78,7 @@ export class Graph extends React.Component<GraphProps> {
     const borderColor = getComputedStyle(element).borderColor;
     let firstPolygon = true;
 
-    graphviz(`#${graphId}`)
-      .options(options)
+    graphviz(`#${graphId}`, options)
       .attributer(function (d) {
         if (d.tag === "a") {
           const url = d.attributes["xlink:href"] || d.attributes["href"];
