Chciałbym zamieścić pewne wskazówki dotyczące zasobów przed połączeniem na mojej stronie, aby przeglądarki mogły (na przykład) połączyć się z CDN jQuery, zanim zobaczą znacznik skryptowy, który wywołuje CDN. Nie jestem pewien, czy powinienem dołączyć atrybut „crossorigin”, czy jaka powinna być jego wartość. Spec mówi, w części,

Aby zainicjować połączenie wstępne, agent użytkownika musi uruchomić następujące kroki:

[…]

3. Niech corsAttributeState będzie bieżącym stanem crossoriginatrybutu content elementu .
4. Niech poświadczenia będą wartością logiczną ustawioną na true.
5. Jeśli corsAttributeState ma wartość, Anonymousa pochodzenie nie jest równe początkowi bieżącego dokumentu, ustaw poświadczenia na false.
6. Próba uzyskania połączenia z pochodzeniem i poświadczeniami .

Nie wiem jak interpretować ten algorytm. Jeśli łączę się wstępnie z CDN, co pozwoli każdemu pobrać jego zawartość bez jakichkolwiek poświadczeń, jakiej wartości powinienem użyć dla atrybutu „crossorigin”?

Szukałem tego samego i znalazłem to

Stwierdza się tutaj, że jeśli nie użyjesz atrybutu cross origin, agent użytkownika po prostu wyszukuje dns, ale nie nawiązuje połączenia z określoną domeną. Tak więc atrybut crossorigin jest potrzebny, jeśli musisz połączyć się wcześniej z domeną, tak jak to:

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

Również jeśli chcesz wysłać dane uwierzytelniające do tej konkretnej domeny, możesz ustawić wartość crossorigin, ponieważ w crossorigin = use-credentialsprzeciwnym razie uważam, że wartość domyślna jest anonimowa.

Do tej pory rozumiem użycie crossorigin, szczególnie pod względem jego wartości, anonymousi use-credentialspowinieneś używać crossorigin="use-credentials"w przypadku:

• korzystasz z zasobów, takich jak obrazy lub filmy, które mają atrybut crossorigin
• planujesz przenosić pliki cookie, uwierzytelnianie HTTP i certyfikaty SSL po stronie klienta między źródłami, na podstawie wcześniejszych interakcji klienta użytkownika z źródłem.

Oprócz cytowanej przez ciebie dokumentacji mam to i tamto . Ale w rzeczywistości dokumentacja wprowadza w błąd i zawiera błędy ortograficzne: pierwsze to nazywa use-credentials, drugie - user-credentials.

W każdym razie, w moim rozumieniu:

• wcale nie crossoriginjest równycrossorigin="anonymous"
• crossorigin równa się crossorigin="use-credentials"

Może ktoś mnie poprawi.

PS : Obecna wersja strony Mozilli na ten temat oznacza:

Niepoprawne słowo kluczowe i pusty ciąg znaków będą traktowane jako anonimowe słowo kluczowe.

Oznacza: crossoriginw ogóle nie, crossoriginlub crossorigin="use_credentials"wszystkie są traktowane jak crossorigin="anonymous".

To zależy od dwóch rzeczy:

1. Rodzaj zasobów do pobrania (który określa, czy będzie używany CORS)
2. Określa, czy serwer docelowy używa poświadczeń dla połączeń CORS

W przypadku jQuery nie będziesz używaćcrossorigin . Skrypty nie należą do rodzajów zasobów, które przeglądarki używają do pobierania za pomocą CORS .

Czcionki natomiast używają CORS.

• Jeśli strona będzie pobierać tylko zasoby korzystające z CORS, dołącz crossoriginatrybut.
• Jeśli strona będzie pobierać tylko zasoby, które nie używają CORS, pomiń crossorigin. Gdyby
• Jeśli strona będzie sprowadzić oba rodzaje zasobów, ty może potrzebować dwóch podpowiedzi zasobów . (Pełne ujawnienie, link do mojej osobistej strony. :-)) Ktoś zwrócił uwagę, że możesz nie potrzebować dwóch wskazówek dla HTTP / 2. Nie miałem czasu na testowanie.

Oto post Przepełnienie stosu, w którym napotkałem ten sam problem.

