* Defines and returns the HTML that should be rendered within the webview panel. * * @remarks This is also the place where references to the React webview build files * are created and inserted into the webview HTML. * * @param webview A reference to the extension webview * @param extens
(webview: vscode.Webview)
| 1331 | * rendered within the webview panel |
| 1332 | */ |
| 1333 | private async getHtmlContent(webview: vscode.Webview): Promise<string> { |
| 1334 | // Get the local path to main script run in the webview, |
| 1335 | // then convert it to a uri we can use in the webview. |
| 1336 | |
| 1337 | // The CSS file from the React build output |
| 1338 | const stylesUri = getUri(webview, this.contextProxy.extensionUri, [ |
| 1339 | "webview-ui", |
| 1340 | "build", |
| 1341 | "assets", |
| 1342 | "index.css", |
| 1343 | ]) |
| 1344 | |
| 1345 | const scriptUri = getUri(webview, this.contextProxy.extensionUri, ["webview-ui", "build", "assets", "index.js"]) |
| 1346 | const codiconsUri = getUri(webview, this.contextProxy.extensionUri, ["assets", "codicons", "codicon.css"]) |
| 1347 | const materialIconsUri = getUri(webview, this.contextProxy.extensionUri, [ |
| 1348 | "assets", |
| 1349 | "vscode-material-icons", |
| 1350 | "icons", |
| 1351 | ]) |
| 1352 | const imagesUri = getUri(webview, this.contextProxy.extensionUri, ["assets", "images"]) |
| 1353 | const audioUri = getUri(webview, this.contextProxy.extensionUri, ["webview-ui", "audio"]) |
| 1354 | |
| 1355 | // Use a nonce to only allow a specific script to be run. |
| 1356 | /* |
| 1357 | content security policy of your webview to only allow scripts that have a specific nonce |
| 1358 | create a content security policy meta tag so that only loading scripts with a nonce is allowed |
| 1359 | As your extension grows you will likely want to add custom styles, fonts, and/or images to your webview. If you do, you will need to update the content security policy meta tag to explicitly allow for these resources. E.g. |
| 1360 | <meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src ${webview.cspSource}; font-src ${webview.cspSource}; img-src ${webview.cspSource} https:; script-src 'nonce-${nonce}';"> |
| 1361 | - 'unsafe-inline' is required for styles due to vscode-webview-toolkit's dynamic style injection |
| 1362 | - since we pass base64 images to the webview, we need to specify img-src ${webview.cspSource} data:; |
| 1363 | |
| 1364 | in meta tag we add nonce attribute: A cryptographic nonce (only used once) to allow scripts. The server must generate a unique nonce value each time it transmits a policy. It is critical to provide a nonce that cannot be guessed as bypassing a resource's policy is otherwise trivial. |
| 1365 | */ |
| 1366 | const nonce = getNonce() |
| 1367 | |
| 1368 | // Get the OpenRouter base URL from configuration |
| 1369 | const { apiConfiguration } = await this.getState() |
| 1370 | const openRouterBaseUrl = apiConfiguration.openRouterBaseUrl || "https://openrouter.ai" |
| 1371 | // Extract the domain for CSP |
| 1372 | const openRouterDomain = openRouterBaseUrl.match(/^(https?:\/\/[^\/]+)/)?.[1] || "https://openrouter.ai" |
| 1373 | |
| 1374 | // Tip: Install the es6-string-html VS Code extension to enable code highlighting below |
| 1375 | return /*html*/ ` |
| 1376 | <!DOCTYPE html> |
| 1377 | <html lang="en"> |
| 1378 | <head> |
| 1379 | <meta charset="utf-8"> |
| 1380 | <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"> |
| 1381 | <meta name="theme-color" content="#000000"> |
| 1382 | <meta http-equiv="Content-Security-Policy" content="default-src 'none'; font-src ${webview.cspSource} data:; style-src ${webview.cspSource} 'unsafe-inline'; img-src ${webview.cspSource} https://storage.googleapis.com https://img.clerk.com https://avatars.githubusercontent.com https://lh3.googleusercontent.com data:; media-src ${webview.cspSource}; script-src ${webview.cspSource} 'wasm-unsafe-eval' 'nonce-${nonce}' 'strict-dynamic'; connect-src ${webview.cspSource} ${openRouterDomain} https://api.requesty.ai https://us.i.posthog.com;"> |
| 1383 | <link rel="stylesheet" type="text/css" href="${stylesUri}"> |
| 1384 | <link href="${codiconsUri}" rel="stylesheet" /> |
| 1385 | <script nonce="${nonce}"> |
| 1386 | window.IMAGES_BASE_URI = "${imagesUri}" |
| 1387 | window.AUDIO_BASE_URI = "${audioUri}" |
| 1388 | window.MATERIAL_ICONS_BASE_URI = "${materialIconsUri}" |
| 1389 | </script> |
| 1390 | <title>Roo Code</title> |
no test coverage detected