在iPad上使用Safari通过HTML5网页导入本地文件时，文件内容会先进入浏览器内存，若直接上传可能存在被拦截或缓存泄露的风险。借助HTML5的Web Crypto API，我们可以在前端对导入的文件进行加密，从而实现基础防护。
一、iPad导入文件的HTML结构
iPad的Safari支持标准的 <input type="file"> 标签，用户可从iCloud Drive或本地选取文件。我们需要监听其 change 事件来获取文件对象。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>iPad文件加密导入</title> </head> <body> <input type="file" id="fileInput" accept="*/*"> <button id="encryptBtn">加密并导出</button> <script src="app.js"></script> </body> </html>
二、使用Web Crypto API加密文件
Web Crypto API在iPad的较新Safari版本中可用。以下代码演示如何读取导入文件，并用AES-GCM算法加密。
1. 生成密钥与加密函数
// 生成AES-GCM密钥
async function generateKey() {
return await crypto.subtle.generateKey(
{ name: 'AES-GCM', length: 256 },
true,
['encrypt', 'decrypt']
);
}
// 加密ArrayBuffer数据
async function encryptBuffer(key, data) {
const iv = crypto.getRandomValues(new Uint8Array(12));
const cipher = await crypto.subtle.encrypt(
{ name: 'AES-GCM', iv: iv },
key,
data
);
return { iv: iv, cipher: cipher };
}
2. 处理文件导入与加密
document.getElementById('encryptBtn').addEventListener('click', async () => {
const fileInput = document.getElementById('fileInput');
if (!fileInput.files.length) {
alert('请先选择文件');
return;
}
const file = fileInput.files[0];
const buf = await file.arrayBuffer();
const key = await generateKey();
const { iv, cipher } = await encryptBuffer(key, buf);
// 将iv与密文合并便于保存
const result = new Blob([iv, cipher], { type: 'application/octet-stream' });
const url = URL.createObjectURL(result);
const a = document.createElement('a');
a.href = url;
a.download = file.name + '.enc';
a.click();
URL.revokeObjectURL(url);
});
三、防护注意事项
- 密钥不要硬编码在前端代码中，可由用户口令派生。
- iPad低版本Safari可能不支持 crypto.subtle，需做特性检测。
- 加密仅在本地浏览器进行，服务端若需解密应保管好对应密钥。
四、小结
通过HTML5的 <input> 与 Web Crypto API，iPad用户导入文件后可在前端完成加密再导出或上传，降低明文泄露风险。实际项目中应结合HTTPS与后端校验形成完整防护。