Skip to content

refactor: improve type guard for domUtils.isNode#1000

Merged
tbouffard merged 5 commits into
mainfrom
refactor/improve_type_domUtils.isNode
Mar 10, 2026
Merged

refactor: improve type guard for domUtils.isNode#1000
tbouffard merged 5 commits into
mainfrom
refactor/improve_type_domUtils.isNode

Conversation

@tbouffard

@tbouffard tbouffard commented Feb 4, 2026

Copy link
Copy Markdown
Member
  • Change isNode to return a type predicate (value is HTMLElement)
  • Remove unnecessary type assertions in code using isNode
  • Simplify type narrowing in SvgCanvas2D, XmlCanvas2D, TooltipHandler, and TextShape

Summary by CodeRabbit

  • Refactor
    • Improved TypeScript type safety across DOM rendering and canvas code by removing unnecessary casts and ts-ignore comments and introducing precise type-guard signatures for DOM element handling.
  • Documentation
    • Updated example snippets and event names in docs to align with current APIs.

  - Change isNode to return a type predicate (value is HTMLElement)
  - Remove unnecessary type assertions in code using isNode
  - Simplify type narrowing in SvgCanvas2D, XmlCanvas2D, TooltipHandler, and TextShape
@tbouffard tbouffard added the refactor Code refactoring label Feb 4, 2026
@coderabbitai

coderabbitai Bot commented Feb 4, 2026

Copy link
Copy Markdown

Caution

Review failed

Pull request was closed or merged during review

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: cc58c800-564e-4994-8f7d-bd262d04fa3a

📥 Commits

Reviewing files that changed from the base of the PR and between 2bff3b7 and c6a58ea.

📒 Files selected for processing (2)
  • packages/core/src/view/canvas/SvgCanvas2D.ts
  • packages/core/src/view/shape/node/TextShape.ts

Walkthrough

Converted isNode to a TypeScript type predicate and removed redundant type assertions/@ts-ignore across DOM/canvas/tooltip/shape/story code; runtime behavior and control flow remain unchanged.

Changes

