Einrichten von Cross-Origin Resource Sharing (CORS)

[Discourse]

Dies ist eine #how-to::tag-Anleitung, die Sie durch den Prozess der Einrichtung von Cross-Origin Resource Sharing (CORS) in Discourse führt.

CORS ist ein Mechanismus, der es vielen Ressourcen (z. B. Schriftarten, JavaScript usw.) auf einer Webseite ermöglicht, von einer anderen Domäne als der Domäne, von der die Ressource stammt, angefordert zu werden.

So richten Sie CORS auf Ihrer Discourse-Site ein:

Voraussetzungen

Bevor Sie beginnen, muss die Umgebungsvariable DISCOURSE_ENABLE_CORS auf true gesetzt werden, um CORS zu aktivieren.

Anleitungen hierzu finden Sie unter Umgebungsvariablen festlegen.

Wenn Sie eine gehostete Discourse-Site nutzen, wurde dieser Schritt bereits ausgeführt und Sie müssen keine zusätzlichen Maßnahmen zur Konfiguration ergreifen.

Auf Site-Einstellungen zugreifen

Gehen Sie zu Ihrem Discourse-Admin-Panel. Navigieren Sie von dort zur Registerkarte „Einstellungen“.

CORS-Einstellungen finden

Geben Sie auf der Registerkarte „Einstellungen“ in die Suchleiste cors origin ein. Sie sollten die folgende Einstellung im Zusammenhang mit CORS sehen:

Diese Einstellung ermöglicht es Ihnen, die Domänen anzugeben, denen es gestattet ist, domänenübergreifende Anfragen an Ihre Discourse-Instanz zu stellen.

Sie sollten hier die genauen Domänen eingeben, getrennt durch ein Leerzeichen. Vermeiden Sie die Verwendung eines Wildcards (*), da dies Sicherheitsrisiken birgt.

Wenn Sie hier mehrere Domänen hinzufügen, sollte jede URL getrennt sein. Zum Beispiel:

Änderungen speichern

Nachdem Sie die erforderlichen Änderungen vorgenommen haben, vergessen Sie nicht, unten auf der Seite auf die Schaltfläche Änderungen speichern zu klicken.

Wichtige Hinweise

Eine unsachgemäße Implementierung von CORS (Cross-Origin Resource Sharing) kann potenzielle Sicherheitsrisiken mit sich bringen. Hier sind einige Dinge, die Sie bei der Aktivierung von CORS auf Ihrer Website beachten sollten:

• Genaue Domänen angeben: Die Verwendung von Wildcards (*) in der CORS-Konfiguration kann es jeder Domäne ermöglichen, mit Ihrem Server zu interagieren, was ein erhebliches Sicherheitsrisiko darstellt. Es wird empfohlen, genaue Domänen anzugeben.
• Exponierte Daten minimieren: CORS sollte so konfiguriert werden, dass nur die notwendigen Daten von externen Domänen, denen Sie vertrauen, offengelegt werden. Es wird nicht empfohlen, Websites, die Sie nicht kontrollieren, CORS-Zugriff zu gewähren.
• HTTPS verwenden: Wenn möglich, vermeiden Sie die Zulassung von Nicht-HTTPS-Sites in Ihrer CORS-Konfiguration, da dies Daten unverschlüsselt preisgeben kann.

[Jagster (Jakke Lehtonen)]

Und wenn Google Ads verwendet werden, ist es vielleicht besser, die Finger von dieser Einstellung zu lassen

CORS (und CSP) ist etwas problematisch, da eine Website oft de facto alles zulassen muss und dann fast nutzlos ist.

[tknospdr (David Muszynski)]

Ich habe DISCOURSE_ENABLE_CORS: "true" zum Abschnitt env meiner app.yml-Datei hinzugefügt.
Anschließend habe ich die App neu kompiliert.
Dann bin ich zum Abschnitt cors_origins gegangen und habe die vollständige URL einer Website hinzugefügt, mit der ich eine Interaktion zum Laufen bringen möchte, und es funktioniert immer noch nicht.
Ich habe eine Seite erstellt, die Informationen anzeigt, wenn die Hauptseite offline ist.
Ich habe diesen JavaScript-Code auf der Seite platziert, um den Status der Hauptseite zu überprüfen und dorthin weiterzuleiten, sobald sie wieder verfügbar ist, aber es scheint nicht zu funktionieren.
Hier ist der Code:

    <script>
        function checkSiteStatus() {
            fetch('https://discourse.technospider.com', {
                method: 'HEAD',
                mode: 'cors', // CORS verwenden, um den Statuscode zu erhalten
                cache: 'no-store' // Caching vermeiden
            })
            .then(response => {
                console.log('Site check: Status', response.status);
                if (response.ok) { // 200-299 Statuscodes
                    console.log('Site is up, redirecting to Discourse');
                    window.location.replace('https://discourse.technospider.com');
                } else {
                    console.log('Site is still down (status: ' + response.status + '), retrying in 20 seconds');
                    setTimeout(checkSiteStatus, 20000);
                }
            })
            .catch(error => {
                console.log('Site check: Error (likely down or CORS issue):', error.message);
                setTimeout(checkSiteStatus, 20000);
            });
        }
            
        // Sofort mit der Überprüfung beginnen
        checkSiteStatus();
    </script>

Und hier ist der Konsolenfehler:

[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)

Wenn jemand Einblicke hat, würde ich mich freuen, sie zu erfahren. Grok und ich sind ratlos.

[NateDhaliwal]

@tknospdr

"true"

Versuchen Sie es ohne die doppelten Anführungszeichen, da es sonst als Zeichenkette und nicht als boolescher Wert interpretiert werden kann.

[tknospdr (David Muszynski)]

Warte jetzt auf den Abschluss des Rebuilds zum Testen. Wenn das der Fall ist, muss jemand diese Seite korrigieren:

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…

Da dort angezeigt wird, dass true in Anführungszeichen gesetzt wird.

Rebuild abgeschlossen, keine Änderung.

[NateDhaliwal]

Nun, das ist seltsam… andere Umgebungsvariablen dort haben true-Werte ohne Anführungszeichen.

[Olle11]

Ist dies besser als CSP, wenn man beispielsweise JavaScript in Beiträgen verwenden möchte?

Ich habe mich bisher auf Theme-Komponenten oder CSP verlassen, um JS auszuführen.

Mit freundlichen Grüßen
Olle

[supermathie (Michael Brown)]

@NateDhaliwal

Versuchen Sie es ohne die doppelten Anführungszeichen, da es sonst als Zeichenkette und nicht als boolescher Wert interpretiert werden kann.

Hier wird es in eine Umgebungsvariable eingefügt, die nur eine Zeichenkette sein kann. Das spielt keine Rolle.

Aber im Allgemeinen ist dies eine gute Sache, die man im Hinterkopf behalten sollte, da man unerwartete Ergebnisse für harmlos aussehende Werte erhalten kann:

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