Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Move webview HTML into own file #18

Merged
merged 2 commits into from
Oct 4, 2024
Merged

Move webview HTML into own file #18

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
371e012
vscode: Move the HTML into a separate file to allow easier modification
tmr232 Oct 3, 2024
bfa2f31
vscode: stricter CSP
tmr232 Oct 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
90 changes: 41 additions & 49 deletions src/vscode/overview-view.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import * as vscode from "vscode";

import * as fs from "fs";
import * as crypto from "crypto";
export class OverviewViewProvider implements vscode.WebviewViewProvider {
public static readonly viewType = "functionGraphOverview.overview";
private readonly helloWorldSvg: string;
Expand Down Expand Up @@ -34,63 +35,54 @@ export class OverviewViewProvider implements vscode.WebviewViewProvider {

webviewView.webview.html = this._getHtmlForWebview(webviewView.webview);
}

private getUri(filename: string): vscode.Uri {
return vscode.Uri.joinPath(this._extensionUri, "webview-content", filename);
}

private getWebviewUri(webview: vscode.Webview, filename: string): vscode.Uri {
return webview.asWebviewUri(this.getUri(filename));
}

private _getHtmlForWebview(webview: vscode.Webview): string {
// Get the local path to main script run in the webview, then convert it to a uri we can use in the webview.
const scriptUri = webview.asWebviewUri(
vscode.Uri.joinPath(this._extensionUri, "webview-content", "main.js"),
);
const scriptUri = this.getWebviewUri(webview, "main.js");

// Do the same for the stylesheet.
const styleResetUri = webview.asWebviewUri(
vscode.Uri.joinPath(this._extensionUri, "webview-content", "reset.css"),
);
const styleVSCodeUri = webview.asWebviewUri(
vscode.Uri.joinPath(this._extensionUri, "webview-content", "vscode.css"),
);
const styleMainUri = webview.asWebviewUri(
vscode.Uri.joinPath(this._extensionUri, "webview-content", "main.css"),
);
const styleResetUri = this.getWebviewUri(webview, "reset.css");
const styleVSCodeUri = this.getWebviewUri(webview, "vscode.css");
const styleMainUri = this.getWebviewUri(webview, "main.css");

// Use a nonce to only allow a specific script to be run.
const nonce = getNonce();

return `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<!--
Use a content security policy to only allow loading styles from our extension directory,
and only allow scripts that have a specific nonce.
(See the 'webview-sample' extension sample for img-src content security policy examples)
-->
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src ${webview.cspSource}; script-src 'nonce-${nonce}';">

<link href="${styleResetUri}" rel="stylesheet">
<link href="${styleVSCodeUri}" rel="stylesheet">
<link href="${styleMainUri}" rel="stylesheet">

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Overview</title>
<style>

</style>
</head>
<body>
<div id="overview">${this.helloWorldSvg}</div>

<script nonce="${nonce}" src="${scriptUri}"></script>
</body>
</html>`;
const htmlPath = this.getUri("index.html").fsPath;
let html = fs.readFileSync(htmlPath).toString();

const replacements: [RegExp, string][] = [
[/#{nonce}/g, nonce],
[/#{cspSource}/g, webview.cspSource],
[/#{styleResetUri}/g, styleResetUri.toString()],
[/#{styleVSCodeUri}/g, styleVSCodeUri.toString()],
[/#{styleMainUri}/g, styleMainUri.toString()],
[/#{scriptUri}/g, scriptUri.toString()],
[/#{helloWorldSvg}/g, this.helloWorldSvg],
];

for (const [pattern, substitute] of replacements) {
html = html.replaceAll(pattern, substitute);
}

// Make sure we did not forget any replacements
const unreplaced = html.match(/#{\w+}/g);
if (unreplaced) {
console.log("Unreplaced placeholder found!", unreplaced);
}

return html;
}
}

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;
function getNonce(): string {
return crypto.randomBytes(16).toString("base64");
}
31 changes: 31 additions & 0 deletions webview-content/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />

<!--
Use a content security policy to only allow loading styles from our extension directory,
and only allow scripts that have a specific nonce.
(See the 'webview-sample' extension sample for img-src content security policy examples)
-->
<meta
http-equiv="Content-Security-Policy"
content="default-src 'none';
style-src #{cspSource} 'nonce-#{nonce}';
script-src #{cspSource} 'nonce-#{nonce}';"
/>

<link href="#{styleResetUri}" rel="stylesheet" />
<link href="#{styleVSCodeUri}" rel="stylesheet" />
<link href="#{styleMainUri}" rel="stylesheet" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Overview</title>
<style></style>
</head>
<body>
<div id="overview">#{helloWorldSvg}</div>

<script nonce="#{nonce}" src="#{scriptUri}"></script>
</body>
</html>