Nie zanurkowałem, kiedy potrzebne są poświadczenia CORS. Nie widziałem przykładu, w którym są potrzebne, więc są szanse, że jesteś bezpieczny crossorigin(tj. `Crossorigin =" anonimowy ").

Wszystkie dotychczasowe odpowiedzi wydają się uproszczone, niekompletne lub częściowo błędne (temat jest złożony, rzeczy są myląco nazwane i niezbyt dobrze udokumentowane!), Oto moje rozumienie:

Aby móc ponownie użyć połączenia utworzonego przez <link rel=preconnect>, wszystko zależy od tego, jaki rodzaj treści chcesz pobrać, skąd, czy żądanie wyśle ​​dane uwierzytelniające przeglądarki (które mogą być ustanowione przez przeglądarkę jawnie lub niejawnie):

Żądanie ma to samo pochodzenie ( example.comżądania z pod -źródłaexample.com )

Po pierwsze, wcale nie ma takiej potrzeby preconnect; przeglądarka utrzymuje połączenie otwarte po ładowaniu strony przez dłuższy czas. Jeśli istnieje wiele połączeń do otwarcia, przeglądarka sama decyduje, czy i ile otworzyć (w zależności od tego, czy serwer ogłasza obsługę HTTP / 2 w uzgadnianiu TLS, ustawieniach przeglądarki itp.)

do sprawdzenia : co jeśli crossoriginatrybut tego samego pochodzenia ma atrybut: czy jest używany czy ignorowany?

Żądanie pochodzi z różnych źródeł ( example.comżądania z pod -źródłaanother.com )

• jeśli rzeczywiste żądanie ma jawnie ustawionycrossorigin atrybut w HTML ( w JS - ważna jest wielkość liter), musi też mieć to połączenie wstępne o tej samej wartości (być może z wyjątkiem przypadków, w których nie ma to sensu i jest ignorowane - nie do końca jasne ja jeszcze)crossOrigincrossorigin
• w przeciwnym razie, jeśli wniosek, jeśli <script type=module>: do sprawdzenia
• indziej, jeśli wniosek jest i „starej szkoły” zapytanie <img>, <style type=stylesheet>, <iframe>, klasyczne <script>itp (inicjowane poprzez HTML lub JS) bez crossoriginwyraźnie określonej , wówczas wstępne łączenie nie może mieć crossoriginzestaw atrybutów.
• w przeciwnym razie, jeśli żądanie jest żądaniem czcionki pochodzącej z innego źródła , połączenie wstępne musi miećcrossorigin=anonymous
• w przeciwnym razie, jeśli wniosek jest źródłem krzyżowym fetch lub XHR:
  • jeśli odbywa się to w trybie uwierzytelnienia (tzn. pliki cookie są dołączone lub używane jest podstawowe uwierzytelnianie HTTP; w przypadku pobierania oznacza to credentials !== omit; w przypadku XHR withCredentials === true:): połączenie wstępne musi miećcrossorigin=use-credentials
  • jeśli nie jest w trybie uwierzytelnienia: połączenie wstępne musi mieć crossorigin=anonymous

W ostatnim przypadku (fetch / XHR) przejdź do panelu sieciowego w devtools Chrome / Firefox, kliknij prawym przyciskiem myszy żądanie i wybierz copy as fetchz menu rozwijanego. Spowoduje to utworzenie fragmentu kodu JS, który poinformuje Cię, czy to żądanie obsługuje CORS ( "mode"=="cors") i jest poświadczone ( "credentials"=="include"|"same-origin").

Uwaga jednak podstęp powyżej nie działa poprawnie dla non-XHR / pobrać wnioski, bo na przykład fetchi <img>używać różnych algorytmów do ustanowienia połączenia, jak wyjaśniono wcześniej.

Wreszcie w HTML <link ...crossorigin>=== <link ...crossorigin=anonymous>.

Dodatkowe uwagi i linki:

• w Firefoksie preconnect nie działa, nawet jeśli powinien
• trzy sposoby sprawdzenia, czy działa preconnect
• przeglądarki mają pewne ograniczenia dotyczące liczby równoległych żądań DNS
• eksperymentowanie z preconnect z niestandardowym wstrzykiwaniem skryptu na WebPageTest