From 036a323a2377bf2124365b50b1d803c562328145 Mon Sep 17 00:00:00 2001
From: Teodora Sandu <81559517+teodora-sandu@users.noreply.github.com>
Date: Mon, 8 Jul 2024 11:28:36 +0100
Subject: [PATCH] refactor: prepare to use the html/template version of the OSS
 HTML (#482)

---
 CHANGELOG.md                                  |  5 +++-
 .../providers/ossDetailPanelProvider.ts       | 24 +++++++++++++++----
 2 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 313190698..e6997e282 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,9 @@
 # Snyk Security Changelog
 
-## [2.12.4]
+### [2.13.1]
+- Refactor the Suggestion Panel for OSS so it's more secure and will be supported in other IDEs
+
+## [2.13.0]
 - Fix `.suggestion` class to ensure it is scrollable and not overlapped by the `.suggestion-actions` fixed element. This change prevents the suggestion content from being hidden.
 - transmit required protocol version to language server
 - Remove unused stylesheet and refactor stylesheets
diff --git a/src/snyk/snykOss/providers/ossDetailPanelProvider.ts b/src/snyk/snykOss/providers/ossDetailPanelProvider.ts
index 1b5946a06..c94a75c76 100644
--- a/src/snyk/snykOss/providers/ossDetailPanelProvider.ts
+++ b/src/snyk/snykOss/providers/ossDetailPanelProvider.ts
@@ -11,6 +11,7 @@ import { IVSCodeLanguages } from '../../common/vscode/languages';
 import { IVSCodeWindow } from '../../common/vscode/window';
 import { IVSCodeWorkspace } from '../../common/vscode/workspace';
 import { messages } from '../constants/messages';
+import { readFileSync } from 'fs';
 
 export class OssDetailPanelProvider
   extends WebviewProvider<Issue<OssIssueData>>
@@ -78,17 +79,32 @@ export class OssDetailPanelProvider
       }, {});
 
       const displayMode = 'dark';
+
+      let html = issue.additionalData.details;
+
+      // Add the style
+      const ideStylePath = vscode.Uri.joinPath(
+        vscode.Uri.file(this.context.extensionPath),
+        'media',
+        'views',
+        'oss',
+        'suggestion',
+        'suggestion.css',
+      );
+      const ideStyle = readFileSync(ideStylePath.fsPath, 'utf8');
+      const nonce = getNonce();
+
+      // TODO: remove after the stable CLI release at the end of cycle 5
       const styleUri = this.getWebViewUri('media', 'views', 'oss', 'suggestion', 'suggestion.css');
       const headerEndValue = `<link href="${styleUri}" rel="stylesheet">`;
       const serverityIconName = `${displayMode}-${issue.severity}-severity`;
-      const nonce = getNonce();
-
-      let html = issue.additionalData.details;
       html = html.replace('${headerEnd}', headerEndValue);
       html = html.replaceAll('${cspSource}', this.panel.webview.cspSource);
-      html = html.replaceAll('${nonce}', nonce);
       html = html.replace('${severityIcon}', images[serverityIconName]);
       html = html.replace('${learnIcon}', images['learn-icon']);
+      // TODO: end remove
+      html = html.replace('${ideStyle}', '<style nonce=${nonce}>' + ideStyle + '</style>');
+      html = html.replaceAll('${nonce}', nonce);
       html = html.replaceAll(/\$\{\w+\}/g, '');
       this.panel.webview.html = html;
       this.panel.iconPath = vscode.Uri.joinPath(