preload_tag filter lacking crossorigin option

chris-naturesgold commented 1 year ago

I have the following code, which theme-check is flagging as "For better performance, prefer using the preload_tag filter":

<link rel="preload" as="font" href="{{ header_font | font_url }}" type="font/woff2" crossorigin>

I tried using this liquid:

{{ header_font | font_url | preload_tag: as: 'font' }}

which generates this code:

<link href="not a real url" rel="preload" as="font" rel="preload">

But as its missing the crossorigin tag, this code isn't used due to CORS

Is adding the option to specifiy a crossorigin tag the correct approach?

shayanabbas commented 1 year ago

you can get crossorigin set like this: {{ header_font | font_url | preload_tag: as: 'font', type: 'font/woff2', crossorigin: 'anonymous' }}

chris-naturesgold commented 1 year ago

Thanks Shyan, wasn't aware of that syntax.

chris-naturesgold commented 1 year ago

Tried it out, unfortunately it created a broken url with &amp's in it (I've changed the domain name)

verses the original code: <link rel="preload" as="font" href="{{ header_font | font_url }}" type="font/woff2" crossorigin>

which generates a functional url:

shayanabbas commented 1 year ago

hmm but it shouldn't matter when you click the font URL does it download successfully or works or given any error?

To fix this, you can use the url_param_escape filter in Shopify Liquid to encode the URL. Try this code:

{{ header_font | font_url | url_param_escape | preload_tag: as: 'font', type: 'font/woff2', crossorigin: 'anonymous' }}

chris-naturesgold commented 1 year ago

It raises this error: "Missing or malformed 'hmac' query string parameter"

url_param_escape converts & to %26 which also results in that error.

perhaps this is another use case for https://github.com/Shopify/liquid/issues/1490 ?

chris-naturesgold commented 1 year ago

ChatGPT gave this solution:

module AmpersandFilter
  def unescape_ampersands(input)
    input.gsub('&amp;', '&')
  end
end

Liquid::Template.register_filter(AmpersandFilter)

which is then called via:

{{ your_variable_containing_ampersands | unescape_ampersands }}

question is - where should you put the module code?

chris-naturesgold commented 1 year ago

I must have made an error in testing. Shayan's original suggestion did indeed work, closing.

mangitmaharjan commented 1 year ago

Hi there,

I just wanted to add a few query to this thread as my query is related to preload_tag.

Issue: When i use preload_tag for font that is hosted on https://fonts.shopifycdn.com, the preload_tag is throwing error "Input must be a theme or shop asset URL.".

Code: {{ settings.type_body_font | font_url | preload_tag: 'font/woff2', crossorigin: 'anonymous' }}

Expected Output:

Output: Input must be a theme or shop asset URL.

Shopify / liquid

preload_tag filter lacking crossorigin option #1738