Cara mengamankan aplikasi Angular Anda – Beragampengetahuan

Dalam hal aplikasi web yang aman, kita harus menjaga keamanan data sensitif selama komunikasi. Sayangnya, meskipun HTTPS mengenkripsi data saat berpindah dari titik A ke titik B, informasinya masih terekspos di tab jaringan browser dan dapat dibocorkan dengan cara ini. Pada artikel ini, saya akan memberi Anda contoh penerapan enkripsi panggilan API ujung ke ujung dalam aplikasi web aman yang dibangun dengan Angular.

Alur kerja enkripsi

Biasanya, perlindungan yang lemah dikaburkan melalui pengkodean Base64 atau skema khusus. Kriptografi kunci publik (PKC) dianggap sebagai solusi modern yang lebih aman. Ia menggunakan pasangan kunci, satu kunci publik untuk enkripsi dan kunci pribadi lainnya untuk dekripsi. Kunci publik didistribusikan dan kunci privat disimpan di server.

Alur kerja enkripsi adalah sebagai berikut:

1. enkripsi sisi klien: Aplikasi Angular Anda mengenkripsi data menggunakan kunci publik server sebelum mengirimkannya ke API.
2. transmisi yang aman: Melalui koneksi HTTPS, data terenkripsi dikirimkan melalui jaringan.
3. Dekripsi sisi server: Server mendekripsi data dengan menggunakan kunci pribadinya, dan saat menerima data terenkripsi, server melihat pesan aslinya.
4. Enkripsi sisi server (opsional): Server juga dapat mengenkripsi data untuk keamanan tambahan sebelum mengirimkan respons kembali ke klien.
5. Dekripsi klien: Terakhir, klien mendekripsi respons terenkripsi dari server menggunakan kunci publik yang disimpan dalam aplikasi web.

Implementasi dalam aplikasi Angular

Di bawah ini adalah strategi terperinci untuk menerapkan enkripsi ujung ke ujung dalam aplikasi keuangan Angular.

1. Pemilihan dan instalasi perpustakaan

Pilih perpustakaan yang terpelihara dengan baik seperti Angular CryptoJS atau Sodium untuk JavaScript, namun tetap lebih mengandalkannya daripada nongkrong ketika mencoba menerapkannya. Perpustakaan ini berisi API untuk enkripsi dan dekripsi yang disediakan oleh berbagai algoritma.

2. personel manajemen kunciT

Menerapkan fitur untuk menjaga keamanan kunci publik server. Ada beberapa metode umum:

• Penyimpanan sisi server: Solusi yang relatif sederhana adalah dengan menyimpan kunci publik di server backend dan kemudian mengambilnya melalui permintaan HTTPS selama inisialisasi aplikasi di Angular.
• Layanan manajemen kunci (opsional): Untuk pengaturan lebih lanjut, pertimbangkan KMS yang didedikasikan untuk manajemen rahasia, namun ini memerlukan lapisan tambahan.

3. Buat layanan enkripsi dan dekripsi sisi klien

Buat layanan enkripsi universal untuk menangani enkripsi dan dekripsi data aplikasi.

// 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. Layanan panggilan API aplikasi

Buat layanan publik untuk menangani metode HTTP publik aplikasi Web.

// 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. Dekripsi sisi server

Di sisi server, Anda harus mendekripsi semua payload permintaan masuk dan mengenkripsi payload respons. Berikut adalah contoh penggunaan Node.js. js dan Ekspres:

// 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. Enkripsi sisi server (opsional)

Untuk alasan keamanan, respon server juga dapat dikirim kembali ke klien dalam bentuk terenkripsi. Hal ini memang menambah lapisan keamanan, namun perlu diketahui bahwa hal ini dapat memengaruhi kinerja sistem.

7. Dekripsi sisi klien (opsional)

Ketika respons server dienkripsi, dekripsi di sisi klien.

Kesimpulannya

Contoh ini menyederhanakannya dengan menggunakan enkripsi AES. Anda mungkin memerlukan mekanisme enkripsi tambahan, bergantung pada kebutuhan keamanan Anda. Jangan lupa untuk mengelola kesalahan dan pengecualian dengan benar. Ini adalah implementasi enkripsi yang kasar saat melakukan panggilan API di aplikasi web Angular.