Backend: use of cdn causes remixicon.symbol.svg to not download due to its being an svg used with <use> tag

[rabbitbike]

Solidus Version: Solidus 4.3

To Reproduce

Deploy app with Rails.application.config.asset_host set to a cdn.

Current behavior

The "remixicon.symbol.svg" file used for admin menu icons fails to download.

Unsafe attempt to load URL https://cdn.<sitename>.com/assets/spree/backend/themes/solidus_admin/remixicon.symbol-b236392313df892b716a85fbda18cf45f13a558388803221c105fff3651d275a.svg from origin https://www.<sitename>.com. Domains, protocols and ports must match.

Expected behavior

Should be able to download the svg file and show admin menu icons.

Additional context

It seems like use of svg files with <use> tag has issues when served from cdn. I could not make it work through cdn settings, etc, so I would like to raise this as an issue.

I think I was able to resolve this issue by overriding asset_host in Spree::Admin::BaseController as follows, but I'm not sure if this is an optimal way to solve this:

def self.prepended(base)
       base.asset_host = proc { |source, request|
          if source.match? /remixicon[\w.-]+svg\z/
            request.try(:host).presence || "www.<sitename>.com"
          else
            "cdn.<sitename>.com"
          end
        }
      end

I hope a fix is provided or the documentation is updated to discuss this in detail.

Thank you🙏

Screenshots

[mrfidgety]

Got the exact same issue today. I'll report back with what I end up doing to fix it.

[mrfidgety]

I found some good documentation regarding the issue, and tried preloading the file from the using the deface gem, but to no avail. Ended up doing practically the same as you mentioned, which is avoiding the CDN for that one particular icon file 😞

[jarednorman]

My guess is that this component is playing nice with the CDN setup: https://github.com/solidusio/solidus/blob/f2a32d60ce80c402fc93932d15ed1c47d4ac0383/admin/app/components/solidus_admin/ui/icon/component.rb#L26

[tvdeyen]

We have the same issue in Alchemy and one proposed solution is to preload the asset with CORS enabled

1. Issue https://github.com/AlchemyCMS/alchemy_cms/issues/2937
2. PR that adds the preload https://github.com/AlchemyCMS/alchemy_cms/pull/3046