在Web前端开发中，核心业务逻辑如果以普通<script>标签直接引入，任何用户都能通过浏览器开发者工具轻易查看完整源码。HTML5提供了灵活的脚本动态加载能力，结合加密手段可以在一定程度上保护代码资产。所谓动态加载加密，通常是指服务端对JavaScript文件进行对称或非对称加密，前端在运行时通过fetch或动态创建节点获取密文，随后在内存中解密并交由引擎执行，从而避免明文落盘与轻易被爬取。
基于AES加密与服务端密文分发的实现
最直观的方案是采用AES这类对称加密算法。服务端使用固定密钥将原始JS加密为密文文本，前端页面本身不存放业务逻辑，只内嵌一个极小的加载器。加载器通过fetch请求密文接口，拿到字符串后用预先植入的密钥解密，最后借助Function构造器或动态插入<script>节点方式执行。这种结构下，原始代码不会以明文静态文件形式存在，提高了抓取门槛。
下面给出一个简化示例，展示前端如何使用内置解密逻辑加载加密脚本。注意在实际项目中密钥不应硬编码，可结合用户令牌临时下发。
// 前端加载器示例，使用 CryptoJS 风格伪代码
function loadEncryptedScript(url, key) {
return fetch(url).then(function(res) {
return res.text();
}).then(function(cipherText) {
// 假设 decrypt 为 AES 解密函数
var code = decrypt(cipherText, key);
var s = document.createElement('script');
s.textContent = code;
document.head.appendChild(s);
});
}
// 调用方式
loadEncryptedScript('https://ipipp.com/api/script.bin', 'user_temp_key');
该方案的优点是实现简单、兼容性好，几乎所有支持HTML5的浏览器都能运行。缺点是解密密钥必然出现在客户端代码中，逆向人员可通过调试拿到密钥还原逻辑。因此它更适合防君子不防小人的场景，比如屏蔽普通爬虫或初级竞品拷贝。
利用Web Worker隔离执行混淆脚本
如果希望主线程不直接暴露业务代码，可以借助HTML5的Web Worker特性。主页面通过Worker加载一个混淆过的调度脚本，真正的加密逻辑放在Worker内部，主线程仅通过postMessage收发参数与结果。由于Worker运行在独立上下文，控制台查看主线程源码时看不到具体计算细节，安全性有所提升。
实现时需要注意Worker本身引用的脚本若明文化仍可被下载，所以Worker脚本也应加密或重度混淆。下面示例展示主线程如何与加密Worker通信：
// 主线程代码
var worker = new Worker('https://ipipp.com/worker_loader.js');
worker.postMessage({ cmd: 'run', payload: 'encrypted_string' });
worker.onmessage = function(e) {
// e.data 为执行结果，主线程不接触源码
console.log('result:', e.data);
};
这种架构的劣势在于Worker无法操作DOM，纯计算类逻辑才适合迁移。同时Worker脚本的分发若未做校验，可能被中间人替换。因此在高安全需求下，建议配合HTTPS证书锁定与脚本完整性哈希校验，避免加载被篡改的Worker。
动态节点注入与执行时机控制
除了fetch拉取密文，HTML5还允许通过动态创建<script>标签并设置textContent来注入代码。结合加密时，我们可以先把解密函数与密文打包进一个延迟执行闭包，等用户触发特定交互后才解密运行，从而降低自动化工具扫描命中率。例如仅在点击按钮后加载核心加密模块，让爬虫难以在首屏拿到内容。
以下代码演示了点击后才解密并执行的设计：
document.getElementById('startBtn').addEventListener('click', function() {
fetch('https://ipipp.com/sec/module.bin').then(function(r) {
return r.text();
}).then(function(ct) {
var src = decrypt(ct, 'dynamic_key');
var tag = document.createElement('script');
tag.textContent = src;
document.body.appendChild(tag);
});
});
这种按需加载方式能减少不必要的流量与暴露面，但也要求解密密钥或获取逻辑具备一定隐蔽性。开发者可把密钥拆分为多段，分散在不同事件回调中拼接，进一步提升逆向难度。综合来看，动态加载加密不是绝对防御，而是提高攻击成本的一道门槛，选型时应结合业务保密级别与性能开销权衡。