search

Shopify / slate

Slate is a toolkit for developing Shopify themes. It's designed to assist your workflow and speed up the process of developing, testing, and deploying themes.
https://shopify.github.io/slate
MIT License
1.28k stars 364 forks source link

Loading SVG from URL get's blocked by Browser security #964

Open mxmtsk opened 5 years ago

mxmtsk commented 5 years ago

Problem

We're creating an SVG Sprite for all our icons and load the icons via the use tag to get the benefit of caching this file. While developing it's not possible to load the SVG file cause Chrome blocks the request to localhost for security reasons, because it's an XML and loading XML from a different domain is prohibited.

Unsafe attempt to load URL https://localhost:8080/icons.svg from frame with URL https://our-shop.myshopify.com. Domains, protocols and ports must match.

Replication steps

Put an SVG in the asset folder and try to link it in your theme:

<svg viewBox="0 0 100 100" class="pd-sprite-icon pd-sprite-icon-heart">
  <use xlink:href="{{ '../assets/images/icons.svg' | asset_url }}#icon-heart"></use>
</svg>

I think there's no real solution. The only thing I could think of would be an exception to the asset_url tag so that it serves the SVG directly from shopify, basically what it does with liquid files. When changed, upload the file and reload the browser.

t-kelly commented 5 years ago

The assets folder on Shopify servers does not support subfolders. You can have subfolders in your Slate project, but they get flattened on build (look at your dist/ folder). Reference assets by file name: {{ 'icons.svg' | asset_url }}.

See https://github.com/Shopify/slate/releases/tag/v1.0.0-beta.12 for more details

mxmtsk commented 5 years ago

@t-kelly Sorry, we're still on a previous version where it was like this, but the problem won't change does it? It would still get loaded from localhost when developing, which is the underlying issue.