Tôi muốn bao gồm một số gợi ý tài nguyên kết nối trước trên trang web của mình để các trình duyệt có thể (ví dụ) kết nối với CDN jQuery trước khi chúng thực sự nhìn thấy thẻ script gọi CDN. Tôi không chắc liệu tôi có nên bao gồm thuộc tính crossorigin Viking hay giá trị của nó không. Thông số kỹ thuật nói, một phần,

Để bắt đầu kết nối trước, tác nhân người dùng phải chạy các bước sau:

[Càng]

3. Đặt corsAttributionState là trạng thái hiện tại của crossoriginthuộc tính nội dung của phần tử .
4. Đặt thông tin xác thực là giá trị boolean được đặt thành true.
5. Nếu corsAttributionState là Anonymousvà nguồn gốc không bằng nguồn gốc của Tài liệu hiện tại, hãy đặt thông tin đăng nhập thành false.
6. Cố gắng để có được kết nối với nguồn gốc và thông tin đăng nhập .

Tôi không biết làm thế nào để giải thích thuật toán này. Nếu tôi đang kết nối với CDN, điều này sẽ cho phép mọi người tải xuống nội dung của nó mà không có bất kỳ loại thông tin xác thực nào, tôi nên sử dụng giá trị nào cho thuộc tính crossoriginigin?

Tôi đã tìm kiếm điều tương tự và tôi tìm thấy điều này

Ở đây tuyên bố rằng nếu bạn không sử dụng thuộc tính nguồn gốc chéo, tác nhân người dùng chỉ thực hiện tra cứu dns nhưng không thiết lập kết nối với tên miền cụ thể. Vì vậy, thuộc tính crossorigin là cần thiết nếu bạn phải kết nối trước với tên miền chéo, như thế này:

<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>

Ngoài ra nếu bạn muốn gửi một số thông tin đăng nhập đến tên miền chéo cụ thể đó, bạn có thể đặt giá trị thành crossorigin vì crossorigin = use-credentialsnếu không tôi nghĩ giá trị mặc định là ẩn danh.

Cho đến nay tôi hiểu cách sử dụng crossorigin, đặc biệt về các giá trị của nó anonymousvà use-credentials, bạn nên sử dụng crossorigin="use-credentials"trong trường hợp:

• bạn sử dụng tài sản, như hình ảnh hoặc video, có thuộc tính crossorigin
• bạn có kế hoạch mang cookie, xác thực HTTP và chứng chỉ SSL phía máy khách giữa các nguồn gốc, dựa trên các tương tác trước đó của tác nhân người dùng với nguồn gốc.

Ngoài ra các tài liệu được trích dẫn bởi bạn tôi đã nhận được điều này và điều đó . Nhưng thực sự tài liệu này gây hiểu nhầm và chứa lỗi chính tả: cái đầu tiên gọi nó use-credentials, cái thứ hai - user-credentials.

Dù sao, theo cách hiểu của tôi:

• không crossoriginbằngcrossorigin="anonymous"
• crossorigin bằng crossorigin="use-credentials"

Có lẽ ai đó sẽ sửa tôi.

PS : Phiên bản hiện tại của trang Mozilla cho chủ đề có nghĩa là:

Một từ khóa không hợp lệ và một chuỗi trống sẽ được xử lý như từ khóa ẩn danh.

Phương tiện: không có gì crossorigincả, crossoriginhoặc crossorigin="use_credentials"tất cả đều được xử lý như crossorigin="anonymous".

Nó phụ thuộc vào hai điều:

1. Loại tài sản sẽ được tải xuống (xác định liệu CORS sẽ được sử dụng hay không)
2. Liệu máy chủ mục tiêu có sử dụng thông tin đăng nhập cho các kết nối CORS không

Đối với jQuery, bạn sẽ không sử dụngcrossorigin . Kịch bản không nằm trong số các loại trình duyệt tài nguyên sử dụng CORS để tải xuống .

Phông chữ, mặt khác, sử dụng CORS.

• Nếu trang sẽ chỉ tìm nạp tài nguyên sử dụng CORS, hãy bao gồm crossorigin thuộc tính.
• Nếu trang sẽ chỉ tìm nạp các tài nguyên không sử dụng CORS, hãy bỏ quacrossorigin . Nếu
• Nếu trang sẽ tìm nạp cả hai loại tài nguyên, bạn có thể cần hai gợi ý về tài nguyên . (Tiết lộ đầy đủ, liên kết đến trang web cá nhân của tôi. :-)) Ai đó đã chỉ ra rằng bạn có thể không cần hai gợi ý cho HTTP / 2. Tôi không có thời gian để kiểm tra.

