我想防止我的 React 应用程序出现安全漏洞

Question

我发现了 7 个安全漏洞（4 个高漏洞和 3 个中漏洞）。我没有找到任何解决方案来解决这些问题。

我使用 Checkmarx 应用程序安全测试工具发现了这些漏洞。详情如下：

1. Client_DOM_Code_Injection
2. Client_DOM_XSS
3. 客户端_潜在_XSS
4. Unchecked_Lop_For_Loop_Condition

如何修复所有这些安全漏洞？ 任何答案都值得赞赏。

Answer 1

这个问题曾经在此链接中被问过how-can-i-protect-my-react-app-from-security-vulnerability（根据@jonrsharpe刚刚所说的），但不幸的是我发现该链接不起作用，所以我想为您总结并完善我在互联网上找到的有关此主题的以下文章：（因为我也想在 stackoverflow 上问这个问题）。因此，我们将继续讨论您的问题：解决您的 React 应用程序中的安全漏洞，并防止大多数根据 kali linux 系统工作的初学者黑客（脚本小子）通过专业渗透测试人员编写的软件来发现您的弱点，您可以阅读链接hacker-types。了解每种类型的漏洞并启动以下适当的修复程序非常重要。以下是您提供给我的列表中每个漏洞的详细信息以及解决该漏洞的步骤：

• Client_DOM_Code_Injection
• Client_DOM_XSS
• 客户端_潜在_XSS
• Unchecked_Lop_For_Loop_Condition

说明Client_DOM_Code_Injection： 根据我发现的链接：https://portswigger.net/kb/issues/00200320_javascript-injection-dom-based当攻击者可以将恶意代码直接注入到 DOM 中时，就会发生这种情况，可能导致脚本执行。

补救措施：

1. 仅在绝对必要时才危险地使用 SetInnerHTML，并确保内容得到净化。

2. 清理并验证所有用户输入。也许尝试添加额外的 html 代码，如所需的。

示例代码：

// Unsafe
<div dangerouslySetInnerHTML={{ __html: userInput }} />

// Safe
import DOMPurify from 'dompurify';
<div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(userInput) }} />

Explanation Client_DOM_XSS:
According to a link and tips to fix your application: https://cheatsheetseries.owasp.org/cheatsheets/DOM_based_XSS_Prevention_Cheat_Sheet.html

补救措施：

1. 在 DOM 中渲染用户生成的内容之前对其进行转义。
2. 除非必要，否则避免危险地使用 SetInnerHTML，并清理任何 HTML 内容。

我所做的代码例如：

// Unsafe
<div dangerouslySetInnerHTML={{ __html: userContent }} />

// Safe
import DOMPurify from 'dompurify';
<div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(userContent) }} />

解释 Client_Potential_XSS（我最喜欢的主题）： 我找到了一个链接“https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html”，其中包含有关写作的解释

• &&
• < <

• >

• “”
• ''

从 JavaScript 写入 HTML。这实际上是潜在的 XSS 漏洞，表明用户输入可能无法正确清理或转义的地方。

补救措施：

1. 使用 React 的内置机制安全地处理 HTML。

示例代码：

// Unsafe
const userInput = "<img src='x' onerror='alert(1)'>";
<div>{userInput}</div>

// Safe
<div>{escape(userInput)}</div>

function escape(str) {
 return str.replace(/[&<>"']/g, function(match) {
 const escapeMap = {
 '&': '&amp;',
 '<': '&lt;',
 '>': '&gt;',
 '"': '&quot;',
 "'": '&#39;',
 };
 return escapeMap[match];
 });
}

Unchecked_Loop_For_Loop_Condition 说明： 这样做是一种安全预防措施，但不是强制性的，其解释是：未经检查的循环条件可能会导致性能问题或无限循环，特别是如果它们依赖于用户输入。

补救措施：

1. 设置循环的最大限制，防止无限循环。

视力代码：

// Unsafe
for (let i = 0; i < userInput.length; i++) {
 // loop logic
}

// Safe
const maxLoopLimit = 1000;
for (let i = 0; i < Math.min(userInput.length, maxLoopLimit); i++) {
 // loop logic
}

提示：确保所有项目依赖项都是最新的。谁知道呢，用我在 npm 中找到的命令：

npm outdated

您还可以选择更新它（如果某些内容已过时）：

npm update