HTML5的Notification API允许网页向用户发送桌面通知，在实际使用中，通知内容可能包含用户昵称、订单信息、验证码等敏感数据，直接发送明文内容存在信息泄露风险，因此对通知内容进行加密是很有必要的。
HTML5通知基础用法
在使用通知之前，需要先获取用户的授权，只有用户允许后才能发送通知，基础的授权和发送流程如下：
// 请求通知权限
if (Notification.permission === 'default') {
Notification.requestPermission();
} else if (Notification.permission === 'granted') {
// 权限已授予，可以直接发送通知
new Notification('测试通知', {
body: '这是一条明文通知内容'
});
}
通知内容加密的必要性
浏览器通知的内容在传输过程中如果没有加密，可能会被中间人拦截获取，尤其是当页面使用HTTP协议传输时，风险更高。加密后的内容即使被拦截，攻击者也无法直接获取真实信息，能有效保护用户隐私。
使用AES算法加密通知内容
AES是目前常用的对称加密算法，加密和解密使用同一个密钥，适合前端场景下的内容加密处理，下面是实现步骤：
1. 引入加密库
可以使用成熟的加密库来简化AES加密的实现，这里以CryptoJS为例，在页面中引入对应的脚本：
<script src="https://cdn.ipipp.com/crypto-js.min.js"></script>
2. 定义加密解密方法
设置统一的密钥和配置，实现内容的加密和解密函数：
// 加密密钥，实际项目中需要妥善保管，不要硬编码在前端
const SECRET_KEY = 'my_secret_key_123456789012345678';
// AES加密方法
function encryptContent(content) {
const encrypted = CryptoJS.AES.encrypt(content, CryptoJS.enc.Utf8.parse(SECRET_KEY), {
mode: CryptoJS.mode.ECB,
padding: CryptoJS.pad.Pkcs7
});
return encrypted.toString();
}
// AES解密方法
function decryptContent(encryptedContent) {
const decrypted = CryptoJS.AES.decrypt(encryptedContent, CryptoJS.enc.Utf8.parse(SECRET_KEY), {
mode: CryptoJS.mode.ECB,
padding: CryptoJS.pad.Pkcs7
});
return decrypted.toString(CryptoJS.enc.Utf8);
}
3. 发送加密后的通知
发送通知时先对内容加密，接收通知后再解密展示真实内容：
// 原始通知内容
const originalBody = '您的订单已发货，订单号：202405001';
// 加密内容
const encryptedBody = encryptContent(originalBody);
// 发送通知时携带加密内容
if (Notification.permission === 'granted') {
const notification = new Notification('订单通知', {
body: encryptedBody
});
// 点击通知时解密内容并提示
notification.onclick = function() {
const realContent = decryptContent(encryptedBody);
alert('通知真实内容：' + realContent);
};
}
加密注意事项
- 对称密钥不要直接硬编码在前端代码中，可以通过后端接口动态获取，避免密钥泄露导致加密失效。
- 如果通知内容包含非常敏感的信息，建议结合HTTPS协议使用，进一步提升传输过程的安全性。
- 加密后的内容长度会增加，需要注意通知内容的显示长度限制，避免内容被截断。
- 解密操作尽量放在用户主动触发的行为中，比如点击通知时再解密，减少不必要的内存占用。
兼容性问题
大部分现代浏览器都支持Notification API和AES加密，但是在一些旧版本浏览器中可能存在兼容问题，使用前可以先做特性检测：
// 检测是否支持Notification API
if ('Notification' in window) {
// 支持通知功能
} else {
console.log('当前浏览器不支持通知功能');
}
// 检测是否支持CryptoJS加密
if (typeof CryptoJS !== 'undefined') {
// 支持加密功能
} else {
console.log('加密库加载失败');
}
HTML5_notification内容加密AES加密浏览器通知修改时间：2026-06-16 10:57:29