クロスオリジンリソース共有（CORS）の設定

ドキュメント セルフホスティング
1

:notebook_with_decorative_cover: これは、Discourse でクロスオリジンリソース共有 (CORS) を設定するプロセスを説明する how-to ガイドです。

CORS は、Web ページ上の多くのリソース (フォント、JavaScript など) を、リソースの発生元ドメイン以外のドメインから要求できるようにするメカニズムです。

Discourse サイトで CORS を設定する方法は次のとおりです。

前提条件

開始する前に、CORS を有効にするには、環境変数 DISCOURSE_ENABLE_CORS を true に設定する必要があります。

これに関するヘルプについては、環境変数の設定方法を参照してください。

:sparkles: Discourse ホストサイトをご利用の場合、この手順は既に完了しており、追加の設定は不要です。

サイト設定へのアクセス

Discourse 管理パネルに移動します。そこから、「設定」タブに移動します。

CORS 設定の場所

「設定」タブで、検索バーを使用して cors origin と入力します。CORS に関連する次の設定が表示されるはずです。

image
image1053×187 8.86 KB

この設定により、Discourse インスタンスへのクロスオリジンリクエストを許可するドメインを指定できます。

ここに正確なドメインをスペースで区切って入力する必要があります。セキュリティリスクを引き起こす可能性があるため、ワイルドカード (*) の使用は避けてください。

複数のドメインをここに追加する場合、各 URL は区切る必要があります。たとえば、次のようになります。

image
image1154×140 9.66 KB

変更の保存

必要な変更を加えたら、ページ下部にある 変更を保存 ボタンをクリックすることを忘れないでください。

重要な注意点

CORS (クロスオリジンリソース共有) の不適切な実装は、潜在的なセキュリティリスクをもたらす可能性があります。サイトで CORS を有効にする際に考慮すべき点がいくつかあります。

  • 正確なドメインを指定する: CORS 設定でワイルドカード (*) を使用すると、任意のドメインがサーバーとやり取りできるようになり、重大なセキュリティリスクとなります。正確なドメインを指定することをお勧めします。
  • 公開するデータを最小限に抑える: CORS は、信頼する外部ドメインから必要なデータのみを公開するように設定する必要があります。管理していないサイトに CORS アクセスを許可することは推奨されません。
  • HTTPS を使用する: 可能であれば、CORS 設定で非 HTTPS サイトを許可しないようにしてください。これにより、データが暗号化されていない形式で公開される可能性があります。
「いいね！」 2
How to post pictures via API?
Set Environmental Variables
2

Google広告を使用している場合は、この設定には触らない方が良いかもしれません😉

CORS（およびCSP）は少し問題があります。サイトが事実上すべてを許可する必要があることが多いため、ほとんど役に立ちません。

「いいね！」 2
3

サイトの app.yml ファイルの env セクションに DISCOURSE_ENABLE_CORS: "true" を追加しました。
その後、アプリを再構築しました。
次に cors_origins セクションに移動し、連携させようとしているサイトの完全なURLを追加しましたが、まだ機能していません。
メインサイトがオフラインの場合に情報を表示するページを作成しました。
メインサイトを確認し、復旧したらリダイレクトするためにこのJavaScriptをページに配置しましたが、機能していないようです。
コードはこちらです。

    <script>
        function checkSiteStatus() {
            fetch('https://discourse.technospider.com', {
                method: 'HEAD',
                mode: 'cors', // ステータスコードを取得するためにCORSを使用
                cache: 'no-store' // キャッシュを避ける
            })
            .then(response => {
                console.log('サイトチェック: ステータス', response.status);
                if (response.ok) { // 200-299 のステータスコード
                    console.log('サイトは稼働中です。Discourseにリダイレクトします');
                    window.location.replace('https://discourse.technospider.com');
                } else {
                    console.log('サイトはまだダウンしています（ステータス: ' + response.status + '）。20秒後に再試行します');
                    setTimeout(checkSiteStatus, 20000);
                }
            })
            .catch(error => {
                console.log('サイトチェック: エラー（ダウンしているかCORSの問題の可能性が高い）:', error.message);
                setTimeout(checkSiteStatus, 20000);
            });
        }
            
        // すぐにチェックを開始します
        checkSiteStatus();
    </script>

そして、こちらがコンソールエラーです。

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

何か insight があれば教えていただけると嬉しいです。Grok と私はお手上げ状態です。

4

二重引用符なしで試してください。そうしないと、ブール値ではなく文字列として解釈される可能性があります。

5

再構築が完了するのを待って、テストします。もしそうなら、このページを修正する必要があります。

ダブルクォーテーションの中に true を入れているように表示されているためです。

再構築完了、変更なし。 :frowning:

6

それは奇妙ですね… 他の環境変数には引用符なしで true の値が設定されています。

7

これは、例えば投稿でJavaScriptを使用したい場合に、CSPよりも優れていますか？

現在、JSを実行するためにテーマコンポーネントまたはCSPに依存しています。

よろしくお願いします
Olle

8

ここでは環境変数に入っているので、文字列しか受け付けません。問題ありません。

しかし、一般的には、無害に見える値に対して予期しない結果が得られる可能性があるため、これは心に留めておくべき良いことです。

pry(main)> YAML.load('on: yes').to_s
=> "{true=>true}"
「いいね！」 1
9

こんにちは！管理していない、安全でない可能性のあるウェブサイトから/latest.jsonをロードしたいです。例えば、/u/myname/user-menu-private-messagesではなく、/latest.jsonのような特定のURLにのみCORSヘッダーを有効にすることは可能ですか？