Cohort / File(s) Summary
Type guard
packages/core/src/util/domUtils.ts
Changed isNode return type from boolean to the type predicate value is Element (signature only).
Canvas renderers
packages/core/src/view/canvas/SvgCanvas2D.ts, packages/core/src/view/canvas/XmlCanvas2D.ts
Removed redundant casts when handling Node/HTML values; pass values directly to convertHtml/getXml, clone/append nodes without extra type assertions.
Shape & tooltip handling
packages/core/src/view/shape/node/TextShape.ts, packages/core/src/view/plugin/TooltipHandler.ts
Removed @ts-ignore and explicit casts for DOM properties and tooltip content; directly use Node/Element or string values when setting HTML or appending nodes.
Docs / examples & stories
packages/core/src/view/mixin/LabelMixin.type.ts, packages/html/stories/UserObject.stories.ts
Updated example identifiers (StringUtilsstringUtils, mxEventInternalEvent), loop style in sample code, and cast cloned node as Element in story.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related PRs

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Description check ⚠️ Warning The PR description is minimal and lacks required template sections: no issue reference, no PR checklist completion, no test/documentation details, and no discussion of problem/benefits. Complete the PR template by adding issue reference (closes #xxx), checking all checklist items, explaining the problem solved, and detailing tests added and documentation changes.
✅ Passed checks (2 passed)
Check name Status Explanation
Title check ✅ Passed The title 'refactor: improve type guard for domUtils.isNode' clearly and specifically describes the main change—improving the type guard for the isNode function in domUtils.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.


Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.


if (!isNode(val)) {
val = `<div><div>${this.convertHtml(val as string)}</div></div>`;
val = `<div><div>${this.convertHtml(val)}</div></div>`;

Check warning

Code scanning / CodeQL

Unsafe HTML constructed from library input Medium

This HTML construction which depends on
library input
might later allow
cross-site scripting
.
This HTML construction which depends on
library input
might later allow
cross-site scripting
.
This HTML construction which depends on
library input
might later allow
cross-site scripting
.
This HTML construction which depends on
library input
might later allow
cross-site scripting
.
This HTML construction which depends on
library input
might later allow
cross-site scripting
.
This HTML construction which depends on
library input
might later allow
cross-site scripting
.
This HTML construction which depends on
library input
might later allow
cross-site scripting
.
This HTML construction which depends on
library input
might later allow
cross-site scripting
.
This HTML construction which depends on
library input
might later allow
cross-site scripting
.
This HTML construction which depends on
library input
might later allow
cross-site scripting
.
This HTML construction which depends on
library input
might later allow
cross-site scripting
.
This HTML construction which depends on
library input
might later allow
cross-site scripting
.
This HTML construction which depends on
library input
might later allow
cross-site scripting
.
This HTML construction which depends on
library input
might later allow
cross-site scripting
.
This HTML construction which depends on
library input
might later allow
cross-site scripting
.
This HTML construction which depends on
library input
might later allow
cross-site scripting
.
This HTML construction which depends on
library input
might later allow
cross-site scripting
.
This HTML construction which depends on
library input
might later allow
cross-site scripting
.
This HTML construction which depends on
library input
might later allow
cross-site scripting
.
This HTML construction which depends on
library input
might later allow
cross-site scripting
.

Copilot Autofix

AI 4 months ago

In general, to fix this class of problems you must either (a) sanitize/escape any HTML you construct from library inputs before inserting it into the DOM, or (b) change the API so that callers provide structured elements instead of raw HTML strings, or (c) clearly document that the function only accepts trusted HTML. Since this is a low-level rendering helper and we should not rely on all callers correctly treating inputs as trusted, the safe approach is to ensure that whatever is inserted into the DOM cannot execute arbitrary scripts.

The single best fix here is to sanitize the result of convertHtml before using it to construct the HTML wrapper string in createDiv. The project already imports htmlEntities from ../../util/StringUtils.js, which suggests it is an escaping helper for HTML. We can apply htmlEntities to the converted HTML string, then place that escaped string inside our wrapper DIVs. That way, any <script> tags or other markup in user-controlled input will be rendered as literal text rather than being interpreted as HTML, while still preserving the current behavior of convertHtml for well-formed inputs. Concretely, in createDiv, instead of:

if (!isNode(val)) {
  val = `<div><div>${this.convertHtml(val)}</div></div>`;
}

we transform the inner string via htmlEntities:

if (!isNode(val)) {
  const safeHtml = htmlEntities(this.convertHtml(val as string));
  val = `<div><div>${safeHtml}</div></div>`;
}

We already have htmlEntities imported at the top of SvgCanvas2D.ts, so no new imports are required. This change localizes the fix to the tainted data flow identified by CodeQL and addresses all alert variants that stem from unsafe HTML reaching div.innerHTML and the nested nodes/foreignObject created from it.


Suggested changeset 1
packages/core/src/view/canvas/SvgCanvas2D.ts

Autofix patch

Autofix patch
Run the following command in your local git repository to apply this patch
cat << 'EOF' | git apply
diff --git a/packages/core/src/view/canvas/SvgCanvas2D.ts b/packages/core/src/view/canvas/SvgCanvas2D.ts
--- a/packages/core/src/view/canvas/SvgCanvas2D.ts
+++ b/packages/core/src/view/canvas/SvgCanvas2D.ts
@@ -1114,7 +1114,8 @@
     let val = str;
 
     if (!isNode(val)) {
-      val = `<div><div>${this.convertHtml(val)}</div></div>`;
+      const safeHtml = htmlEntities(this.convertHtml(val as string));
+      val = `<div><div>${safeHtml}</div></div>`;
     }
 
     if (document.createElementNS) {
EOF
@@ -1114,7 +1114,8 @@
let val = str;

if (!isNode(val)) {
val = `<div><div>${this.convertHtml(val)}</div></div>`;
const safeHtml = htmlEntities(this.convertHtml(val as string));
val = `<div><div>${safeHtml}</div></div>`;
}

if (document.createElementNS) {
Copilot is powered by AI and may make mistakes. Always verify output.

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These is a valuable feedback.
This is out of the scope of the PR, and will be managed by #1022

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
packages/core/src/util/domUtils.ts (1)

225-231: ⚠️ Potential issue | 🟠 Major

Type guard is narrower than runtime behavior.

isNode accepts any Element (including SVGElement) at runtime but the predicate narrows to HTMLElement, creating a type soundness issue. Widen the predicate to Element to match the actual runtime check.

Suggested fix
 export const isNode = (
   value: any,
   nodeName: string | null = null,
   attributeName?: string | null,
   attributeValue?: string | null
-): value is HTMLElement => {
+): value is Element => {

@sonarqubecloud

sonarqubecloud Bot commented Feb 5, 2026

Copy link
Copy Markdown

@tbouffard tbouffard marked this pull request as draft February 10, 2026 08:32
@tbouffard

Copy link
Copy Markdown
Member Author

Converted to draft to check feedback from #1000 (review)

@sonarqubecloud

Copy link
Copy Markdown

@tbouffard tbouffard marked this pull request as ready for review March 10, 2026 16:46
@tbouffard tbouffard merged commit 3848855 into main Mar 10, 2026
13 of 14 checks passed
@tbouffard tbouffard deleted the refactor/improve_type_domUtils.isNode branch March 10, 2026 16:50
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

refactor Code refactoring

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants