subfolders 使用時の svg-sprite における Discourse_docker (blocked:csp) エラー

SVG スプライトのサブフォルダシナリオでは、すべてのロジックが整っており、すでに複数のサイトで正常に機能しています。しかし、今回は非常に特定の境界ケースに遭遇しました。@vkozyrev のサイト(ブラウザコンソール)の主要変数を確認すると以下の通りです。

> Discourse.SvgSpritePath
"/svg-sprite/sales-community-staging.rainmakers.co/svg-2-8ed106e6e3d908b1b86898dfe93a7bac0fd358f4.js"
> Discourse.BaseUri
"/sales-community"

問題なさそうです。次に、SVG スプライトシートを読み込む際、loadScript を使用します。これは内部で Discourse.getURL を呼び出します。この関数はサブフォルダプレフィックスを追加する役割を担っています。試してみましょう。

> Discourse.getURL(Discourse.SvgSpritePath)
"/svg-sprite/sales-community-staging.rainmakers.co/svg-2-8ed106e6e3d908b1b86898dfe93a7bac0fd358f4.js"

ええと…何も変化がありません。別のランダムな URL は正常に動作します。

> Discourse.getURL("/blah")
"/sales-community/blah"

さらに詳しく調査すると、getUrl 内の この行 が原因であることが分かりました。

if (url.indexOf(Discourse.BaseUri) !== -1) return url;

つまり、「URL にすでにサブフォルダプレフィックスが含まれている場合は、処理を中止する」という意味です。したがって、今回の問題は、@vkozyrev のサブフォルダプレフィックス(/sales-community)が SVG スプライトシート URL の途中に含まれていることです。

/svg-sprite/sales-community-staging.rainmakers.co/svg-2-8ed106e6e3d908b1b86898dfe93a7bac0fd358f4.js

私はチェックをより具体的に変更し、URL の 先頭 にのみサブフォルダプレフィックスが含まれているかどうかを確認するようにしました。

ただし、これにより他の潜在的な問題も考えられます。例えば、サブフォルダプレフィックスを /t/about、あるいは Discourse で使用される他の任意の URL に設定したい場合などです :thinking:

「いいね!」 10