Configurer le partage de ressources entre origines multiples (CORS)

[Discourse]

Ceci est un guide how-to qui vous guidera tout au long du processus de configuration du partage de ressources entre origines (CORS) dans Discourse.

Le CORS est un mécanisme qui permet de demander de nombreuses ressources (par exemple, polices, JavaScript, etc.) d’une page Web à partir d’un domaine différent de celui d’où provient la ressource.

Voici comment configurer le CORS sur votre site Discourse :

Prérequis

Avant de commencer, la variable d’environnement DISCOURSE_ENABLE_CORS doit être définie sur true pour activer le CORS.

Pour obtenir de l’aide à ce sujet, consultez Comment définir les variables d’environnement.

Si vous utilisez un site hébergé par Discourse, cette étape a déjà été effectuée et vous n’avez pas besoin de prendre de mesures supplémentaires pour la configurer.

Accéder aux paramètres du site

Accédez à votre panneau d’administration Discourse. De là, naviguez vers l’onglet « Paramètres ».

Localiser les paramètres CORS

Dans l’onglet « Paramètres », utilisez la barre de recherche et tapez cors origin. Vous devriez voir le paramètre suivant lié au CORS :

Ce paramètre vous permet de spécifier les domaines autorisés à effectuer des requêtes inter-origines vers votre instance Discourse.

Vous devez y entrer les domaines exacts, séparés par un espace. Évitez d’utiliser un caractère générique (*) car cela peut présenter des risques de sécurité.

Lorsque vous ajoutez plusieurs domaines ici, chaque URL doit être séparée. Par exemple :

Enregistrer les modifications

Une fois que vous avez apporté les modifications nécessaires, n’oubliez pas de cliquer sur le bouton Enregistrer les modifications en bas de la page.

Notes importantes

Une mauvaise implémentation du CORS (Cross-Origin Resource Sharing) peut introduire des risques de sécurité potentiels. Voici quelques points à garder à l’esprit lors de l’activation du CORS sur votre site :

• Spécifier les domaines exacts : L’utilisation de caractères génériques (*) dans la configuration CORS peut permettre à n’importe quel domaine d’interagir avec votre serveur, ce qui constitue un risque de sécurité important. Il est recommandé de spécifier les domaines exacts.
• Minimiser les données exposées : Le CORS doit être configuré pour exposer uniquement les données nécessaires des domaines externes auxquels vous faites confiance. Il n’est pas recommandé d’autoriser l’accès CORS aux sites que vous ne contrôlez pas.
• Utiliser HTTPS : Lorsque cela est possible, évitez d’autoriser les sites non-HTTPS dans votre configuration CORS, car cela peut exposer des données dans un format non chiffré.

[Jagster (Jakke Lehtonen)]

Et si les annonces Google sont utilisées, il est peut-être préférable de ne pas toucher à ce paramètre

CORS (et CSP) est un peu problématique car il arrive souvent qu’un site doive autoriser pratiquement tout, et alors cela devient presque inutile.

[tknospdr (David Muszynski)]

J’ai ajouté DISCOURSE_ENABLE_CORS: \"true\" à la section env du fichier app.yml de mon site.
J’ai ensuite reconstruit l’application.
Je suis ensuite allé à la section cors_origins et j’ai ajouté l’URL complète d’un site avec lequel j’essaie d’établir une interaction, et cela ne fonctionne toujours pas.
J’ai créé une page pour afficher des informations lorsque le site principal est hors ligne.
J’ai mis ce JS dans la page pour vérifier le site principal et rediriger vers celui-ci une fois qu’il sera de nouveau en ligne, mais cela ne semble pas fonctionner.
Voici le code :

    <script>
        function checkSiteStatus() {
            fetch('https://discourse.technospider.com', {
                method: 'HEAD',
                mode: 'cors', // Utiliser CORS pour obtenir le code d'état
                cache: 'no-store' // Éviter la mise en cache
            })
            .then(response => {
                console.log('Vérification du site : Statut', response.status);
                if (response.ok) { // Codes d'état 200-299
                    console.log('Le site est en ligne, redirection vers Discourse');
                    window.location.replace('https://discourse.technospider.com');
                } else {
                    console.log('Le site est toujours hors ligne (statut : ' + response.status + '), nouvelle tentative dans 20 secondes');
                    setTimeout(checkSiteStatus, 20000);
                }
            })
            .catch(error => {
                console.log('Vérification du site : Erreur (probablement hors ligne ou problème CORS) :', error.message);
                setTimeout(checkSiteStatus, 20000);
            });
        }
            
        // Commencer la vérification immédiatement
        checkSiteStatus();
    </script>

Et voici l’erreur de la console :

[Error] Origin https://www.technospider.com is not allowed by Access-Control-Allow-Origin. Status code: 200
[Error] Fetch API cannot load https://discourse.technospider.com/ due to access control checks.
[Error] Failed to load resource: Origin https://www.technospider.com is not allowed by Access-Control-Allow-Origin. Status code: 200 (discourse.technospider.com, line 0)
[Log] Site check: Error (likely down or CORS issue): – "Load failed" (berightback, line 78)

Si quelqu’un a des éclaircissements, j’aimerais bien les connaître. Grok et moi sommes à court d’idées.

[NateDhaliwal]

@tknospdr

"true"

Essayez sans les guillemets doubles, sinon cela peut être interprété comme une chaîne de caractères au lieu d’un booléen.

[tknospdr (David Muszynski)]

En attente de la fin de la reconstruction pour tester. Si tel est le cas, quelqu’un doit corriger cette page :

Set Environmental Variables

This is a how-to guide for setting up environmental variables in a self-hosted Discourse installation. Required user level: Administrator Environmental variables play a crucial role in configuring your Discourse instance. They can store sensitive data like API keys and database passwords, making your installation more secure and flexible. In Discourse, environmental variables are set in the app.yml file within your Docker container setup…

Car elle indique de mettre true entre guillemets doubles.

Reconstruction terminée, aucun changement.

[NateDhaliwal]

Eh bien, c’est étrange… d’autres variables d’environnement là-bas ont des valeurs true sans guillemets.

[Olle11]

Est-ce préférable à utiliser plutôt que CSP si vous voulez utiliser du javascript dans les publications par exemple ?

J’ai actuellement utilisé des composants de thème ou CSP afin d’exécuter du js,

Cordialement,
Olle

[supermathie (Michael Brown)]

@NateDhaliwal

Essayez sans les guillemets doubles, sinon cela peut être interprété comme une chaîne de caractères au lieu d’un booléen.

Ici, cela va dans une variable d’environnement, qui ne peut être qu’une chaîne de caractères. Peu importe.

Mais en général, c’est une bonne chose à garder à l’esprit car vous pouvez obtenir des résultats inattendus pour des valeurs apparemment anodines :

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