Angular 10应用如何在网络面板隐藏API请求信息、加密请求参数

首先明确核心前提：所有运行在用户侧浏览器的前端代码不存在绝对的请求数据隐藏能力，前端涉及的加密逻辑、密钥、标识最终都可以通过逆向工程、断点调试获取。以下方案仅能提升攻击者的窃取/伪造成本，无法从根本上杜绝本地查看请求数据的行为——毕竟浏览器网络面板是系统级能力，前端无法篡改或禁用。
另外HTTPS协议已经对传输层做了加密，中间人无法拦截到传输的明文内容，你在网络面板中看到的明文是浏览器解密后展示给当前设备使用者的，这属于正常逻辑。

可落地的优化方案 #

1. 请求参数对称加密 #

前后端约定统一的对称加密算法（推荐AES-128-CBC），前端通过Angular的HttpInterceptor拦截器统一对敏感接口的请求体、URL查询参数加密后再发送，后端收到后先解密再做业务处理。
注意不要把加密密钥硬编码在前端代码中，可以在用户登录成功后由后端动态下发，并且设置密钥有效期定期更新，降低密钥泄露风险。
参考实现代码：

@Injectable()
export class EncryptInterceptor implements HttpInterceptor {
  constructor(private encryptService: EncryptService) {}

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // 仅对需要加密的敏感接口做处理
    if (req.url.startsWith('/api/protected/')) {
      // 加密请求体
      const encryptedBody = this.encryptService.aesEncrypt(req.body);
      // 生成请求签名防篡改
      const reqSign = this.encryptService.generateSign(req.params, encryptedBody);
      // 克隆请求替换参数
      const encryptedReq = req.clone({
        body: { encryptData: encryptedBody, sign: reqSign },
        setHeaders: { 'Content-Type': 'application/json' }
      });
      return next.handle(encryptedReq);
    }
    return next.handle(req);
  }
}

2. Bearer Token 安全优化 #

不要把Bearer Token存在localStorage/sessionStorage这类前端可读取的存储介质中，改为设置到带HttpOnly、Secure、SameSite=Strict属性的Cookie中，浏览器会自动在请求中携带该Cookie，前端代码完全无法读取到Token值，能大幅降低Token被前端恶意脚本窃取的风险。

3. 接口路径混淆 #

对敏感接口的路径做映射混淆，前端维护一套虚拟路径和真实路径的映射表，发送请求时使用虚拟路径，后端网关层收到请求后再做路径转发还原，避免真实接口路径直接暴露在网络面板中。

注意事项 #

• 所有前端侧的加密、混淆手段都只能提升攻击成本，不能作为安全兜底，核心的权限校验、参数合法性校验、操作频次限制必须全部在后端实现。
• Token必须设置较短的有效期，同时配套刷新Token机制，就算Token泄露也能把危害控制在最小范围内。
• 不要浪费精力做“完全隐藏网络请求”的尝试，所有这类方案最终都能被破解，投入产出比极低。

内容的提问来源于stack exchange，提问作者FadilaNuzha