请定期审查应用程序的安全性，因为任何疏忽都可能使您、您的团队、您的用户甚至您的服务器面临严重漏洞利用的风险。请勿忽略此页面，因为您认为自己无所不知。

我们为那些刚接触安全领域的人收集了一些最佳实践，以及一些安全专业人员在 Vue 生态系统中的见解。随着我们通过自身的研究和安全社区的出版物了解到风险，我们将修订和补充本文档。

Vue 安全风险

用户输入和 v-html 的危险

v-html 指令是通过编程方式渲染标记的绝佳方式，但即使 Vue 文档也附带了此警告

“在您的网站上动态渲染任意 HTML 非常危险，因为它很容易导致 XSS 漏洞。仅对可信内容使用 HTML 插值，切勿对用户提供的内容使用。”

如果您不知道这意味着什么，请快速查看 OWASP 对XSS（又名跨站点脚本） 的看法。

公平地说，这是很好的建议，但请勿掉以轻心。请像攻击者一样思考，他们会想方设法，进行社会工程学、欺骗、网络钓鱼并窃取进入您的系统。如果出现 webpack 加载程序漏洞并以恶意方式更改您的页面怎么办？如果有人进行恶意且别有用心的 PR 提交怎么办？如果突然第三方 API 发生变化，而不是纯文本开始发送相同的结构但内容不同怎么办？如果您认为安全的系统实际上已被后门入侵怎么办？如果初级开发人员对代码进行意外且具有根本威胁性的更改，并且未得到适当审查怎么办？（是的，愚蠢有时和恶意一样危险！）关键是，请通过为最坏情况做准备并强化所有系统来预测意外情况。

请使用v-pre 指令，如果您需要采取额外的预防措施。

vue-i18n

Vue 的准官方国际化包允许您在密钥的值中存储 html 并可能渲染它们。如果用户无法修改这些值，则您应该没问题 - 但请确保您信任（即审查）翻译人员！我们的建议（尽管工作量更大，并且会减慢 HMR 速度）是请使用模板插值。

eval()

尽管您可能很想使用eval()，即使您知道自己在做什么，也请勿使用。

Quasar 组件

一些 Quasar 组件和插件可以配置为允许渲染“不安全内容”。这是一项选择加入功能，通过使用*-html 类型布尔道具执行。下面将讨论这些组件。

QSelect

如果您没有自定义菜单相关的作用域插槽（即option 作用域插槽），请阻止组件在标签和子标签中渲染 HTML（通过不通过组件道具启用它）。一般来说，这不是用户提供的数据。如果您正在自定义此插槽，则您有责任自己进行清理。

QChat & Emoji

QChatMessage 组件默认不以 HTML 格式显示内容。但是您可以启用它（通过*-html 道具），在这种情况下，您应该清理内容。

加载

许多开发人员要求加载插件能够显示 HTML，因此默认情况下启用了此功能，但如果您担心，请添加sanitize: true，您消除了此风险。

通知

默认情况下不启用使用 HTML 样式设置通知插件的功能，但如果您确实设置了布尔道具html: true，则您有责任对其进行清理。

对话框

默认情况下不启用使用 HTML 样式设置对话框插件的功能，但如果您确实设置了布尔道具html: true，则您有责任清理标题和消息。

QInput

任何允许用户输入击键、从缓冲区粘贴或拖放文件的字段都是安全风险。我们不会深入讨论这一点的细节，但请记住，维护安全是您的责任。只有您才能防止帮助台故障！

QEditor

此组件允许用户实际创建 HTML（甚至粘贴）。如果您要保存此内容并将其显示给其他用户，则需要在服务器端对其进行验证。在这种情况下，请删除<script></script> 和<iframe></iframe>。您可以访问文档中的v-html 与双花括号 示例，以使用 QEditor 组件进行操作，并查看两种渲染方法将提供什么。QEditor 没有sanitize 标签。此外，如果您创建自定义按钮，则您有责任确保它们安全。已警告。

处理文件

那么如何验证和清理文件呢？虽然这有点超出了“前端框架”的范围，但我们知道你们中的许多读者也会将用户创建的文件存储在服务器上。如果您只是存储它们（并且不以任何方式处理它们），则**必须**通过检测魔数来验证文件是否为适当的类型。**必须**考虑使用ClamAV检查文件是否存在已知的病毒特征。

图像

如果您允许用户将图像上传到您的服务器，您应该知道许多常用的模块仅仅检查文件后缀。制作一个仅表面上看起来像是图像的图像非常简单。**必须**通过检查魔数来验证文件是否与其声明一致，为此，请考虑使用is-image。虽然您可以在浏览器中使用此方法检查魔数，但另一种方法是让用户将图像加载到画布中，然后直接从画布上传。 Vue-croppa 是一个很棒的前端工具来完成此操作。

归档文件

用于目录遍历的归档文件解压缩攻击是一个真正的安全问题，如果不解压缩文件，几乎不可能检测到。如果您能够避免接受此类媒体，请这样做。否则，在 Linux 上，**必须**使用简单的less / lesspipe 和.lessfilter 对这些文件进行预处理，并配合您的自定义工作流程。

