后端开发教程 - Java、Spring Boot 实战 - msg200.com
7 个 React 应用程序安全提示。🔐
在您的组织中，第一个 React 应用程序的开发耗费了数月的精力，优秀的开发人员以极其严谨的编程方式编写代码，这体现在他们干净的代码实践中，性能指标卓越，用户体验更是无与伦比！时机已到。您刚刚完成了所有主要的部署、DevOps 工作和繁琐的测试。您即将部署这个出色的应用程序，它必将极大地促进您的业务增长。您部署，失败，然后反思……
如果你的应用程序不安全，这些性能指标、用户体验评测、测试等等都毫无意义。在当今世界，数据是地球上最珍贵的宝石。（不，我没开玩笑！ ）如果你的应用程序不安全，或者一个12岁的黑客破解了你的代码来出售劣质产品，你的整个业务都可能瞬间崩溃。因此，每个应用程序都必须首先确保安全，这一点至关重要。作为一名 React 开发者，以下是一些常见的 JSX 代码保护技巧。
1️⃣ 保护你的 HTTP 身份验证
如果您的应用程序具有某些用户登录或创建帐户的身份验证功能，则需要确保其安全，因为通常客户端身份验证和授权会暴露出多个安全漏洞，这些漏洞可能会损坏应用程序内的这些协议。
最突出的是，您可以使用以下方法之一来添加身份验证：
让我们看看如何使用 JWT 进行保护：
❌不要将你的 JWT 令牌存储在 上localStorage。有人可以轻松地使用浏览器的开发工具控制台并编写以下命令来轻松获取此令牌：
console.log(localStorage.getItem('token'))
他们现在可以利用这个令牌将物品发送到其他可能被收集的地点！这对你和你的用户来说都不好。
✔请将您的令牌从localStorage移至HTTP cookie。
✔ 否则，请将您的令牌移动到您的React 应用程序的状态。
❌请勿将用于签署令牌的密钥保留在浏览器中。任何访问您网站的人都可以看到不同的数据、Cookie、令牌等。如果您要发送密钥，您应该知道它们可能会被用来签署一些新的令牌！
✔务必将它们保存在后端。务必在后端对这些密钥进行签名和验证。
✔务必使用长且难以猜测的密钥。就像创建帐户时，密码字段会提示您设置一个强而长的密码一样，这些 JWT 密钥也应如此。
❌不要在客户端解码令牌。尤其是访问令牌。通常，这些访问令牌用于支持应用程序的 API。
✔请务必在您的 上保留一把expiresAt钥匙localStorage。这里有一个简单的方法，教您如何添加到期时间以供参考。
✔务必保持令牌有效载荷较小。有效载荷越大 > 令牌大小越大 > 到达终端时请求量越大 > 用户带宽占用越大 > 应用性能越差。
✔务必确保在任何情况下都使用HTTPS而非 HTTP。这将确保您的 Web 应用拥有有效的证书，并通过安全的SSL连接发送数据。
我最近看到了沃伦的这条评论，很有见地。
2️⃣ 防范 DDoS 攻击
通常，当应用程序安全性不足或服务 IP 掩码存在漏洞时，就会出现此安全漏洞。因此，应用程序无法与服务器交互，从而导致某些服务停止。以下是一些阻止此漏洞的方法：
-
API 的速率限制：你只需限制特定来源对指定 IP 的请求数量即可。如果你使用Axios ，有一个完整的库叫做axios-rate-limit。
-
向 API添加应用程序级别的限制。
-
在服务器上而不是在客户端进行调用。
-
添加一些测试来保护应用层的安全。这里有一篇关于此主题的好文章：
中等的
3️⃣ 防范跨站点脚本（XSS）攻击
XSS 风险相当高，因为攻击者注入的代码会被当作合法的应用代码执行，从而使攻击者能够完全控制用户浏览器中运行的应用程序。它看起来可能很可爱，就像这样：
I'm just an innocent code!<script>alert("Unless I'm not 😈")</script>
以下是具有一些 XSS 保护的相同代码：
I'm just an innocent code!<script>alert("Unless I'm not 😈")</script>
您可能知道，<和分别<被解释为<和>，因此浏览器这次不会将数据与代码混淆。其他一些屏蔽方法包括：
-
使用
createElement()API。 -
使用JSX 自动转义功能。
-
使用
dangerouslySetInnerHTML直接从 React 设置 HTML，而不是使用容易出错的innerHTML。查看以下主题：
设置元素的 innerHTML 和设置元素的 dangerlySetInnerHTML 属性之间有什么“幕后”区别吗？假设我为了简单起见做了适当的清理。
例子：
var test = React.createClass({
render: function(){
return (
<div contentEditable='true' dangerouslySetInnerHTML={{ __html: "Hello" }}></div>
);
}
});
对比
var4️⃣ 防范跨站请求伪造（CSRF）攻击
CSRF 攻击是通过攻击者在您的应用中放置未经授权的 Cookie 或一些非预期的 Cookie 来实施的。它会强制最终用户在当前已通过身份验证的 Web 应用上执行不必要的操作。请注意以下几点，以防止此类攻击发生：
-
使用这些 JWT 令牌进行会话管理。
-
确保您的应用程序只读取存储的 CSRF 令牌。
-
通过向服务器发出经过身份验证的请求来生成相关的令牌标头。
5️⃣ 防止身份验证失败
你输入了身份验证信息，然后轰隆一声……应用程序崩溃，导致凭证数据被盗用。请确保你已准备好以下信息，以防止此类攻击发生：
-
使用基于云的身份验证实现安全访问。这里有一篇关于使用 AWS Amplify 和 Cognito 进行 React 应用身份验证的文章。
6️⃣ 针对库和组件的安全
在 React 应用中使用第三方库、模块或 API 时，风险始终存在。诚然，它们确实帮助我们快速开发功能，但谁知道它们自身的安全漏洞可能会毁掉你的应用呢？
-
始终尝试手动将这些库更新到最新的安全稳定版本。
-
类似地，用较新的组件修补旧版本的组件。
-
在将这些库添加到您的项目之前，请先简要检查其安全漏洞（如果列出），并记下可能的解决方案。
7️⃣ 添加端到端加密
当我第一次得知 WhatsApp 聊天将实现端到端加密时，我简直太开心了！天哪，他们甚至还准备了一份PDF 文件来解释他们是如何做到的……
这种加密类型确保共享的数据只涉及你的 React 应用程序内部，而不会泄露到其他地方。所有第三方都将被拒绝访问任何机密数据。阅读 DEV 上的这篇文章，它详细介绍了在 React 上开发使用端到端加密的聊天应用的整个过程：
下一步去哪里？🤔
请查看以下资源以获取更多帮助：
谢谢阅读，我非常感激！祝你拥有美好的一天。(✿◕‿◕✿)
这就是编程的伟大之处。从一开始就充满快乐和满足！你的第一个程序也是“Hello, World!”吗？
— 英国微软开发者 (@msdevUK) 2020 年 6 月 30 日
图片来源：https://t.co/RLdQCMX7gC #DevHumour #Programming #Developer pic.twitter.com/DAEr5pHNyM