Playwright là một công cụ mạnh mẽ để tự động hóa và kiểm thử ứng dụng web. Khi làm việc với các trang web sử dụng giao thức HTTPS (SSL/TLS), bạn cần cấu hình SSL để đảm bảo rằng các yêu cầu của mình được xác thực đúng cách. Trong bài viết này, chúng ta sẽ tìm hiểu về SSL, khi nào cần sử dụng SSL và cách tích hợp SSL vào Playwright.

Hiểu về SSL

SSL là gì?

SSL (Secure Sockets Layer) là một giao thức mã hóa được sử dụng để bảo mật dữ liệu truyền giữa máy khách (client) và máy chủ (server). Giao thức này đảm bảo rằng thông tin được truyền đi không bị đánh cắp hoặc giả mạo. Ngày nay, SSL đã được thay thế bởi TLS (Transport Layer Security), nhưng thuật ngữ “SSL” vẫn thường được sử dụng để chỉ cả hai.

Khi một trang web sử dụng SSL/TLS, URL của nó bắt đầu bằng https:// thay vì http://. Điều này cho thấy rằng kết nối giữa trình duyệt và máy chủ được mã hóa và an toàn.

Khi nào cần dùng SSL?

• Bảo mật dữ liệu nhạy cảm : Khi ứng dụng xử lý thông tin cá nhân như mật khẩu, số thẻ tín dụng, hoặc dữ liệu y tế.
• Xây dựng lòng tin với người dùng : Các trang web có chứng chỉ SSL thường được hiển thị với biểu tượng ổ khóa trên thanh địa chỉ, giúp người dùng cảm thấy an tâm hơn.
• Tuân thủ tiêu chuẩn ngành : Nhiều quy định (như GDPR, PCI DSS) yêu cầu sử dụng SSL để bảo vệ dữ liệu người dùng.

Giải thích về các thuộc tính của SSL trong Playwright

Trong Playwright, SSL được hỗ trợ thông qua thuộc tính clientCertificates trong cấu hình của trình duyệt. Thuộc tính này cho phép bạn thêm các chứng chỉ SSL để xác thực yêu cầu HTTPS.

Giải thích ngắn gọn về các thuộc tính trong object clientCertificates

clientCertificates?: Array<{
    /**
     * Exact origin that the certificate is valid for. Origin includes `https` protocol, a hostname and optionally a port.
     */
    origin: string;
    /**
     * Path to the file with the certificate in PEM format.
     */
    certPath?: string;
    /**
     * Direct value of the certificate in PEM format.
     */
    cert?: Buffer;
    /**
     * Path to the file with the private key in PEM format.
     */
    keyPath?: string;
    /**
     * Direct value of the private key in PEM format.
     */
    key?: Buffer;
    /**
     * Path to the PFX or PKCS12 encoded private key and certificate chain.
     */
    pfxPath?: string;
    /**
     * Direct value of the PFX or PKCS12 encoded private key and certificate chain.
     */
    pfx?: Buffer;
    /**
     * Passphrase for the private key (PEM or PFX).
     */
    passphrase?: string;
  }>;

• origin : Chỉ định nguồn gốc (URL) mà chứng chỉ SSL áp dụng. Ví dụ: https://example.com.
• certPath và cert : Đường dẫn hoặc giá trị trực tiếp của chứng chỉ SSL ở định dạng PEM.
• keyPath và key : Đường dẫn hoặc giá trị trực tiếp của khóa riêng tư ở định dạng PEM.
• pfxPath và pfx : Đường dẫn hoặc giá trị trực tiếp của tệp PFX/PKCS12 chứa cả khóa riêng tư và chuỗi chứng chỉ.
• passphrase : Mật khẩu để giải mã khóa riêng tư (nếu có).

Làm thế nào để thêm SSL config cho Playwright

Có 2 cách: thêm cho toàn bộ test và thêm cho một nhóm test cụ thể.

Thêm SSL config cho toàn bộ các test

Để áp dụng cấu hình SSL cho tất cả các test, bạn cần cấu hình trong file playwright.config.ts (hoặc .js nếu bạn sử dụng JavaScript). Đây là cách làm:

import { defineConfig } from '@playwright/test';

export default defineConfig({
  use: {
    clientCertificates: [
      {
        origin: 'https://example.com',
        certPath: './path/to/certificate.pem',
        keyPath: './path/to/private-key.pem',
        passphrase: 'your-passphrase', // Nếu có
      },
    ],
  },
});

Trong ví dụ trên:

• origin được đặt thành https://example.com, nghĩa là chứng chỉ này chỉ áp dụng cho các yêu cầu đến nguồn gốc này.
• certPath và keyPath chỉ định đường dẫn đến tệp chứng chỉ và khóa riêng tư.

Thêm SSL config cho một file/ nhóm test cụ thể

Nếu bạn chỉ muốn áp dụng cấu hình SSL cho một tập hợp test cụ thể, bạn có thể cấu hình trực tiếp trong context của trình duyệt:

import { test, expect } from '@playwright/test';

test('Test with SSL certificate', async ({ browser }) => {
  const context = await browser.newContext({
    clientCertificates: [
      {
        origin: 'https://example.com',
        cert: Buffer.from('-----BEGIN CERTIFICATE-----\n...'),
        key: Buffer.from('-----BEGIN PRIVATE KEY-----\n...'),
      },
    ],
  });

  const page = await context.newPage();
  await page.goto('https://example.com');
  // Thực hiện các bước kiểm thử tại đây
});

Trong ví dụ này:

• Chúng ta tạo một context mới với cấu hình SSL cụ thể.
• Chứng chỉ và khóa riêng tư được cung cấp trực tiếp dưới dạng Buffer.

Sử dụng test.use

test.use({
  clientCertificates: [
    { origin: "https://test.com", certPath: "./cert.pem", keyPath: "./key.pem", passphrase: "password" },
  ],
});

Cảm ơn bạn, vì đã đọc bài. Chúc bạn một ngày mới tốt lành và làm việc hiệu quả.