Skip to content

Sanitize HTML in our VS Code panels #3675

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

Open
Andrew Casey (amcasey) wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Sanitize HTML in our VS Code panels #3675

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
29e7f9c
Sanitize HTML in our VS Code panels
amcasey Sep 1, 2026
22aaa38
Sanitize HTML in the playground as well
amcasey Sep 1, 2026
21fa798
Fix help panel
amcasey Sep 1, 2026
5034d75
Allow xref links
amcasey Sep 1, 2026
7ad9f71
Unbreak katas in the playground
amcasey Sep 3, 2026
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
2 changes: 1 addition & 1 deletion katas/content/linear_algebra/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -219,7 +219,7 @@ A square matrix has a property called the **determinant**, with the determinant

For a $2 \times 2$ matrix $A$, the determinant is defined as $|A| = A_{0,0} \cdot A_{1,1} - A_{0,1} \cdot A_{1,0}$.

For larger matrices, the determinant is defined through determinants of sub-matrices. You can learn more about the determinant of matrices from [Wikipedia](https://en.wikipedia.org/wiki/Determinant) or from [Wolfram MathWorld](http://mathworld.wolfram.com/Determinant.html).
For larger matrices, the determinant is defined through determinants of sub-matrices. You can learn more about the determinant of matrices from [Wikipedia](https://en.wikipedia.org/wiki/Determinant) or from [Wolfram MathWorld](https://mathworld.wolfram.com/Determinant.html).

@[exercise]({
"id": "linear_algebra__inverse_matrix_ex",
Expand Down
8 changes: 7 additions & 1 deletion source/playground/src/main.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,12 +58,18 @@ import {
decodeGatesUrl,
} from "qsharp-lang/ux";

import DOMPurify from "dompurify";
const md = markdownIt("commonmark");
md.use((mk as any).default, {
enableMathBlockInHtml: true,
enableMathInlineInHtml: true,
}); // Not sure why it's not using the default export automatically :-/
setRenderer((input: string) => md.render(input));
// Allow only the protocols used in doc/kata/estimator content
// Borrowed from DOMPurify and filtered to our protocols
const ALLOWED_URI = /^(?:(?:https|xref):|[^a-z]|[a-z+.-]+(?:[^a-z+.-:]|$))/i;
setRenderer((input: string) =>
DOMPurify.sanitize(md.render(input), { ALLOWED_URI_REGEXP: ALLOWED_URI }),
);

export type ActiveTab =
| "results-tab"
Expand Down
3 changes: 1 addition & 2 deletions source/vscode/src/webview/help.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,6 @@

import { useEffect, useRef } from "preact/hooks";

declare const resourcesUri: string; // Set by the HTML in the window

let svgPromise: Promise<Response>;

export function HelpPage() {
Expand All @@ -14,6 +12,7 @@ export function HelpPage() {

// Ensure that the fetch is kicked off once for the module
if (!svgPromise) {
const resourcesUri = document.body.dataset.resourcesUri ?? "";
svgPromise = fetch(`${resourcesUri}/DebugDropDown.svg`);
}
Comment thread
amcasey marked this conversation as resolved.

Expand Down
10 changes: 8 additions & 2 deletions source/vscode/src/webview/webview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,16 +20,22 @@ import { HelpPage } from "./help";
import { DocumentationView, IDocFile } from "./docview";
import "./webview.css";

import DOMPurify from "dompurify";
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore - there are no types for this
import mk from "@vscode/markdown-it-katex";
import markdownIt from "markdown-it";
const md = markdownIt("commonmark");
const md = markdownIt("commonmark", { html: false });
Comment thread
amcasey marked this conversation as resolved.
md.use(mk, {
enableMathBlockInHtml: true,
enableMathInlineInHtml: true,
});
setRenderer((input: string) => md.render(input));
// Allow only the protocols used in doc/kata/estimator content
// Borrowed from DOMPurify and filtered to our protocols
const ALLOWED_URI = /^(?:(?:https|xref):|[^a-z]|[a-z+.-]+(?:[^a-z+.-:]|$))/i;
setRenderer((input: string) =>
DOMPurify.sanitize(md.render(input), { ALLOWED_URI_REGEXP: ALLOWED_URI }),
);

window.addEventListener("message", onMessage);
window.addEventListener("load", main);
Expand Down
9 changes: 5 additions & 4 deletions source/vscode/src/webviewPanel.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -336,23 +336,24 @@ export class QSharpWebViewPanel {
const webviewCss = getUri(["out", "webview", "webview.css"]);
const webviewJs = getUri(["out", "webview", "webview.js"]);
const resourcesUri = getUri(["resources"]);
const cspSource = webview.cspSource;

return /*html*/ `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Security-Policy"
content="default-src 'none'; img-src ${cspSource}; style-src ${cspSource} 'unsafe-inline'; font-src ${cspSource}; script-src ${cspSource}; connect-src ${cspSource};" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Q#</title>
<link rel="stylesheet" href="${githubCss}" />
<link rel="stylesheet" href="${katexCss}" />
<link rel="stylesheet" href="${webviewCss}" />
<script src="${webviewJs}"></script>
<script>
window.resourcesUri = "${resourcesUri.toString()}";
</script>
</head>
<body>
<!-- Share this URI with the help panel via attribute so we don't need a script (which would be blocked) -->
<body data-resources-uri="${resourcesUri.toString()}">
</body>
</html>
`;
Expand Down