Skip to content

fix: avoid TrustedHTML sink for style injection - #809

Open
nrps9909 wants to merge 1 commit into
react-component:masterfrom
nrps9909:codex/trusted-types-style-text
Open

fix: avoid TrustedHTML sink for style injection#809
nrps9909 wants to merge 1 commit into
react-component:masterfrom
nrps9909:codex/trusted-types-style-text

Conversation

@nrps9909

@nrps9909 nrps9909 commented Aug 27, 2026

Copy link
Copy Markdown

Fixes #555.

Problem

injectCSS and the existing-node path in updateCSS assign CSS through HTMLStyleElement.innerHTML. Under an enforced Trusted Types policy, that is an HTML injection sink and throws TypeError: This document requires 'TrustedHTML' assignment, preventing Ant Design styles from being installed.

Change

  • Write and compare style contents through textContent instead. CSS is plain text, so this preserves the supplied stylesheet without invoking the HTML parser or requiring a TrustedHTML policy.
  • Add a regression that makes the style innerHTML setter throw, then covers both initial injection and updating an existing managed style.

Verification

  • Before the source change, the new focused test failed at injectCSS with the reported TrustedHTML error.
  • Focused dynamicCSS suite: 13/13 passed.
  • Full suite: 29 suites passed; 183 tests passed, 1 existing skip.
  • npm run tsc: passed.
  • npm run compile: passed.
  • npm run lint: 0 errors (13 existing unused-disable warnings).
  • Prettier and git diff --check: passed.

I checked all current open PR changed files. #496 touches the nonce assignment in the same module but leaves innerHTML unchanged and addresses a separate CSP report; there is no open PR implementing this Trusted Types fix.

AI assistance disclosure: Codex was used to trace the current sink, build the fail-before/pass-after regression, run validation, audit open PR overlap, and draft this description. I verified the behavior and exact diff locally.

Summary by CodeRabbit

  • Bug Fixes

    • 改进动态样式注入与更新,增强对严格内容安全策略环境的兼容性。
    • CSS 内容将按纯文本处理,避免因 HTML 内容限制导致样式应用失败。
  • Tests

    • 新增相关测试,验证样式在受限环境下仍能正确注入和更新。
@vercel

vercel Bot commented Aug 27, 2026

Copy link
Copy Markdown

@nrps9909 is attempting to deploy a commit to the afc163's projects Team on Vercel.

A member of the Team first needs to authorize it.

@coderabbitai

coderabbitai Bot commented Aug 27, 2026

Copy link
Copy Markdown

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: eb750b34-f89f-4170-8aff-c5d4cb8a419c

📥 Commits

Reviewing files that changed from the base of the PR and between d1045f4 and 5c6618f.

📒 Files selected for processing (2)
  • src/Dom/dynamicCSS.ts
  • tests/dynamicCSS.test.tsx

Included review availability: Your plan provides up to 4 included reviews per hour; 3 remain after this review.


Walkthrough

动态 CSS 注入和更新改用 textContent。新增测试覆盖 Trusted Types 禁止 innerHTML 赋值的场景,并验证样式内容仍可正常写入和更新。

Changes

动态 CSS 兼容性

Layer / File(s) Summary
样式写入与兼容性验证
src/Dom/dynamicCSS.ts, tests/dynamicCSS.test.tsx
injectCSSupdateCSS 使用 textContent 写入和比较 CSS。测试模拟 innerHTML setter 抛出 TypeError,并在测试结束后恢复属性。

Estimated code review effort: 2 (简单) | ~10 minutes

Merge Risk: ⚪ Minimal · up to 5c661

This PR makes dynamic stylesheet injection compatible with enforced Trusted Types by writing CSS as plain text instead of HTML. The change is localized and validated, with no actionable merge-blocking risk remaining beyond normal checks and review.

Poem

小兔写下 textContent,
样式轻轻落入节点。
innerHTML 遇到阻拦,
CSS 仍然顺利更新。
测试收好 setter,
月光下代码更稳。

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 3 functions across 2 files. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed 标题“fix: avoid TrustedHTML sink for style injection”准确描述了本次将样式写入从 innerHTML 改为 textContent 的主要变更。
Linked Issues check ✅ Passed 变更满足 Issue #555 的主要目标。injectCSS 和 updateCSS 现在使用 textContent,避免通过 HTMLStyleElement.innerHTML 触发 TrustedHTML 要求。新增回归测试覆盖初始注入和已有样式更新场景。
Out of Scope Changes check ✅ Passed 所有变更都围绕 Issue #555 展开。源代码仅调整样式内容的写入和比较方式,测试仅验证 Trusted Types 场景。未发现无关或超出范围的代码变更。
  • Fix all pre-merge checks with AI
✨ Finishing Touches 💡 1
🛠️ Fix failing CI checks 💡
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Warning

Some tools did not complete. Review the errors below.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint install failed: private package registry requires authentication. Disable ESLint in CodeRabbit settings or use public packages.


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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

1 participant