Khi copy link các file tài nguyên t? CDN b?n th??ng th?y các thu?c tính integrity crossorigin kèm theo, v?y chúng là gì và có ?n ???c không? bài vi?t này s? giúp b?n hi?u rõ
Thu?c tính integrity trong các th? <link> ho?c <script> khi s? d?ng CDN ?óng vai trò quan tr?ng ?? ??m b?o tính toàn v?n và an toàn c?a file tài nguyên (nh? JavaScript, CSS) ???c t?i t? CDN. Thu?c tính này th??ng ???c s? d?ng k?t h?p v?i Subresource Integrity (SRI).
Subresource Integrity (SRI):
Subresource Integrity là m?t c? ch? an toàn giúp ??m b?o r?ng tài nguyên n?m ? m?t ??a ch? c? th? s? không b? thay ??i so v?i khi b?n ?ang tham chi?u ??n nó. N?u tài nguyên trên CDN b? thay ??i mà không có s? thay ??i nào ???c ph?n ánh trong mã hash ?ã ???c ??t tr??c, trình duy?t s? t? ch?i t?i tài nguyên ?ó.
S? D?ng integrity:
Khi b?n s? d?ng CDN, b?n th??ng th?y m?t mã hash (ví d? nh? sha512) ?i kèm v?i URL c?a tài nguyên. Ví d?:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>Trong ?ó, sha256-exampleHASH là mã hash c?a file CSS. Trình duy?t s? s? d?ng mã hash này ?? so sánh v?i n?i dung th?c t? c?a tài nguyên ???c t?i t? CDN, ??m b?o tính nguyên v?n. Khi trình duy?t t?i tài nguyên t? CDN, nó s? so sánh mã hash c?a t?p tin th?c t? v?i mã hash ?ã ???c ch? ??nh trong thu?c tính integrity. N?u chúng không kh?p, trình duy?t s? t? ch?i t?i tài nguyên ?ó, b?o ??m r?ng tài nguyên không b? thay ??i mà không có s? thông báo ho?c s? ??ng ý c?a ng??i qu?n tr? trang web.
Thu?c tính crossorigin trong th? <link> khi s? d?ng CDN ???c s? d?ng ?? xác ??nh cách trình duy?t x? lý l?i CORS (Cross-Origin Resource Sharing) khi t?i t?p tin t? m?t ngu?n không cùng ngu?n g?c. CORS là m?t chính sách an ninh ???c trình duy?t th?c hi?n ?? ng?n ch?n trang web t? vi?c yêu c?u tài nguyên t? m?t ngu?n khác mà không có s? cho phép t? phía server.
Có ba giá tr? chính cho thu?c tính crossorigin:
1. crossorigin="anonymous":
- ?ây là giá tr? m?c ??nh.
- Khi s? d?ng giá tr? này, trình duy?t s? không g?i b?t k? thông tin xác th?c ng??i dùng nào khi yêu c?u t?p tin t? ngu?n không cùng ngu?n g?c.
- Thích h?p cho vi?c t?i tài nguyên công khai, không yêu c?u xác th?c.
2. crossorigin="use-credentials":
- Khi s? d?ng giá tr? này, trình duy?t s? g?i thông tin xác th?c ng??i dùng (nh? cookie ho?c header xác th?c) khi yêu c?u t?p tin t? ngu?n không cùng ngu?n g?c.
- Thích h?p cho vi?c t?i tài nguyên yêu c?u xác th?c.
3. Không Có crossorigin:
- N?u không có thu?c tính
crossorigin???c xác ??nh, trình duy?t s? gi? ??nh giá tr? là “anonymous”. - ?i?u này có th? t?o ra v?n ?? n?u b?n c? g?ng t?i tài nguyên t? m?t ngu?n không cùng ngu?n g?c và server yêu c?u xác th?c.
Ví d? s? d?ng:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.1/css/bootstrap.min.css" integrity="sha512-Ez0cGzNzHR1tYAv56860NLspgUGuQw16GiOOp/I2LuTmpSK9xDXlgJz3XN4cnpXWDmkNBKXR/VDMTCnAaEooxA==" crossorigin="anonymous" referrerpolicy="no-referrer" />L?u ý: S? d?ng crossorigin trong th? th??ng ???c th?c hi?n ?? ??m b?o r?ng trình duy?t x? lý l?i CORS m?t cách ?úng ??n, ??c bi?t khi b?n s? d?ng CDN ?? t?i các tài nguyên t? ngu?n không cùng ngu?n g?c.
