后端开发教程 - Java、Spring Boot 实战 - msg200.com
JavaScript 安全：保护前端的简单实践
我不知道你的情况，但我的职业生涯始于一家小型机构的前端开发人员，那里没人关心安全问题。后来我转到大公司负责更大的项目，但我仍然对安全漠不关心，因为没有人教过我更好的安全知识，这最终给我带来了麻烦。
了解如何保护 JavaScript 代码的安全可以改变这种现状，并帮助我们保护应用程序和用户。
本文将探讨一些在合理的情况下实施不会对 JavaScript 开发人员造成伤害的安全实践。
上面的一些主题是我在学习该主题时学到的，但还有更多方法可以保证代码安全。我只是分享一些简单的方法，帮助你入门。
PS：是的，我问了AI一些问题，并让它帮我举例。PS2
：是的，IA帮我设计了封面图片，因为我知道自己的弱点，哈哈
1. 保持依赖项最新
过时的库可能会使您的应用程序面临安全漏洞。保持所有内容更新有助于您避免已修复的已知问题。
-
使用包管理器：npm（节点包管理器）是一个很好的工具，可以帮助您管理和更新您的库。
-
定期检查：运行 npm outdated 查看哪些包已过时。
-
定期更新：使用 npm update 将您的软件包升级到最新版本。
npm update # Updates your packages
- 自动化安全更新：npm audit 等工具可以识别并建议修复安全漏洞。
npm audit fix # Fixes packages with known vulnerabilities
2. 使用简单的安全标头
安全标头告诉浏览器在处理网站内容时如何表现，这有助于防止某些类型的攻击，如跨站点脚本和数据注入。
我们可以使用内容安全策略（CSP），这是一个安全标头，有助于阻止未经授权的脚本在您的网站上运行，从而可以防止许多攻击。
从简单开始：添加一个仅允许来自您网站的脚本的基本 CSP 标头。
<!-- Add to the <head> section of your HTML -->
<meta http-equiv="Content-Security-Policy" content="script-src 'self';">
此行意味着只能执行属于您网站的脚本，而不能执行来自其他地方的任何脚本。
3. 净化用户输入
如果处理不当，用户输入可能会很危险。恶意用户可能会尝试输入可能危害其他用户或您网站的数据。
我们应该始终将输入视为不受信任的，清理来自用户的数据以确保其在应用程序中使用之前是安全的。
当使用用户输入更新网页时，使用 textContent 而不是 innerHTML 以避免执行有害脚本。
const userInput = document.querySelector('#user-input').value;
document.getElementById('output').textContent = userInput;
// Safely add user content to your page
朋友们，我们现在更安全了……
这三个步骤是保护您的 JavaScript 应用程序的良好起点。
我希望您今天能花点时间检查一下您的 JavaScript 项目。检查是否存在过期的库，确保您使用了安全标头，并验证所有用户输入都已安全处理。
小小的步骤就能对你的 Web 应用程序的安全性产生很大的影响。另外，了解这些事情将会对你下一次面试产生很大的帮助 ;)
说到前端……
我们正在构建一个超酷的项目，它将改变你进行 Web 开发的方式😯
感谢阅读，
Pachi💚
文章来源：https://dev.to/buildwebcrumbs/javascript-security-simple-practices-to-secure-your-frontend-18ii