I componenti aggiuntivi di Classroom vengono caricati all'interno di un iframe per offrire all'utente finale un'esperienza utente fluida e pratica. Esistono cinque tipi di iframe distinti . Per una panoramica dello scopo e dell'aspetto di ogni iframe, consulta le pagine degli iframe nella directory User journeys per una panoramica.
Linee guida sulla sicurezza degli iframe
Gli sviluppatori devono seguire le best practice del settore per proteggere il proprio iframe. Tuttavia, devi anche incorporare determinate interazioni API nel flusso utente per confermare di disporre di credenziali valide e di poter identificare correttamente il ruolo dell'utente nel corso.
Configurazione dell'applicazione server
Per proteggere l'iframe, ti consigliamo le seguenti configurazioni del server:
- HTTPS è obbligatorio. Ti consigliamo vivamente di utilizzare TLS 1.2 o versioni successive e di attivare HTTP Strict Transport Security (HSTS). Consulta questo articolo MDN correlato su Strict Transport Security.
- Attiva Strict Content Security Policy (Strict CSP). Consulta questo articolo OWASP e questo articolo MDN correlato su Content Security Policy.
- Attiva l'attributo cookie Secure. Consulta l'attributo HttpOnly e questo articolo MDN correlato sui cookie.
Parametri di query
Gli iframe trasmettono informazioni critiche al componente aggiuntivo come parametri di query. Esistono due categorie di parametri: quelli relativi agli allegati e quelli relativi all'accesso.
Parametri relativi agli allegati
I parametri relativi agli allegati forniscono al componente aggiuntivo informazioni sul corso, sul compito, sull'allegato del componente aggiuntivo, sul lavoro inviato dallo studente e su un token di autorizzazione.
- ID corso
Il valore
courseIdè un identificatore del corso.Incluso in tutti gli iframe.
- ID articolo
Il valore
itemIdè un identificatore diAnnouncement,CourseWorkoCourseWorkMateriala cui è allegato questo allegato.Incluso in tutti gli iframe.
- Tipo di elemento
Il valore
itemTypeidentifica il tipo di risorsa a cui è allegato questo allegato. Il valore della stringa passata è uno tra"announcements","courseWork"o"courseWorkMaterials".Incluso in tutti gli iframe.
- ID allegato
Il valore
attachmentIdè un identificatore dell'allegato.Incluso negli iframe
teacherViewUri,studentViewUriestudentWorkReviewUri.- ID contenuti inviati
Il valore
submissionIdè un identificatore del lavoro dello studente, ma deve essere utilizzato in combinazione conattachmentIdper identificare il lavoro dello studente relativo a un determinato compito.Incluso in
studentWorkReviewUri.
- Token del componente aggiuntivo
Il valore
addOnTokenè un token di autorizzazione utilizzato per effettuare chiamateaddOnAttachments.createal fine di creare il componente aggiuntivo.Incluso nell'iframe di rilevamento degli allegati e nell'iframe di upgrade dei link.
- URL di cui eseguire l'upgrade
La presenza del valore
urlToUpgradeimplica che l' insegnante ha incluso un allegato di link nel compito e ha accettato di eseguirne l'upgrade a un allegato del componente aggiuntivo. Se non hai ancora configurato questa funzionalità, consulta la guida sull'upgrade dei link agli allegati dei componenti aggiuntivi per maggiori dettagli.Incluso nell'iframe di upgrade dei link.
Parametri relativi all'accesso
Il parametro di query login_hint fornisce informazioni sull'utente di Classroom che visita la pagina web del componente aggiuntivo. Questo parametro di query viene fornito nell'URL src dell'iframe. Viene inviato quando l'utente ha già utilizzato il tuo componente aggiuntivo per ridurre le difficoltà di accesso dell'utente finale. Devi gestire questo parametro di query nell'implementazione del componente aggiuntivo.
- Suggerimento per l'accesso
login_hintè un identificatore univoco dell'Account Google dell'utente. Dopo che l'utente ha eseguito l'accesso al tuo componente aggiuntivo per la prima volta, il parametrologin_hintviene passato a ogni visita successiva al componente aggiuntivo da parte dello stesso utente.Esistono due potenziali utilizzi per il parametro
login_hint:- Passa il valore
login_hintdurante il flusso di autenticazione in modo che l'utente non debba inserire le proprie credenziali quando viene visualizzata la finestra di dialogo di accesso. L'utente non accede automaticamente. - Dopo che l'utente ha eseguito l'accesso, utilizza questo parametro per confrontare il valore con gli utenti che potrebbero aver già eseguito l'accesso al componente aggiuntivo. Se trovi una corrispondenza, puoi lasciare l'utente con l'accesso eseguito ed evitare di mostrare un flusso di accesso. Se il parametro non corrisponde a nessuno degli utenti che hanno eseguito l'accesso, chiedi all'utente di accedere con un pulsante di accesso con il brand Google.
Incluso in tutti gli iframe.
- Passa il valore
iframe di rilevamento degli allegati
| Dimensione | Descrizione |
|---|---|
| Obbligatorio | Sì |
| URI | Fornito nei metadati del componente aggiuntivo |
| Parametri di query | courseId, itemId, itemType, addOnToken e login_hint. |
| Altezza | 80% dell'altezza della finestra meno 60 px per l'intestazione in alto |
| Larghezza | Massimo 1600 px 90% della larghezza della finestra quando la larghezza della finestra è <= 600 px wide 80% della larghezza della finestra quando la larghezza della finestra è > 600 px |
Esempio di scenario di rilevamento degli allegati
- Un componente aggiuntivo di Classroom è registrato in Google Workspace Marketplace con un URI di rilevamento degli allegati
https://example.com/addon. - Un insegnante installa questo componente aggiuntivo e crea un nuovo annuncio, un nuovo compito o un nuovo materiale in uno dei suoi corsi. Ad esempio,
itemId=234,itemType=courseWorkecourseId=123. - Durante la configurazione dell'elemento, l'insegnante sceglie il componente aggiuntivo appena installato come allegato.
- Classroom crea un iframe con l'URL src impostato su
https://example.com/addon?courseId=123&itemId=234&itemType=courseWork&addOnToken=456.- L'insegnante esegue il lavoro all'interno dell'iframe per selezionare un allegato.
- Quando viene selezionato un allegato, il componente aggiuntivo invia un
postMessagea Classroom per chiudere l'iframe.
iframe teacherViewUri e studentViewUri
| Dimensione | Descrizione |
|---|---|
| Obbligatorio | Sì |
| URI | teacherViewUri o studentViewUri |
| Parametri di query | courseId, itemId, itemType, attachmentId e login_hint. |
| Altezza | 100% dell'altezza della finestra meno 140 px per l'intestazione in alto |
| Larghezza | 100% della larghezza della finestra |
iframe studentWorkReviewUri
| Dimensione | Descrizione |
|---|---|
| Obbligatorio | No (determina se si tratta di un allegato di tipo attività) |
| URI | studentWorkReviewUri |
| Parametri di query | courseId, itemId, itemType, attachmentId, submissionId e login_hint. |
| Altezza | 100% dell'altezza della finestra meno 168 px per l'intestazione in alto |
| Larghezza | 100% della larghezza della finestra meno la larghezza della barra laterale<> la barra laterale è di 312 px quando è espansa e di 56 px quando è compressa |
iframe di upgrade dei link
| Dimensione | Descrizione |
|---|---|
| Obbligatorio | Sì, se l'upgrade dei link agli allegati dei componenti aggiuntivi è supportato dal componente aggiuntivo. |
| URI | Fornito nei metadati del componente aggiuntivo |
| Parametri di query | courseId, itemId, itemType, addOnToken, urlToUpgrade e login_hint. |
| Altezza | 80% dell'altezza della finestra meno 60 px per l'intestazione in alto |
| Larghezza | Massimo 1600 px 90% della larghezza della finestra quando la larghezza della finestra è <= 600 px wide 80% della larghezza della finestra quando la larghezza della finestra è > 600 px |
Esempio di scenario di upgrade dei link
- Un componente aggiuntivo di Classroom è registrato con un URI di upgrade dei link
https://example.com/upgrade. Hai fornito i seguenti pattern di prefisso host e percorso per gli allegati di link di cui Classroom deve tentare di eseguire l'upgrade a un allegato del componente aggiuntivo:- L'host è
example.come il prefisso del percorso è/quiz.
- L'host è
- Un insegnante crea un nuovo annuncio, un nuovo compito o un nuovo materiale in uno dei suoi corsi. Ad esempio,
itemId=234,itemType=courseWorkecourseId=123. - Un insegnante incolla un link,
https://example.com/quiz/5678, nella finestra di dialogo dell'allegato di link che corrisponde a un pattern URL che hai fornito. All'insegnante viene quindi chiesto di eseguire l'upgrade del link a un allegato del componente aggiuntivo. Classroom avvia l'iframe di upgrade dei link con l'URL impostato su
https://example.com/upgrade?courseId=123&itemId=234&itemType=courseWork&addOnToken=456&urlToUpgrade=https%3A%2F%2Fexample.com%2Fquiz%2F5678.Valuta i parametri di query passati nell'iframe ed effettua una chiamata a l
CreateAddOnAttachmentendpoint. Tieni presente che il parametro di queryurlToUpgradeè codificato in URI quando viene passato nell'iframe. Devi decodificare il parametro per ottenerlo nella sua forma originale. JavaScript, ad esempio, offre la funzionedecodeURIComponent().Una volta creato correttamente un allegato del componente aggiuntivo da un link, invia un
postMessagea Classroom per chiudere l'iframe.
Chiudere l'iframe
L'iframe può essere chiuso dallo strumento di apprendimento inviando un postMessage con
il payload {type: 'Classroom', action: 'closeIframe'}.
Classroom accetta questo postMessage solo da host_name+port corrispondente all'URI originale aperto.
<button id="close">Send message to close iframe</button>
<script>
document.querySelector('#close')
.addEventListener('click', () => {
window.parent.postMessage({
type: 'Classroom',
action: 'closeIframe',
}, '*');
});
</script>
Chiudere l'iframe dall'iframe
Il dominio+porta della pagina che invia l'evento postMessage deve avere lo stesso dominio+porta dell'URI utilizzato per avviare l'iframe, altrimenti il messaggio viene ignorato. Una soluzione alternativa consiste nel reindirizzare a una pagina del dominio originale che non fa altro che inviare l'evento postMessage.
Chiudere l'iframe da una nuova scheda
Le protezioni cross-domain impediscono il funzionamento. Una soluzione alternativa consiste nel gestire autonomamente le comunicazioni tra l'iframe e la nuova scheda e lasciare che l'iframe sia responsabile dell'emissione dell'evento postMessage di chiusura. Come nota a margine, il link ipertestuale "Apri in Nome partner" verrà rimosso, in modo che gli utenti non creino schede in questo modo nel prossimo futuro.
Restrizioni
Tutti gli iframe vengono aperti con i seguenti attributi sandbox:
allow-popupsallow-popups-to-escape-sandboxallow-formsallow-scriptsallow-storage-access-by-user-activationallow-same-origin
e il seguente criterio delle funzionalità:
allow="microphone *"
Blocco dei cookie di terze parti
Tieni presente che il blocco dei cookie di terze parti rende difficile mantenere una sessione con accesso eseguito in un iframe. Consulta la pagina https://www.cookiestatus.com per lo stato attuale del blocco dei cookie nei diversi browser. Naturalmente, questo problema non riguarda solo i componenti aggiuntivi di Google Classroom, ma tutti i siti web che utilizzano iframe di terze parti. Molti dei nostri partner hanno già riscontrato questo problema.
Ecco alcune soluzioni alternative generali:
- Apri una nuova scheda per creare il cookie in un contesto proprietario. Alcuni browser concedono l'accesso ai cookie creati nel contesto proprietario in un contesto di terze parti.
- Chiedi all'utente di consentire i cookie di terze parti. Potrebbe non essere sempre possibile con tutti gli utenti.
- Progetta applicazioni web a pagina singola che non si basano sui cookie.
Nelle versioni future dei browser sono previste ulteriori restrizioni sui cookie. Crea richieste di funzionalità per inviare feedback a Google su come ridurre il lavoro richiesto dai partner.
Attivare la rilevabilità dei componenti aggiuntivi utilizzando le espressioni regolari degli URL
Gli insegnanti creano spesso compiti con allegati di link. Per promuovere l'utilizzo del tuo componente aggiuntivo, puoi specificare espressioni regolari che corrispondono agli URL delle risorse a cui è possibile accedere nel tuo componente aggiuntivo. Un insegnante che allega un link che corrisponde a una delle tue espressioni regolari vede una finestra di dialogo ignorabile che lo incoraggia a provare il tuo componente aggiuntivo. La finestra di dialogo viene visualizzata solo se il componente aggiuntivo è già installato per il suo account.
Se vuoi fornire questo comportamento agli insegnanti, fornisci ai tuoi contatti Google le espressioni regolari appropriate. Se le espressioni regolari che fornisci sono eccessivamente ampie o in conflitto con un altro componente aggiuntivo, potrebbero essere modificate per essere più restrittive o distinte.
Figura 1. L'insegnante seleziona un allegato di link per un nuovo compito.
Figura 2. L'insegnante incolla un link da una fonte di terze parti. L'insegnante ha già installato il componente aggiuntivo di Classroom di terze parti.
Figura 3. La finestra di dialogo interattiva presentata all'insegnante quando il link incollato corrisponde a un'espressione regolare specificata dallo sviluppatore di terze parti.
Se un insegnante seleziona "Provalo ora" nel popup come mostrato nella figura 3, viene reindirizzato all'iframe di rilevamento degli allegati del tuo componente aggiuntivo.