Subresource Integrity (SRI)

Subresource Integrity (SRI) là gì?

Subresource Integrity (SRI) là cơ chế bảo mật được tích hợp trong trình duyệt, giúp đảm bảo rằng các tập tin bên ngoài như script hoặc stylesheet — khi được tải từ CDN hoặc miền thứ ba — vẫn nguyên vẹn và chưa bị thay đổi trái phép. Cơ chế này hoạt động bằng cách so sánh giá trị hash (mã băm) của nội dung tài nguyên thực tế với giá trị hash đã được khai báo trong thẻ HTML. Nếu hai giá trị không khớp, trình duyệt sẽ từ chối thực thi hoặc áp dụng tài nguyên đó.

Tại sao quan trọng trong SEO?

SRI không trực tiếp ảnh hưởng đến thứ hạng trên công cụ tìm kiếm, nhưng lại đóng vai trò gián tiếp và quan trọng trong Technical SEO vì ba lý do chính:

• Độ tin cậy trang web tăng: Khi tài nguyên bên ngoài bị xâm nhập (ví dụ: CDN bị tấn công), SRI ngăn chặn việc chạy mã độc — giúp giữ nguyên tính toàn vẹn trải nghiệm người dùng và giảm tỷ lệ thoát.
• Hỗ trợ Core Web Vitals: Việc chặn script độc hại hoặc lỗi có thể tránh tình trạng render bị gián đoạn, layout shift bất thường hoặc delay trong tương tác — từ đó góp phần duy trì chỉ số INP, CLS và LCP ổn định.
• Tương thích với tiêu chuẩn web hiện đại: Các trang tuân thủ tiêu chuẩn bảo mật như SRI thường được Google ưu tiên trong đánh giá chất lượng kỹ thuật tổng thể (đặc biệt khi kết hợp với HTTPS, CSP, và HTTP/2+).

Lưu ý: Không có bằng chứng nào cho thấy SRI là yếu tố xếp hạng trực tiếp. Tuy nhiên, việc bỏ qua SRI khi sử dụng nhiều tài nguyên bên ngoài làm tăng rủi ro về hiệu năng và bảo mật — điều mà thuật toán Google ngày càng coi trọng.

Cách hoạt động

Khi một trang web khai báo thuộc tính integrity trong thẻ <script> hoặc <link rel="stylesheet">, trình duyệt sẽ:

1. Tải tài nguyên từ URL đã chỉ định.
2. Tính toán hash của nội dung tải về theo thuật toán đã khai báo (thường là sha256, sha384 hoặc sha512).
3. So sánh giá trị hash vừa tính với chuỗi hash được cung cấp trong thuộc tính integrity.
4. Nếu khớp → tài nguyên được xử lý bình thường. Nếu không khớp → trình duyệt hủy tải, ghi lỗi vào Console và không thực thi/tải CSS.

Quá trình này xảy ra hoàn toàn ở phía client, không yêu cầu cấu hình máy chủ đặc biệt — miễn là tài nguyên được phục vụ với header crossorigin phù hợp.

Hướng dẫn thực hiện

Dưới đây là các bước triển khai SRI đúng cách:

1. Xác định tài nguyên cần bảo vệ: Chỉ áp dụng cho script và stylesheet tải từ miền khác (CDN, thư viện bên ngoài như jQuery, Bootstrap, Google Fonts…). Không áp dụng cho tài nguyên nội bộ (cùng miền).
2. Tạo hash cho tài nguyên: Dùng lệnh dòng lệnh hoặc công cụ trực tuyến. Ví dụ với file jquery.min.js:

   curl -s https://code.jquery.com/jquery-3.7.1.min.js | openssl dgst -sha384 -binary | openssl base64 -A

   Kết quả trả về chuỗi hash dạng sha384-....
3. Thêm thuộc tính integrity và crossorigin vào thẻ HTML. Lưu ý bắt buộc phải có crossorigin để kích hoạt kiểm tra SRI:

<script 
  src="https://code.jquery.com/jquery-3.7.1.min.js"
  integrity="sha384-..."
  crossorigin="anonymous">
</script>

4. Chọn thuật toán phù hợp: sha384 là lựa chọn cân bằng giữa bảo mật và tương thích. sha256 hỗ trợ tốt hơn trên trình duyệt cũ nhưng kém an toàn hơn. sha512 ít được hỗ trợ trên một số phiên bản cũ của Safari và Edge (tùy trường hợp).
5. Kiểm thử sau triển khai: Mở DevTools → Console để xác nhận không có lỗi Failed to find a valid digest. Đồng thời kiểm tra Network tab để đảm bảo tài nguyên vẫn được tải thành công.

Lỗi thường gặp

Lỗi	Nguyên nhân	Cách khắc phục
Failed to find a valid digest	Hash sai, tài nguyên đã thay đổi hoặc thuật toán không khớp	Tái tạo hash từ nội dung hiện tại của file; kiểm tra lại URL tải đúng phiên bản
Tài nguyên không tải được dù hash đúng	Thiếu thuộc tính crossorigin hoặc giá trị sai (anonymous vs use-credentials)	Thêm crossorigin="anonymous"; nếu cần gửi cookie thì dùng use-credentials và đảm bảo server hỗ trợ CORS đầy đủ
Lỗi trên một số trình duyệt cũ	Không hỗ trợ thuật toán sha512 hoặc cú pháp SRI	Dùng sha384 làm chuẩn; kiểm tra tương thích tại caniuse.com/subresource-integrity

Ví dụ thực tế

Dưới đây là ví dụ triển khai SRI cho Google Fonts và Bootstrap CSS:

<!-- Google Fonts (CSS) -->
<link 
  rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap"
  integrity="sha384-..."
  crossorigin="anonymous">

<!-- Bootstrap 5.3 CSS -->
<link 
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
  rel="stylesheet"
  integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6h4u4vy+VrQ1"
  crossorigin="anonymous">

Lưu ý: Với Google Fonts, bạn cần tải CSS qua công cụ tạo hash riêng (vì nội dung có thể thay đổi theo tham số display hoặc subset). Với CDN như jsDelivr hoặc unpkg, hash có thể lấy sẵn từ trang tài liệu hoặc tái tạo từ URL ổn định.

Câu hỏi thường gặp

SRI có làm chậm tốc độ tải trang không?

Không đáng kể. Việc tính toán hash diễn ra song song với tải tài nguyên và chỉ mất vài microsecond trên thiết bị hiện đại. Ảnh hưởng hiệu năng là không đo được trong điều kiện thực tế.

Có nên dùng SRI cho tất cả script bên ngoài?

Có, nếu script đó không nằm cùng miền và bạn không kiểm soát được nội dung cập nhật. Tuy nhiên, cần lưu ý: nếu nhà cung cấp cập nhật file mà không đổi URL (ví dụ: cập nhật nội dung tại cùng một đường dẫn), hash sẽ lỗi — lúc đó bạn phải cập nhật lại thuộc tính integrity thủ công hoặc tự động qua CI/CD.

SRI có tương thích với HTTP/3 và các CDN hiện đại không?

Có đầy đủ. SRI là tiêu chuẩn W3C, độc lập với giao thức vận chuyển. Tất cả CDN lớn (Cloudflare, CloudFront, jsDelivr, unpkg) đều hỗ trợ SRI nếu file được phục vụ với header crossorigin đúng cách. Một số CDN còn cung cấp hash sẵn trong API hoặc trang tài liệu.