Governance & Interview

Microfrontends không chỉ dừng lại ở code. Để vận hành hệ thống cung cấp cho hàng triệu người dùng, bạn cần một tư duy về Quản trị (Governance) và Bảo mật (Security).

1. Phân tích thiết kế: Ranh giới tin cậy (Trust Boundary)

Cách làm truyền thống: Internal Script Trusts

Trong Monolith, bạn tin tưởng toàn bộ code trong bundle của mình vì nó được build từ một nguồn duy nhất.

Nhược điểm:

• Nguy cơ tấn công chuỗi cung ứng (Supply Chain Attack): Nếu một team bị hack chiếm quyền deploy Remote MFE, họ có thể tiêm mã độc vào App Shell của bạn mà bạn không hề hay biết.
• XSS Vulnerabilities: Một lỗi bảo mật ở trang "Tin tức" (MFE Content) có thể dẫn đến việc đánh cắp cookie của trang "Giỏ hàng" (MFE Order).

Cách làm mới: Zero Trust & Security Policies

Áp dụng các chính sách bảo mật nghiêm ngặt cho mỗi Remote được tải về.

Ưu điểm & Vấn đề giải quyết:

• CSP (Content Security Policy): Giới hạn chỉ cho phép load script từ các CDN đã được phê duyệt.
• SRI (Subresource Integrity): Kiểm tra mã băm (hash) của file JS tải về để đảm bảo nó chưa bị thay đổi giữa đường.

2. Org Governance (Quản trị tổ chức)

Làm thế nào để 200 developer không tạo ra "đống rác" Microfrontends sau 2 năm?

• RFC Process: Mọi thay đổi về cấu hình Module Federation chung (shared libraries, v.v.) phải qua phê duyệt.
• Shared Library Policy: Cấm các team tự ý nâng cấp version React/Zustand độc lập để tránh Dependency Bloat.

3. Đánh đổi (Trade-offs)

• Cản trở tốc độ: Quá nhiều chính sách bảo mật và quản trị có thể khiến Developer cảm thấy bị gò bó, làm mất đi lợi thế "Tự trị" của MFE.
• Chi phí vận hành: Cần một team chuyên trách (Platform Team) để duy trì Design System và hạ tầng CI/CD dùng chung.

4. Code minh họa: Content Security Policy (Header)

<!-- Cấu hình tại Shell App để chỉ tin tưởng đúng các Remote của công ty -->
<meta http-equiv="Content-Security-Policy" 
  content="default-src 'self'; 
           script-src 'self' https://cdn.shopee.vn https://trusted-remote.com;
           style-src 'self' 'unsafe-inline' https://fonts.googleapis.com;">

Bài tập: Mock Interview

Hãy thực hiện trả lời 2 tình huống sự cố sau theo mô hình STAR:

• Sự cố 1: Remote Catalog bị sập hoàn toàn do lỗi CDN.
• Sự cố 2: Team Order upgrade React 19 làm hỏng cơ chế Singleton React của Host App (đang chạy React 18).
• Yêu cầu: Nêu chi tiết giải pháp kĩ thuật để khôi phục hệ thống trong vòng 60 giây.

Câu hỏi phỏng vấn

Q: Bạn quản trị sự phụ thuộc (Dependency Governance) như thế nào trong một tổ chức có 20 Microfrontends?

• Trả lời: Chúng ta cần một "Hội đồng Kỹ thuật" (Technical Steering Committee).
  • Shared Library Policy: Chỉ định danh sách thư viện được phép shared (Vd: React, MUI, Tailwind).
  • Version Locking: Các team không được tự ý nâng cấp version React mà không thông báo. Chúng ta dùng Renovate Bot để track version toàn bộ repo. Mỗi năm có 2 kỳ nâng cấp lớn (Major upgrade windows) để tất cả các team cùng đồng bộ hóa.

Q: "Source Map Security" trong Microfrontends quan trọng như thế nào?

• Trả lời: Vì các file JS nằm trên CDN công khai, nếu bạn để lộ source-map, đối thủ có thể dễ dàng đọc được toàn bộ logic mã nguồn của Shopee. Giải pháp là:
  1. Chỉ generate source-map ở môi trường Staging.
  2. Ở Production, đẩy source-map lên một hệ thống nội bộ (Vd: Sentry) và không công khai file .map ra ngoài Internet.

Q: Theo bạn, đâu là thách thức lớn nhất khi vận hành Microfrontends dài hạn?

• Trả lời: Đó là sự Chắp vá về UI/UX (Visual Inconsistency). Khi các team phát triển độc lập, sau 1-2 năm, trang chủ và trang checkout có thể trông như của hai công ty khác nhau. Vì vậy, việc sở hữu một Centralized Design System vững chắc và quy trình kiểm duyệt UI nghiêm ngặt là điều kiện tiên quyết để MFE không trở thành một mớ hỗn độn.

Q: Hãy kể về một sự cố Production thực tế mà bạn từng gặp với MFE và cách bạn xử lý?

• Trả lời: (Gợi ý trả lời theo cấu hình STAR):
  • Situation: Một Remote MFE vô tình nâng cấp Lodash bản mới làm hỏng cơ chế render của Host.
  • Task: Toàn bộ trang web bị trắng xóa do lỗi JS runtime.
  • Action: Ngay lập tức thực hiện Rollback version của Remote đó trên Metadata service (chỉ mất 30 giây). Sau đó bọc toàn bộ Remote đó vào một ErrorBoundary mới để cô lập lỗi.
  • Result: Hệ thống hồi phục ngay lập tức, và chúng ta thêm một bước kiểm tra version vào Pipeline CI.