Les termes "même site" et "même origine" sont souvent cités, mais souvent mal compris. Par exemple, ils sont utilisés dans le contexte des transitions de page, des requêtes fetch()
, des cookies, des pop-ups d'ouverture, des ressources intégrées et des iFrames. Cette page explique en quoi elles consistent et ce qui les différencie les uns des autres.
Provenance
![Provenance](https://web.dev/static/articles/same-site-same-origin/image/origin-scheme.png?authuser=6&hl=fr)
"Origine" est la combinaison d'un schéma (également appelé protocole, par exemple HTTP ou HTTPS), d'un nom d'hôte et d'un port (si spécifié). Par exemple, pour l'URL https://www.example.com:443/foo
, l'"origine" est https://www.example.com:443
.
"Same-origin" et "cross-origin"
Les sites Web qui présentent la même combinaison de schéma, de nom d'hôte et de port sont considérés comme ayant la même origine. Tout le reste est considéré comme provenant d'origines multiples.
Origine A | Origine B | "Même origine" ou "cross-origin" ? |
---|---|---|
https://www.example.com:443 | https://www.evil.com:443 | Multi-origine: différents domaines |
https://example.com:443 | Multi-origine: différents sous-domaines | |
https://login.example.com:443 | Multi-origine: différents sous-domaines | |
http://www.exemple.com:443 | Multi-origine: schémas différents | |
https://www.example.com:80 | Multi-origine: différents ports | |
https://www.example.com:443. | Origine identique: mot clé exact | |
https://www.example.com | Origine identique: correspondance avec le numéro de port implicite (443) |
Site
![Site (TLD+1)](https://web.dev/static/articles/same-site-same-origin/image/site-tld1-ae5ebbc587fbe.png?authuser=6&hl=fr)
Les domaines de premier niveau (TLD) tels que .com
et .org
sont répertoriés dans la base de données de la zone racine. Dans l'exemple
précédent, "site" est une combinaison du schéma, du TLD et de la partie du domaine qui précède (nous l'appelons TLD+1). Par exemple, pour l'URL https://www.example.com:443/foo
, le "site" est https://example.com
.
Liste des suffixes publics et eTLD
Pour les domaines comportant des éléments tels que .co.jp
ou .github.io
, il suffit d'utiliser .jp
ou .io
pour identifier le "site". Il n'y a aucun moyen de déterminer par algorithme le niveau des domaines enregistrables pour un domaine de premier niveau particulier.
Pour vous aider, la liste des suffixes publics définit une liste de suffixes publics, également appelés domaines de premier niveau effectifs (eTLD). La liste des eTLD est disponible sur publicsuffix.org/list.
Pour identifier la partie "site" d'un domaine qui inclut un eTLD, suivez la même pratique que dans l'exemple avec .com
. Prenons https://www.project.github.io:443/foo
comme exemple. Le schéma est https
, l'eTLD est .github.io
et l'eTLD+1 est project.github.io
. https://project.github.io
est donc considéré comme le "site" de cette URL.
![Site (eTLD+1)](https://web.dev/static/articles/same-site-same-origin/image/site-etld1-2ffebe0e355bd.png?authuser=6&hl=fr)
"same-site" et "cross-site"
Les sites Web ayant le même schéma et le même eTLD+1 sont considérés comme "identiques". Les sites Web dont le schéma ou l'eTLD+1 est différent sont dits "intersites".
Origine A | Origine B | "Same site" ou "cross-site" ? |
---|---|---|
https://www.example.com:443 | https://www.evil.com:443 | Inter-sites: domaines différents |
https://login.example.com:443 | Même site: les sous-domaines différents n'ont pas d'importance | |
http://www.exemple.com:443 | Inter-sites: différents schémas | |
https://www.example.com:80 | Même site: les ports différents n'ont pas d'importance | |
https://www.example.com:443. | Même site: mot clé exact | |
https://www.example.com | Même site: les ports n'ont pas d'importance |
"Même site sans schéma"
![même site sans schéma](https://web.dev/static/articles/same-site-same-origin/image/schemeless-same-site-3ba215c9666cd.png?authuser=6&hl=fr)
La définition de "same-site" a été modifiée pour inclure le schéma d'URL dans le site, afin d'éviter que HTTP ne soit utilisé comme canal faible.
L'ancien concept de "même site" sans comparaison de schémas s'appelle désormais "même site sans schéma". Par exemple, http://www.example.com
et https://www.example.com
sont considérés comme des sites sans schéma sur le même site, mais pas sur le même site, car seule la partie eTLD+1 est importante, et le schéma n'est pas pris en compte.
Origine A | Origine B | "Même site sans schéma" ou "intersite" ? |
---|---|---|
https://www.example.com:443 | https://www.evil.com:443 | Inter-sites: domaines différents |
https://login.example.com:443 | Même site sans schéma: les sous-domaines différents n'ont pas d'importance | |
http://www.exemple.com:443 | Même site sans schéma: les schémas différents n'ont pas d'importance | |
https://www.example.com:80 | Même site sans schéma: les ports différents n'ont pas d'importance | |
https://www.example.com:443. | Same-site sans schéma: mot clé exact | |
https://www.example.com | Same-site sans schéma: les ports n'ont pas d'importance |
Vérifier si une requête est de type "same-site", "same-origin" ou "cross-site"
Tous les navigateurs récents envoient des requêtes avec un en-tête HTTP Sec-Fetch-Site
.
L'en-tête possède l'une des valeurs suivantes:
cross-site
same-site
(fait référence au même site avec schéma)same-origin
none
Vous pouvez examiner la valeur de Sec-Fetch-Site
pour déterminer si la requête est de même site, de même origine ou intersite.
Vous pouvez raisonnablement faire confiance à la valeur de l'en-tête Sec-Fetch-Site
pour les raisons suivantes:
- Les en-têtes HTTP commençant par
Sec-
ne peuvent pas être modifiés par JavaScript - Le navigateur définit toujours ces en-têtes.