Tạo chính sách bảo mật Zero-build với Astro: Loại bỏ plugin và tệp trung gian

Tạo chính sách bảo mật Zero-build với Astro: Loại bỏ plugin và tệp trung gian

Khi OpenPolicy ra mắt tích hợp Astro vào tháng 3, cơ chế hoạt động của nó là tạo ra các tệp Markdown tại thời điểm build (build time). Bạn thêm plugin vào astro.config.mjs, chỉ định thư mục đầu ra, và Astro sẽ nhập các tệp .md được tạo ra dưới dạng thành phần (components).

Cách tiếp cận này hoạt động tốt nhưng lại tạo ra sự phức tạp không cần thiết: một gói phụ thuộc (package) thêm, một mục .gitignore cho thư mục được tạo, và một bước theo dõi tệp (file-watching) giữa cấu hình và trang của bạn.

Hiện tại, thư viện lõi đã có thể biên dịch chính sách trực tiếp. Bạn có thể gọi nó ngay từ phần frontmatter của Astro — không cần tích hợp (integration), không cần tệp được tạo ra.

Cài đặt

Bạn chỉ cần cài đặt các gói sau:

bun add @openpolicy/sdk @openpolicy/core @openpolicy/renderers

Không cần tích hợp Astro. Không cần plugin Vite. Chỉ cần ba gói thư viện.

Định nghĩa cấu hình

Tạo tệp src/lib/openpolicy.ts:

import { defineConfig } from "@openpolicy/sdk";

export default defineConfig({
  company: {
    name: "Acme",
    legalName: "Acme, Inc.",
    // ...
  },
  privacy: {
    effectiveDate: "2026-04-01",
    dataCollected: { /* ... */ },
    jurisdictions: ["us", "eu"],
    // ...
  },
  // ... các cấu hình khác
});

Cách nhanh nhất để điền thông tin này là dán trang bảo mật hiện có của bạn (hoặc mô tả ứng dụng của bạn) vào Claude và yêu cầu nó tạo cấu hình. Vì kết quả đầu ra là xác định (deterministic) — cùng một cấu hình luôn tạo ra cùng một chính sách — Claude chỉ đang cấu hình, không viết văn bản pháp lý. Bạn xem xét các đầu vào, OpenPolicy sẽ xử lý phần còn lại.

Hiển thị trên một trang riêng biệt

Mỗi trang sẽ tìm chính sách của mình từ cấu hình, biên dịch nó và hiển thị sang HTML — tất cả đều nằm trong frontmatter:

---
// src/pages/privacy.astro
import { compile, expandOpenPolicyConfig } from "@openpolicy/core";
import { renderHTML } from "@openpolicy/renderers";
import openpolicy from "../lib/openpolicy";

const policies = expandOpenPolicyConfig(openpolicy);
const privacyPolicy = policies.find((p) => p.type === "privacy");

if (!privacyPolicy) {
  throw new Error("Privacy policy not found in config");
}

const policy = renderHTML(compile(privacyPolicy));
---

<Fragment set:html={policy} />

Hàm expandOpenPolicyConfig tách cấu hình thống nhất thành các chính sách riêng lẻ. compile chạy từng chính sách qua các trình tạo phần mục (section builders). renderHTML chuyển kết quả thành chuỗi HTML. set:html hiển thị nó mà không cần thoát ký tự.

Mọi thứ đều chạy tại thời điểm build. Không có mã JavaScript nào được gửi đến trình duyệt.

Các trang điều khoản và cookie hoạt động tương tự — chỉ cần tìm type === "terms" hoặc type === "cookie" thay vì privacy.

Tại sao cách này đơn giản hơn cách tiếp cận cũ?

Cách tiếp cận sử dụng plugin trước đây tạo ra các tệp trung gian nằm trong thư mục src/ của bạn. Cách mới thì không:

• Không có tệp được tạo ra: Không cần thư mục src/generated/ để tạo, quản lý hoặc loại khỏi git.
• Không có cấu hình plugin: astro.config.mjs giữ nguyên trống rỗng. Không có outDir, không có formats, không có đường dẫn được theo dõi.
• Không có gói phụ thuộc thêm: Loại bỏ @openpolicy/astro — chỉ cần core và renderers tại thời điểm chạy.
• Tất cả ba loại chính sách: Chính sách bảo mật, điều khoản và cookie đều được biên dịch từ một cấu hình. Cùng một lệnh gọi defineConfig(), cùng một quy trình xử lý.

Kết quả đầu ra vẫn giống như trước đây: HTML được hiển thị tĩnh mà không có JavaScript phía client. Sự khác biệt là quá trình biên dịch diễn ra nội tuyến (inline), trong trang sử dụng nó, thay vì là một tác dụng phụ của plugin đang theo dõi hệ thống tệp của bạn.

Đi xa hơn với OpenPolicy+

Nếu bạn cần nhiều hơn chỉ là tạo tĩnh, OpenPolicy+ mở rộng thư viện lõi với tính năng theo dõi sự đồng ý dựa trên đám mây, tự động hóa PR (kiểm tra chính sách, kiểm tra tuân thủ trên mọi pull request), và hỗ trợ triển khai từ đội ngũ của họ.