如何保护您的 Angular 应用程序：API 调用的端到端加密

        当涉及到安全的 Web 应用程序时，我们必须在通信期间保护敏感数据的安全。可悲的是，虽然HTTPS在数据从A点移动到B点时对其进行加密，但信息仍然暴露在浏览器的网络选项卡中，并可能以这种方式泄漏出去。在这篇文章中，我将为您提供一个示例，说明如何在使用 Angular 构建的安全 Web 应用程序中实现 API 调用的端到端加密。

加密工作流

        传统上，弱保护是使用 Base64 编码或自定义方案进行混淆。公钥加密 （PKC） 被认为是一种更安全的现代解决方案。它使用一个密钥对：一个公钥进行加密，另一个私钥进行解密。公钥是分布式的，私钥保留在服务器上。

加密工作流如下：

1. 客户端加密：您的 Angular 应用程序在将数据传输到 API 之前，先使用服务器的公钥对数据进行加密。

2. 安全传输：通过HTTPS连接，网络然后传输加密数据。

3. 服务器端解密：服务器通过委托其私钥来解密数据，因为它接收加密数据，看到原始信息。

4. 服务器端加密（可选）：在将响应发送回客户端之前，服务器还可以对数据进行加密以提高安全性。

5. 客户端解密：最后，客户端使用存储在 Web 应用程序中的公钥解密来自服务器的加密响应。

在 Angular 应用程序中实现

以下是在您的 Angular 金融应用程序中实施端到端加密的详细策略。

1. 库的选择和安装

        选择一个维护良好的库，如 Angular CryptoJS 或 Sodium for JavaScript，但在尝试实现它们时仍然更多地依赖而不是懒惰。这些库包含用于加密和解密的 API，这些 API 由多种算法提供。

PowerShell的

npm install crypto-js

2. 重点管理人员

        实现一项功能以确保服务器的公钥安全。有几种常见的方法可以做到这一点：

• 服务器端存储：一个相对简单的解决方案是将公钥存储在后端服务器上，然后在 Angular 中的应用程序初始化期间通过 HTTPS 请求检索它。

• 密钥管理服务（可选）：对于更高级的设置，请考虑专用于机密管理的 KMS，但这需要额外的层。

3. 创建客户端加解密服务

        创建一个通用的加密服务来处理应用程序数据的加密和解密。

// src/app/services/appcrypto.service.ts
import { Injectable } from '@angular/core';
import * as CryptoJS from 'crypto-js';

@Injectable({
  providedIn: 'root'
})
export class AppCryptoService {
  private appSerSecretKey: string = 'server-public-key';

  encrypt(data: any): string {
    return CryptoJS.AES.encrypt(JSON.stringify(data), this.appSerSecretKey).toString();
  }

  decrypt(data: string): any {
    const bytes = CryptoJS.AES.decrypt(data, this.appSerSecretKey);
    return JSON.parse(bytes.toString(CryptoJS.enc.Utf8));
  }
}

4. 应用程序API调用服务

创建通用服务以处理 Web 应用程序的通用 HTTP 方法

// src/app/services/appcommon.service.ts
import { Injectable, Inject } from '@angular/core';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { AppCryptoService } from '../services/crypto.service';

@Injectable({
  providedIn: 'root'
})
export class AppCommonService {
  constructor(private appCryptoService: AppCryptoService
              private httpClient: HttpClient) {}

  postData(url: string, data: any): Observable<any> {
    const encryptedData = this.appCryptoService.encrypt(data);
    return this.httpClient.post(url, encryptedData);
  }
  
}

5. 服务器端解密

        在服务器端，您必须解密所有传入的请求有效负载并加密响应有效负载。下面是使用 Node. js 和 Express 的示例：

// server.js
const express = require('express');
const bodyParser = require('body-parser');
const crypto = require('crypto-js');

const app = express();
const secretKey = 'app-secret-key';

app.use(bodyParser.json());

// Using middleware to decrypt the incoming request bodies
app.use((req, res, next) => {
  if (req.body && typeof req.body === 'string') {
    const bytes = crypto.AES.decrypt(req.body, secretKey);
    req.body = JSON.parse(bytes.toString(crypto.enc.Utf8));
  }
  next();
});

// Test post route call
app.post('/api/data', (req, res) => {
  console.log('Decrypted data:', req.body);
  
  // response object
  const responseObj = { message: 'Successfully received' };

  // Encrypt the response body (Optional)
  const encryptedResBody = crypto.AES.encrypt(JSON.stringify(responseBody), secretKey).toString();
  res.send(encryptedResBody);
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

6. 服务器端加密（可选）

        为了安全起见，服务器的响应也可以以加密形式发送回客户端。这确实增加了一层安全性，但需要注意的是，它可能会影响系统性能。

7. 客户端解密（可选）

        当来自服务器的响应被加密时，请在客户端对其进行解密。

        此示例通过使用 AES 加密使其简单。您可能需要其他加密机制，具体取决于您的安全需求。不要忘记正确管理错误和异常。这是在进行 API 调用时在 Angular Web 应用程序中进行加密的一种比较粗略的实现。