preload_tag filter lacking crossorigin option

Question

preload_tag filter lacking crossorigin option

chris-naturesgold opened this issue 10 months ago · comments

chris-naturesgold commented 10 months 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?

Shayan Abbas · Answer 1 · Thu Aug 03 2023 04:30:16 GMT+0800 (China Standard Time)

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

chris-naturesgold · Answer 2 · Thu Aug 03 2023 06:02:45 GMT+0800 (China Standard Time)

Thanks Shyan, wasn't aware of that syntax.

chris-naturesgold · Answer 3 · Thu Aug 03 2023 06:21:53 GMT+0800 (China Standard Time)

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:

Shayan Abbas · Answer 4 · Thu Aug 03 2023 07:25:56 GMT+0800 (China Standard Time)

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 · Answer 5 · Thu Aug 03 2023 07:36:51 GMT+0800 (China Standard Time)

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 #1490 ?

chris-naturesgold · Answer 6 · Thu Aug 03 2023 08:45:31 GMT+0800 (China Standard Time)

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 · Answer 7 · Thu Aug 03 2023 09:58:20 GMT+0800 (China Standard Time)

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

Mangit Maharjan · Answer 8 · Tue Sep 05 2023 15:30:32 GMT+0800 (China Standard Time)

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.