密码

**不要**以明文形式保存密码，事实上 - **不要**保存它们。**必须**保存安全的哈希值，并根据使用安全盐和适当算法的方案在内存中计算它们。**必须**限制密码的长度（最小和最大字符数），但上限要足够高，以至于任何合法用户都不会达到。**必须**考虑一个高度安全密码重置应用程序流程，并允许用户根据自己的偏好配置它。这是每个项目独有的过程，因此我们无法告诉您如何解决此问题。不过，这里有一些有用的链接

• OWASP 速查表
• FIDO 指南

密码学

• **不要**创建您自己的加密解决方案
• **不要**以明文形式存储个人信息
• **不要**创建您自己的加密解决方案（故意重复）
• **不要**忽略任何实现细节
• **不要**创建您自己的加密解决方案（故意重复）
• **不要**使用 MD5 或 SHA1
• **不要**创建您自己的加密解决方案

阅读有关此主题的信息并正确选择工业级解决方案的绝佳场所是libsodium

分发

网络

• **不要**使用 http
• **不要**将敏感数据存储在 JWT 中
• **必须**使用 https / wss
• **必须**手动审核您的证书
• **必须**验证用户
• **必须**记住 JWT 本身未加密
• **必须**使用 JWE 而不是 JWT，并使用 AES256 CBC + HMAC SHA512
• **必须**加倍努力并执行完整的 OWASP 网络审计

Cordova / Capacitor

• **不要**使用 iframe
• **不要**为 Android Gingerbread 打包
• **必须**对所有构建进行签名
• **必须**对所有静止数据进行加密

Cordova 文档页面详细介绍了如何保护 Cordova，虽然它看起来过时了，但信息大多仍然准确。

Electron

Electron 是一种非常特殊的情况，因为 XSS 和远程代码注入实际上会导致完全危害最终用户（甚至开发人员）的设备。

• **不要**禁用websecurity
• **不要**启用远程代码执行
• **必须**阅读我们关于增强Electron 安全性 的指南。

SSR

当您使用 SSR 模式生成项目时，会为您提供一个最小的 Express 服务器。您有责任加强您的环境以保护您的服务器和用户。为此，我们提供了一系列重要的 HEADERS，您可以考虑并在项目进入生产阶段之前有选择地激活它们（请参阅src-ssr/index.js）。重要的是要记住，HEADERS 并非牢不可破，因为浏览器供应商需要遵守它们 - 例如，如果您的内容安全策略使用sandbox 值，Chrome 将中断 PDF 查看。

• **不要**忘记设置限制性头部
• **不要**认为仅靠头部就能保护您免受所有攻击
• **必须**阅读有关头部的信息

环境安全

更安全意味着需要考虑很多事情，您遵守以下指南越多，攻击面就越小。

运营安全

审核您的开发系统的工作方式

• **不要**保留不需要的软件
• **必须**使用具有较小占用空间和启用安全功能的操作系统和发行版（例如 SELinux）
• **必须**确保机器上的所有软件都是最新的（尤其是 NODE）
• **必须**使用密码管理器
• **必须**在任何可能的地方使用 2FA

审核您的生产环境的工作方式

• **不要**认为安全通过模糊处理会在您受到攻击时有所帮助
• **不要**让不需要的端口保持打开状态
• **不要**假装容器或虚拟机本身就能保证您的安全
• **不要**停止保持警惕
• **必须**关闭对服务器的密码和 root 访问权限
• **必须**使用安全的传输协议（SSH、HTTPS、SFTP、WSS）
• **必须**安装 fail2ban 和 rkhunter
• **必须**定期分析您的日志
• **必须**对静止数据进行加密
• **必须**使用高级媒体类型分析
• **必须**使用 ClamAV 检测受感染的文件
• **必须**定期进行系统维护
• **必须**从允许/可用的类型中删除旧的密码
• **必须**使用 CSP 头部保护用户

组织和存储库安全

这是每个团队都应该注意并思考的事情。**必须**考虑谁可以访问您的存储库，如何合并提交以及如何发布资产。以下是一些需要记住的好东西

• **不要**将敏感数据放在源代码中
• **不要**忽略yarn audit 或npm audit 报告
• **不要**盲目依赖第三方服务
• **必须**在合并到主分支之前要求进行审查
• **必须**要求审查者/代码提交者使用 2FA
• **必须**要求签名的提交
• **必须**认真对待 GitHub 安全警告
• **必须**进行深度代码审查
• **必须**审查关键的第三方库，尤其是任何处理真实文件的内容
• **必须**固定关键库的版本
• **必须**提交包锁定文件
• **必须**将.env 文件添加到您的.gitignore 中

最后说明

安全不是安心，而是知识的实际应用，需要警惕和意识。**不要**停止关注安全，**不要**认为您做得足够了。您总能做更多的事情，始终会有新的漏洞需要注意。但其中最大的安全威胁是懒惰，所以穿上你的外鞋，向上滚动页面，并**必须**阅读有关 XSS 的 OWASP 链接。我们不会告诉任何人的。