HTML5如何对URL参数进行加密_HTML5URL参数加密处理方法【入门】
HTML5不提供URL参数加密功能，需用JavaScript实现，推荐Web Crypto API的AES-GCM加密；明文传参易泄露于地址栏、日志等，存在越权风险。
HTML5 本身不提供 URL 参数加密功能，加密需借助 JavaScript 实现，核心思路是：在发送前对参数值进行加密（如 AES、RSA 或简单 Base64 编码），接收后解密还原。但要注意——Base64 不是加密，只是编码；真正安全需用 Web Crypto API 或成熟库。
为什么不能直接用 query string 明文传敏感参数？
URL 会暴露在浏览器地址栏、服务器日志、代理记录、Referer 头中，且容易被截获或篡改。例如：?id=123&token=abc 中的 token 一旦泄露，可能引发越权访问。
推荐方案：使用 Web Crypto API 做对称加密（AES-GCM）
现代浏览器原生支持，安全性高，无需引入第三方库。关键步骤如下：
- 生成密钥（可从密码派生，或服务端统一分发）
- 用 AES-GCM 加密参数对象（先 JSON.stringify，再加密）
- 将密文 + IV + 认证标签
组合为 URL 安全字符串（如 Base64URL 编码）
- 拼入 URL，例如：
?data=eyJhbGciOi...&iv=Zm9vYmFy - 接收页用相同密钥和 IV 解密还原参数
快速上手：用 crypto.subtle 简单示例（仅限 HTTPS 环境）
以下代码实现参数加密并构造 URL：
// 加密函数（需在 HTTPS 或 localhost 下运行）
async function encryptParams(params, password) {
const encoder = new TextEncoder();
const data = encoder.encode(JSON.stringify(params));
const keyMaterial = await window.crypto.subtle.importKey(
"raw", encoder.encode(password), { name: "PBKDF2" }, false, ["deriveKey"]
);
const key = await window.crypto.subtle.deriveKey(
{ name: "PBKDF2", salt: new Uint8Array(16), iterations: 100000, hash: "SHA-256" },
keyMaterial, { name: "AES-GCM", length: 256 }, false, ["encrypt", "decrypt"]
);
const iv = window.crypto.getRandomValues(new Uint8Array(12));
const encrypted = await window.crypto.subtle.encrypt(
{ name: "AES-GCM", iv }, key, data
);
return {
data: btoa(String.fromCharCode(...new Uint8Array(encrypted))),
iv: btoa(String.fromCharCode(...iv))
};
}
// 使用示例
encryptParams({ userId: 456, action: "edit" }, "my-secret-key").then(({ data, iv }) => {
const url = `page.html?data=${encodeURIComponent(data)}&iv=${encodeURIComponent(iv)}`;
location.href = url;
});
更实用的选择：用第三方轻量库（如 CryptoJS 或 tweetnacl）
若需兼容旧浏览器或简化开发，可引入：
- CryptoJS：支持 AES、SHA 等，语法简洁，适合学习过渡
- TweetNaCl：体积小、审计充分，适合做公钥加密（如用 RSA 公钥加密会话密钥）
- 注意：所有前端加密都不可替代服务端校验——前端加密防窥探，服务端必须验证签名与权限
