Security: XSS via v-html with user-controlled announcement

[tuanaiseo]

Problem

The About.vue component renders the announcement using v-html without sanitization. This allows arbitrary HTML injection if the announcement is user-controlled.

Severity: high
File: frontend/src/views/common/About.vue

Solution

Sanitize the announcement content using DOMPurify before rendering with v-html.

Changes

• frontend/src/views/common/About.vue (modified)

Testing

• Existing tests pass
• Manual review completed
• No new warnings/errors introduced

Summary by CodeRabbit

Bug Fixes

• 公告内容显示处理已优化，现已进行 HTML 清理，确保显示稳定可靠。

[coderabbitai]

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: 9a649e3b-04a2-4138-a6de-0425ff2b1878

📥 Commits

Reviewing files that changed from the base of the PR and between add0124 and 506eda8.

📒 Files selected for processing (1)

• frontend/src/views/common/About.vue

---

📝 Walkthrough

操作说明

About.vue 在 script setup 中新增 computed 和 dompurify 依赖，创建 safeAnnouncement 计算属性对 announcement 进行 HTML 清理，模板中改用清理后的内容进行渲染。

变更

公告安全

层级 / 文件	摘要
公告 HTML 清理与渲染 frontend/src/views/common/About.vue	引入 dompurify 和 computed，创建 safeAnnouncement 对 announcement 执行 HTML 清理，v-html 指令目标从未过滤数据改为过滤后数据。

评估代码审查工作量

🎯 2 (简单) | ⏱️ ~8 分钟

诗

🐰 公告来访时需洗手，
清洁 HTML 护网站安康，
dompurify 是我们的洗手液，
XSS 病毒被拒之门外，
代码精简而护卫周全~ 🛡️

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	PR标题准确总结了主要变更：修复About.vue中通过v-html渲染用户控制的announcement导致的XSS安全漏洞，与代码变更完全对应。
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[dreamhunter2333]

感谢贡献。这个 PR 的方向是对的，但合并前还需要两个小修改：

1. announcement 在 <script setup> 中是 ref，当前 DOMPurify.sanitize(announcement) 会传入 ref 对象，可能渲染成 [object Object]；请改为 DOMPurify.sanitize(announcement.value)。
2. 公告还有另一个渲染入口：frontend/src/api/index.js 中的 notification 仍然使用 innerHTML: announcement.value，这里也需要同步 sanitize，否则启动通知弹窗仍保留同样的 XSS 风险。

Thanks for the contribution. The direction of this PR is correct, but two small changes are still needed before merge:

1. announcement is a ref in <script setup>, so DOMPurify.sanitize(announcement) passes the ref object and may render as [object Object]; please use DOMPurify.sanitize(announcement.value) instead.
2. There is another announcement rendering path in frontend/src/api/index.js: the notification still uses innerHTML: announcement.value. That path should be sanitized as well, otherwise the startup notification keeps the same XSS risk.