Đây là bài viết Stack Overflow nơi tôi gặp phải vấn đề tương tự.

Tôi đã không tham gia khi thông tin CORS là cần thiết. Tôi chưa thấy một ví dụ nào cần thiết, vì vậy rất có thể bạn an toàn với crossorigin(ví dụ: `crossorigin =" nặc danh ").

Tất cả các câu trả lời cho đến nay dường như sai một phần hoặc không đầy đủ (chủ đề rất phức tạp, mọi thứ được đặt tên khó hiểu và không được ghi chép rõ ràng!), Vì vậy đây là cách hiểu của tôi:

Để có thể sử dụng lại kết nối được tạo bởi <link rel=preconnect> , mọi thứ phụ thuộc vào loại nội dung bạn muốn tìm nạp, từ đâu, liệu yêu cầu sẽ gửi thông tin xác thực của trình duyệt (có thể được trình duyệt xác lập rõ ràng hoặc ẩn):

Yêu cầu có cùng nguồn gốc ( example.comyêu cầu nguồn phụ từexample.com )

Không cần thiết preconnectở nơi đầu tiên; trình duyệt giữ kết nối mở sau khi tải trang khá lâu.

để được kiểm tra : điều gì xảy ra nếu yêu cầu cùng nguồn gốc có crossoriginthuộc tính: nó được sử dụng hay bỏ qua?

Yêu cầu có nguồn gốc chéo ( example.comyêu cầu nguồn phụ từ another.com)

• nếu yêu cầu thực tế (trong HTML hoặc thông qua JS) có crossoriginthuộc tính được đặt rõ ràng ( crossOrigintrong trường hợp JS là quan trọng), thì kết nối trước cũng phải có nó, với cùng một giá trị (có lẽ ngoại trừ trong trường hợp không có ý nghĩa và crossoriginbị bỏ qua - - chưa hoàn toàn rõ ràng cho tôi)
• khác, nếu yêu cầu nếu cho <script type=module>: được kiểm tra
• khác, nếu yêu cầu là và "trường cũ" đề nghị <img>, <style type=stylesheet>, <iframe>, cổ điển <script>vv (khởi xướng qua HTML hoặc JS) mà không crossoriginquy định một cách rõ ràng , thì preconnect không có crossoriginbộ thuộc tính.
• khác, nếu yêu cầu là một yêu cầu phông chữ chéo , kết nối phải cócrossorigin=anonymous
• khác, nếu yêu cầu là nguồn gốc chéo fetch hoặc XHR:
  • nếu nó được thực hiện trong chế độ xác thực (ví dụ: cookie được đính kèm hoặc xác thực cơ bản HTTP được sử dụng; trong trường hợp tìm nạp, điều này có nghĩa là credentials !== omit, trong trường hợp XHR withCredentials === true:): phải kết nối trướccrossorigin=use-credentials
  • nếu nó không ở chế độ xác thực: phải kết nối trước crossorigin=anonymous

Đối với trường hợp cuối cùng (tìm nạp / XHR), hãy chuyển đến bảng điều khiển mạng trong devtools Chrome / Firefox, nhấp chuột phải vào yêu cầu và chọn copy as fetchtừ danh sách thả xuống. Điều này sẽ tạo một đoạn mã JS, nó sẽ cho bạn biết nếu yêu cầu đó được kích hoạt CORS ( "mode"=="cors") và được chứng nhận ( "credentials"=="include"|"same-origin").

Tuy nhiên, xin lưu ý rằng mẹo trên không hoạt động chính xác cho các yêu cầu không XHR / tìm nạp, vì ví dụ fetchvà <img>sử dụng các thuật toán khác nhau để thiết lập kết nối, như đã giải thích trước đây.

Cuối cùng, trong HTML, <link ...crossorigin>=== <link ...crossorigin=anonymous>.

Ghi chú và liên kết bổ sung:

• trong Firefox, kết nối trước không hoạt động ngay cả khi nó được cho là
• Ba cách để kiểm tra xem kết nối có hoạt động không
• trình duyệt có một số giới hạn về số lượng yêu cầu DNS song song có thể xảy ra
• thử nghiệm kết nối trước với tính năng tiêm tập lệnh tùy chỉnh trên WebPageTest