那个可能悄无声息破坏我功能的安全修复

在开发软件时，安全始终是首要任务。但有时候，安全修复可能会无意中破坏功能。随着开发者继续整合新功能并同时确保其应用程序保持安全，这个话题在今天尤为相关。

引言

最近，Forem（驱动 DEV Community 的开源平台）添加了一个新功能。这个功能允许用户使用 Mermaid 创建图表，Mermaid 是一个从文本渲染图表的流行工具。然而，在这个功能的开发过程中，引发了一个安全警报，可能会导致意想不到的问题。

新功能

Mermaid 图表支持意味着用围栏括起来的 Mermaid 代码块现在会渲染成实际的图表，而不仅仅是纯文本。例如，一个简单的流程图可以直接显示在帖子中，增强了沟通的视觉效果。

安全顾虑

在整合这个功能时，由于使用了 innerHTML 将用户生成的内容插入到文档对象模型 (DOM) 中，触发了安全警报。这种做法可能导致跨站脚本 (XSS) 等漏洞，攻击者可以借此将恶意脚本注入其他用户查看的网页中。

建议的修复

为了解决这个安全顾虑，推荐的解决方案是使用名为 DOMPurify 的库对内容进行清理。这个库通过在浏览器中渲染输入之前对其进行清理，帮助防止 XSS 攻击。

意外的后果

然而，应用这个修复产生了一个意外的后果。它导致某些图表类型中的标签被移除。这个问题没有引起任何崩溃或测试失败，但这意味着图表在渲染时缺少了重要的文本元素，这让它们变得不那么有用了。

开发过程

开发过程包括几个步骤：

第 1 步：实现功能

• Mermaid 图表支持被整合到了 Forem 中。

第 2 步：解决安全警报

• 引发了一个关于使用的安全警报 innerHTML.
• 建议的修复是使用 DOMPurify 清理输入。

第 3 步：测试修复

• 在实施修复后，进行了测试以确保一切按预期工作。
• 人们发现图表中缺少了标签，导致了混淆。

关键要点

这种情况突显了在应用安全修复时进行彻底测试的重要性。确保更改不会破坏现有功能至关重要。以下是一些经验教训：

1. 清理会改变输出：添加清理器可以改变渲染的内容，因此在应用此类修复后验证输出非常重要。
2. 静默失败存在问题：静默失败的配置设置可能导致意外行为，使调试变得更加困难。
3. 彻底测试：始终测试安全修复，以确保它们不会无意中破坏功能。

结论

在 Forem 中整合 Mermaid 图表支持是一个很好的补充。然而，旨在保护用户的安全修复也暴露了需要解决的潜在问题。这段经历提醒人们，在软件开发中需要把握安全与功能之间的微妙平衡。

优点

• 通过图表增强视觉沟通。
• 通过清理用户生成的内容来提高安全性。
• 鼓励编码和测试中的最佳实践。

缺点

• 可能导致意外后果，例如图表中缺少标签。
• 静默失败使得难以识别问题。
• 需要彻底的测试以确保功能保持完好。

警告

本文仅供教育目的使用。在实际应用程序中，必须用实际数据替换任何占位符值。读者在依赖这些声明之前，应向原始来源核实。

常见问题

• DOMPurify 是什么？ — DOMPurify 是一个用于清理 HTML 和防止 XSS 攻击的库。
• 什么是跨站脚本 (XSS)？ — XSS 是一种安全漏洞，允许攻击者将恶意脚本注入网页中。
• 图表中的标签怎么了？ — 安全修复无意中从某些图表类型中移除了标签，而没有引起错误。
• 为什么在安全修复后测试很重要？ — 测试可确保安全更改不会破坏现有功能。
• Mermaid 图表支持是什么？ — 它允许用户在 Forem 平台上直接从文本创建和渲染图表。
• 清理是如何影响输出的？ — 清理可能会移除或更改输出中的元素，这可能导致内容缺失。

标签

#security #javascript #webdev #opensource #DOMPurify #XSS #Mermaid #Forem #DEV #programming