How does Shopify make their liquid templates safe (avoid XSS)?

Question

Shopify automatically escapes values if they are used in not safe way, but I have not found this feature in liquid gem.

Example:

template: <div data="{{ user_name }}">{{ user_name }}</div>

user_name: '" onclick="alert(\'XSS\')'

Shopify renders it as:

<div data="&quot; onclick=&quot;alert('XSS')&quot;">" onclick="alert('XSS')"</div>

Liquid gem renders it as:

<div data="" onclick="alert('XSS')">" onclick="alert('XSS')"</div>

Ruby code:

markup = '<div data="{{ user_name }}">{{ user_name }}</div>'
template = Liquid::Template.parse(markup)

template.render!('user_name' => '" onclick="alert(\'XSS\')')   

How does Shopify do it?

I know that there is escape filter in liquid or I can escape values on back-end. But Shopify's solution looks safer: you don't get XSS vulnerability if forget to encode a value and code looks cleaner: {{ value }} instead of {{ value | encode }}

Thank you

Answer 1

I am not sure how it is "exactly done", but in the Shopify rendered output it seems that user_name was html escaped.