Configurare Cross-Origin Resource Sharing (CORS)

:notebook_with_decorative_cover: Questa è una guida how-to che ti guiderà attraverso il processo di configurazione della Cross-Origin Resource Sharing (CORS) in Discourse.

La CORS è un meccanismo che consente di richiedere molte risorse (ad esempio, font, JavaScript, ecc.) su una pagina web da un dominio diverso da quello da cui ha origine la risorsa.

Ecco come puoi configurare la CORS sul tuo sito Discourse:

Prerequisiti

Prima di iniziare, la variabile d’ambiente DISCOURSE_ENABLE_CORS deve essere impostata su true per abilitare la CORS.

Per assistenza, consulta Come impostare le variabili d’ambiente.

:sparkles: Se ti trovi su un sito ospitato da Discourse, questo passaggio è già stato eseguito e non è necessario intraprendere ulteriori azioni per configurarlo.

Accedi alle Impostazioni del Sito

Vai al tuo pannello di amministrazione di Discourse. Da lì, naviga nella scheda “Impostazioni”.

Individua le Impostazioni CORS

Nella scheda “Impostazioni”, utilizza la barra di ricerca e digita cors origin. Dovresti vedere l’impostazione seguente relativa alla CORS:

Questa impostazione ti consente di specificare i domini a cui è consentito effettuare richieste cross-origin alla tua istanza Discourse.

Dovresti inserire qui i domini esatti, separati da uno spazio. Evita di usare un carattere jolly (*) poiché ciò può comportare rischi per la sicurezza.

Quando aggiungi più domini qui, ogni URL deve essere separato. Ad esempio:

Salva le Modifiche

Dopo aver apportato le modifiche necessarie, non dimenticare di fare clic sul pulsante Salva Modifiche in fondo alla pagina.

Note Importanti

Un’implementazione impropria della CORS (Cross-Origin Resource Sharing) può introdurre potenziali rischi per la sicurezza. Ecco alcune cose da tenere a mente quando abiliti la CORS sul tuo sito:

  • Specifica domini esatti: L’uso di caratteri jolly (*) nella configurazione CORS può consentire a qualsiasi dominio di interagire con il tuo server, il che rappresenta un significativo rischio per la sicurezza. Si consiglia di specificare domini esatti.
  • Minimizza i dati esposti: La CORS dovrebbe essere configurata per esporre solo i dati necessari da domini esterni di cui ti fidi. Non è consigliabile consentire l’accesso CORS a siti che non controlli.
  • Usa HTTPS: Quando possibile, evita di consentire siti non HTTPS nella tua configurazione CORS, poiché ciò può esporre i dati in formato non crittografato.
2 Mi Piace

E se gli annunci di Google sono in uso, forse è meglio non toccare questa impostazione :wink:

CORS (e CSP) è un po’ problematico perché molto spesso un sito deve consentire di fatto tutto e quindi è quasi inutile.

2 Mi Piace

Ho aggiunto DISCOURSE_ENABLE_CORS: \"true\" alla sezione env del file app.yml del mio sito.
Poi ho ricostruito l’app.
Poi sono andato alla sezione cors_origins e ho aggiunto l’URL completo di un sito con cui sto cercando di far funzionare un’interazione e ancora non funziona.
Ho creato una pagina per fornire informazioni quando il sito principale è offline.
Ho inserito questo js nella pagina per controllare il sito principale e reindirizzare ad esso una volta che è di nuovo online, ma sembra non funzionare.
Ecco il codice:

    <script>
        function checkSiteStatus() {
            fetch('https://discourse.technospider.com', {
                method: 'HEAD',
                mode: 'cors', // Usa CORS per ottenere il codice di stato
                cache: 'no-store' // Evita la cache
            })
            .then(response => {
                console.log('Controllo sito: Stato', response.status);
                if (response.ok) { // Codici di stato 200-299
                    console.log('Sito attivo, reindirizzamento a Discourse');
                    window.location.replace('https://discourse.technospider.com');
                } else {
                    console.log('Sito ancora offline (stato: ' + response.status + '), riprovo tra 20 secondi');
                    setTimeout(checkSiteStatus, 20000);
                }
            })
            .catch(error => {
                console.log('Controllo sito: Errore (probabilmente offline o problema CORS):', error.message);
                setTimeout(checkSiteStatus, 20000);
            });
        }
            
        // Inizia subito il controllo
        checkSiteStatus();
    </script>

E questo è l’errore della console:

[Errore] Origine https://www.technospider.com non è permessa da Access-Control-Allow-Origin. Codice di stato: 200
[Errore] L'API Fetch non può caricare https://discourse.technospider.com/ a causa dei controlli di accesso.
[Errore] Impossibile caricare la risorsa: Origine https://www.technospider.com non è permessa da Access-Control-Allow-Origin. Codice di stato: 200 (discourse.technospider.com, riga 0)
[Log] Controllo sito: Errore (probabilmente offline o problema CORS): – "Caricamento fallito" (berightback, riga 78)

Se qualcuno ha qualche intuizione, mi piacerebbe saperlo. Grok e io siamo persi.

Prova senza le virgolette doppie, altrimenti potrebbe essere interpretato come una stringa invece che come un booleano.

In attesa che la ricompilazione finisca per testare. Se è così, allora qualcuno deve correggere questa pagina:

Poiché mostra l’inserimento di true tra virgolette.

Ricompilazione completata, nessun cambiamento. :frowning:

Beh, quello è strano… altre variabili di ambiente lì hanno valori true senza virgolette.

È meglio usare questo invece di CSP se vuoi usare javascript nei post, ad esempio?

Attualmente mi sono affidato a componenti del tema o CSP per eseguire js.

Cordiali saluti
Olle

[citazione=“NateDhaliwal, post:4, topic:270819”]
Provare senza le virgolette doppie, altrimenti può essere interpretato come una stringa invece che come un booleano.
[/citazione]

Qui sta entrando in una variabile d’ambiente, che può essere solo una stringa. Non importa.

Ma in generale è una buona cosa da tenere a mente dato che si possono ottenere risultati inaspettati per valori dall’aspetto innocuo:

pry(main)"> YAML.load('on: yes').to_s
=> "{true=>true}"
1 Mi Piace