In questo codelab, scopri come funziona il principio same-origin durante il recupero delle risorse.
Configurazione: recupera la pagina dalla stessa origine
La demo è ospitata all'indirizzo https://same-origin-policy-fetch.glitch.me.
Questa semplice pagina web utilizza fetch per caricare la risorsa da https://same-origin-policy-fetch.glitch.me/fetch.html. Poiché index.html e fetch.html condividono la stessa origine, nell'anteprima in tempo reale dovresti vedere 200.
1. Recuperare la pagina da un'origine diversa
Prova a cambiare l'URL di recupero in https://www.google.com.
Cosa vedi nell'anteprima in tempo reale?
Il browser avrebbe dovuto bloccare la richiesta di recupero perché hai richiesto una risorsa da un'origine diversa. Ciò significa che un malintenzionato non può leggere le risorse cross-origin anche se ha preso il controllo del browser di un utente.
2. Recuperare una risorsa cross-origin
Prova a cambiare l'URL di recupero in https://api.thecatapi.com/v1/images/search.
Cosa vedi nell'anteprima in tempo reale?
L'URL di recupero è di un'origine diversa, ma dovresti vedere il codice di stato 200. Perché? Le applicazioni web moderne richiedono spesso risorse cross-origin per caricare script di terze parti o eseguire query su un endpoint API. Per supportare questi casi d'uso, esiste un meccanismo chiamato CORS (Cross-Origin Resource Sharing) per indicare al browser che il caricamento di una risorsa cross-origin è consentito. Per saperne di più su CORS, consulta Condividere risorse cross-origin in sicurezza.