Kiedy powinienem użyć atrybutu „crossorigin” na „preconnect” <link>?

14

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:

[…]

  1. Niech corsAttributeState będzie bieżącym stanem crossoriginatrybutu content elementu .
  2. Niech poświadczenia będą wartością logiczną ustawioną na true.
  3. Jeśli corsAttributeState ma wartość, Anonymousa pochodzenie nie jest równe początkowi bieżącego dokumentu, ustaw poświadczenia na false.
  4. 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”?

bdesham
źródło

Odpowiedzi:

4

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.

orangespark
źródło
To w połowie prawda. Jeśli używany jest CORS (podobnie jak w przypadku czcionek), tylko żądanie DNS zostanie użyte w żądaniu czcionki. (Połączenie nadal występuje, ale nie jest pokazane na wykresie wodospadu, ponieważ dla żądania CORS należy otworzyć osobne połączenie .) Jeśli pobierasz skrypt, użycie crossoriginspowoduje podobnie marnowanie połączenia, ponieważ nowe połączenie musi zostać otwarte, że nie używa CORS.
Michael Crenshaw
2

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".

Evgeniy
źródło
5
Uważam, jak wspomniano w MDN , domyślnie (to znaczy, gdy atrybut nie jest określony), CORS w ogóle nie jest używany. Również ustawienie crossoriginjest równe crossorigin="anonymous".
Shakespear
1

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 ").

Michael Crenshaw
źródło
1

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:

jakub.g
źródło