Các thuộc tính toàn vẹn và crossorigin là gì?

Bootstrapcdn gần đây đã thay đổi liên kết của họ. Bây giờ nó trông như thế này:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" 
rel="stylesheet" 
integrity="sha256-MfvZlkHCEqatNoGiOXveE8FIwMzZg4W85qfrfIFBfYc= sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" 
crossorigin="anonymous">

Các thuộc tính integrityvà crossorigincó nghĩa là gì? Làm thế nào để chúng ảnh hưởng đến việc tải biểu định kiểu?

Cả hai thuộc tính đã được thêm vào Bootstrap CDN để triển khai tính toàn vẹn của nguồn con .

Tính toàn vẹn của nguồn cung cấp xác định một cơ chế theo đó các tác nhân người dùng có thể xác minh rằng tài nguyên được tìm nạp đã được phân phối mà không cần thao tác bất ngờ Tham khảo

Thuộc tính toàn vẹn là cho phép trình duyệt kiểm tra nguồn tệp để đảm bảo rằng mã không bao giờ được tải nếu nguồn đã bị thao túng.

Thuộc tính Crossorigin có mặt khi yêu cầu được tải bằng 'CORS', hiện là yêu cầu kiểm tra SRI khi không được tải từ 'cùng nguồn gốc'. Thông tin thêm về crossorigin

Chi tiết hơn về triển khai CDN của Bootstrap

tính toàn vẹn - xác định giá trị băm của tài nguyên (như tổng kiểm tra) phải được khớp để làm cho trình duyệt thực thi nó. Hàm băm đảm bảo rằng tệp không được sửa đổi và chứa dữ liệu dự kiến. Bằng cách này, trình duyệt sẽ không tải các tài nguyên khác nhau (ví dụ như độc hại). Hãy tưởng tượng một tình huống trong đó các tệp JavaScript của bạn đã bị hack trên CDN và không có cách nào để biết điều đó. Thuộc tính toàn vẹn ngăn tải nội dung không phù hợp.

SRI không hợp lệ sẽ bị chặn (công cụ dành cho nhà phát triển Chrome), bất kể nguồn gốc chéo. Bên dưới trường hợp NON-CORS khi thuộc tính toàn vẹn không khớp:

Tính toàn vẹn có thể được tính bằng cách sử dụng: https://www.srihash.org/ Hoặc nhập vào bảng điều khiển ( liên kết ):

openssl dgst -sha384 -binary FILENAME.js | openssl base64 -A

crossorigin - xác định các tùy chọn được sử dụng khi tài nguyên được tải từ máy chủ trên một nguồn gốc khác. (Xem CORS (Chia sẻ tài nguyên nguồn gốc chéo) tại đây: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS ). Nó thay đổi hiệu quả các yêu cầu HTTP được gửi bởi trình duyệt. Nếu thuộc tính crossorigin Cảnh sát được thêm vào - nó sẽ dẫn đến việc thêm nguồn gốc: cặp khóa-giá trị <ORIGIN> vào yêu cầu HTTP như hiển thị bên dưới.

crossorigin có thể được đặt thành hoặc nặc danh Cả hai sẽ dẫn đến việc thêm nguồn gốc: vào yêu cầu. Tuy nhiên, sau này sẽ đảm bảo rằng thông tin đăng nhập được kiểm tra. Không có thuộc tính crossorigin trong thẻ sẽ dẫn đến việc gửi yêu cầu mà không có nguồn gốc: cặp khóa-giá trị.

Đây là một trường hợp khi yêu cầu thông tin xác thực sử dụng của người dùng từ CDN:

<script 
        src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"
        integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" 
        crossorigin="use-credentials"></script>

Một trình duyệt có thể hủy yêu cầu nếu đặt chéo không chính xác.

Liên kết
- https://www.w3.org/TR/cors/
- https://tools.ietf.org/html/rfc6454
- https://developer.mozilla.org/en-US/docs/Web/HTML / Yếu tố / liên kết

Blog
- https://frederik-braun.com/USE-subresource-integrity.html
- https://web-security.guru/en/web-security/subresource-integrity

Về mặt kỹ thuật, thuộc tính Integrity chỉ giúp điều đó - nó cho phép xác minh đúng nguồn dữ liệu. Nghĩa là, nó chỉ cho phép trình duyệt xác minh các số trong tệp nguồn bên phải với số lượng được yêu cầu bởi tệp nguồn nằm trên máy chủ CDN.

Đi sâu hơn một chút, trong trường hợp giá trị băm được mã hóa đã thiết lập của nguồn này và sự tuân thủ được kiểm tra của nó với giá trị được xác định trước trong trình duyệt - mã thực thi và yêu cầu người dùng được xử lý thành công.

Thuộc tính Crossorigin giúp các nhà phát triển tối ưu hóa tỷ lệ hiệu suất CDN, đồng thời, bảo vệ mã trang web khỏi các tập lệnh độc hại.

Cụ thể, Crossorigin tải xuống mã chương trình của trang web ở chế độ ẩn danh mà không cần tải xuống cookie hoặc thực hiện quy trình xác thực. Bằng cách này, nó ngăn chặn rò rỉ dữ liệu người dùng khi bạn tải trang web lần đầu tiên trên một máy chủ CDN cụ thể, những kẻ lừa đảo mạng có thể dễ dàng thay thế địa chỉ.

Nguồn: https://yon.fun/what-is-link-integrity-and-crossorigin/