手机网站开发公司,wordpress多用户多模板,网站开发招标评分标准,在线定制平台场景 把公钥硬编码在前端代码文件里#xff0c;被公司安全检测到了要整改#xff0c;于是整理几种常见的前端密钥存储方案。
1. 设置环境变量再读取 在打包或部署前端应用时#xff0c;可以将密钥配置为环境变量#xff0c;在应用运行时通过环境变量读取密钥。这样可以将密…场景 把公钥硬编码在前端代码文件里被公司安全检测到了要整改于是整理几种常见的前端密钥存储方案。
1. 设置环境变量再读取 在打包或部署前端应用时可以将密钥配置为环境变量在应用运行时通过环境变量读取密钥。这样可以将密钥从源代码中分离出来避免意外泄露。
a. 前端设置环境变量 将密钥作为前端应用的环境变量进行配置。但是直接使用环境变量存储密钥也是很危险的前端代码可以被任何人查看和修改这意味着敏感信息可能会被泄露。
步骤 在 .env 文件中设置环境变量 首先在项目根目录下的 .env 文件中设置环境变量. 当然你也可以设置在特定环境的 .env 文件如 .env.production、.env.test等这样可以根据不同的环境设置不同的变量值。
VITE_API_KEY your_api_key_here 在 Vue 组件中读取环境变量
console.log(import.meta.env.VITE_API_KEY) // 打印 API 密钥 但是使用这种方法打包后秘钥仍能在源码中找到。
b. 后端设置环境变量 将密钥存储在后端环境变量中再由前端读取可以提高安全性这样密钥不会在客户端暴露。 后端密钥生成与存储在后端应用中生成和存储密钥。可以使用安全的密钥生成算法来生成密钥并将其存储在后端的安全存储中如数据库或密钥管理服务。 创建API接口创建一个受保护的API接口来向前端提供密钥。为了提高安全性可设置此接口需要身份验证以确保只有经过授权的用户或应用程序可以访问后端的密钥服务。 前端请求密钥前端通过已认证的请求来获取密钥。 对于包含敏感信息的环境变量应该避免将其暴露给前端。如果确实需要在前端使用某些敏感信息考虑使用更安全的机制比如客户端证书或令牌。 2. 配置文件存储 将密钥存储在前端应用的配置文件中。在构建和部署应用时可以将密钥配置为独立的配置文件并在应用启动时读取配置文件中的密钥。 但是在前端应用中使用配置文件来存储密钥也不是一个好的做法因为前端代码包括配置文件最终会被发送到用户的浏览器这意味着任何有意图的攻击者都可以查看、修改甚至篡改这些配置。
3. 使用加密库加密存储 将密钥进行加密并将加密后的密钥存储在前端应用中应用在运行时解密密钥并使用。 这种方法可以提供更高的安全性防止明文密钥泄露。 常见的做法是使用对称加密算法将密钥与应用内部的固定值进行加密存储并在需要使用时进行解密。 选择加密算法选择一个适合的对称加密算法例如 AES高级加密标准。AES 是一种常用的对称加密算法提供了高强度的加密和解密功能。 生成加密密钥使用选择的算法生成加密密钥。 加密密钥将生成的加密密钥与应用内部的某固定值进行加密固定值可以是应用的特定字符串或其他数据。将加密后的密钥存储在前端应用中。 解密密钥在需要使用密钥的时候通过解密算法对加密的密钥进行解密获取原始的密钥值。解密过程需要使用相同的密钥和算法进行解密操作。 以下是一个示例展示如何使用 JavaScript 中的 CryptoJS 库进行加密和解密
// 导入 CryptoJS 库
const CryptoJS require(crypto-js);// 固定值用于加密密钥
const fixedValue your_fixed_value;// 原始密钥
const originalKey your_secret_key_value;// 加密密钥
const encryptedKey CryptoJS.AES.encrypt(originalKey, fixedValue).toString();// 解密密钥
const decryptedKey CryptoJS.AES.decrypt(encryptedKey, fixedValue).toString(CryptoJS.enc.Utf8);console.log(decryptedKey); // 输出原始密钥 加密存储并不是绝对安全的它只是增加了密钥泄露的难度。对于高安全性要求的应用建议将敏感操作放在服务器端进行避免将加密密钥暴露给前端应用的客户端。
4. 混淆技术 混淆是防止JavaScript代码被轻易阅读和理解的有效方法它通过一系列自动化的工具转换代码结构但不改变其功能。混淆虽然提高了代码的保密性但依然不能防止专业人员通过耐心分析来理解代码。因此它更多是增加攻击者的分析成本而不是绝对的保护措施。 关于混淆详细请看这篇前端JavaScript代码混淆加密原理
5. 安全存储服务 将密钥存储在专门的密钥管理服务中如密钥管理系统Key Management SystemKMS。前端应用在运行时通过安全的协议和认证机制与密钥管理服务通信获取需要的密钥。这样可以将密钥的管理和保护责任交给专门的服务提供更高级别的安全性。 这也是一种将敏感数据安全地存储在后端服务器上的方法以确保数据的保密性和完整性。 实际应用 综合来看相对比较安全的是方法1b和5。 由于只是为了解决公司安全检测故只选择了1a3来存储密钥其他方法可以考虑作为后续优化方向。 其中CryptoJs库的使用前端加密JS库--CryptoJS 使用指南
// ------------env.d.ts------------
declare const _MY_GLOBAL_KEY_: string// ------------vite.config.ts------------
// base64加密后的密钥(注意此处存储的密钥已经使用base64加密过了)
const PRIVATE_KEY xxxxxxxxxxxx
export default defineConfig(({ command, mode }) {return {// ......// 定义全局常量用于环境变量注入或其他编译时替换define: {_MY_GLOBAL_KEY_: PRIVATE_KEY}}
})// ------------crypto.js------------
import CryptoJS from crypto-js
import JSEncrypt from jsencrypt
const decryptKEY CryptoJS.enc.Base64.parse(_MY_GLOBAL_KEY_).toString(CryptoJS.enc.Utf8) // Base64解密// rsa解密
export function rsaDecrypt(decryStr) {const decryptor new JSEncrypt()decryptor.setPrivateKey(decryptKEY)const decrypted decryptor.decrypt(decryStr)return decrypted
}// 发送请求获取token
getTokenApi().then(res {const { resultData } reslet decryptData nulltry {decryptData JSON.parse(CryptoJS.enc.Base64.parse(resultData).toString(CryptoJS.enc.Utf8))} catch (error) {console.log(error: , error)}s3Data.value decryptDatas3Data.value.ak rsaDecrypt(decryptData.ak) //RSA解密s3Data.value.sk rsaDecrypt(decryptData.sk) //RSA解密formData.bucketName s3Data.value.bucketNames3.value new window.AWS.S3({accessKeyId: s3Data.value.ak,secretAccessKey: s3Data.value.sk,endpoint: s3Data.value.endpoint,sessionToken: s3Data.value.token})}).catch(err {proxy.$errorHandle(err)})拓展
Base64 经常在提到加密算法时看到Base64的使用Base64的输入是二进制数据输出是字符串它是一种将二进制数据转换为字符的方法。通过Base64编码出的字符串只包含ASCII基础字符如小写字母a-z、大写字母A-Z、数字0-9、符号、/。 例如字符串ShuSheng007对应的Base64为U2h1U2hlbmcwMDc。其中比较特殊是填充符。 要注意的是Base64不是加密算法仅仅是一种编码方式其算法也是公开的所以并不能依赖它进行加密。 为什么要在加密算法中使用Base64 既然Base64不是加密算法为什么加密算法又要使用它呢。 我们知道加密是将明文、可读的数据转换为加密的、无法阅读的乱码。然而加密的输出是包含不可打印字符的二进制数据。为了安全传输或存储这些加密数据需要把他们编码为能够正常处理的 ASCII 字符串。这就是 Base64 编码在加密算法中的作用。 此外Base64编码是很适合在HTTP环境下使用的因为HTTP是以传输文本为主的协议而Base64算法正好可以把传输内容变成文本。 而且由于base64的特性其大小增加很有限编码后不会明显扩大原有文件的大小。 AES加密算法 高级加密标准(AESAdvanced Encryption Standard)是最常见的对称加密算法。 对称加密算法就是加密和解密用相同的密钥具体的加密流程如下图 明文P 指没有经过加密的数据。
密钥K 用来加密明文的密码在对称加密算法中加密与解密的密钥是相同的。 密钥为接收方与发送方协商产生的但不可以直接在网络上传输否则会导致密钥泄漏。通常是通过非对称加密算法加密密钥然后再通过网络传输给对方对方再解密。
AES加密函数 把明文P和密钥K作为加密函数的参数输入则加密函数会输出密文C。
密文C 经加密函数处理后的数据。
AES解密函数 把密文C和密钥K作为解密函数的参数输入则解密函数会输出明文P。 对称加密与非对称加密的区别
对称加密算法 对称加密算法的加密和解密用的密钥是相同的。这种加密方式加密速度非常快适合经常发送数据的场合。缺点是使用的密钥它本身的传输比较麻烦一般用非对称加密来传输。
非对称加密算法 非对称加密算法的加密和解密用的密钥是不同的。通常加密解密的速度比较慢适合偶尔发送数据的场合。可以用非对称加密算法来串数对称加密算法使用的密钥。常见的非对称加密算法为RSA、ECC和EIGamal。
