Automatic output escaping

[floofnoodlecode]

Hello,

As far as I understand, there is no auto-escape mechanism built into liquidjs. Would it be possible to provide an option that would enable auto-escaping of any output rendered by {{ value }}?

My use case is that users will write .liquid templates for rendering HTML, JSON, etc. Requiring the users to make sure that every single output is escaped properly (e.g. {{ x | escape}} for HTML, or {{ x | json}} for JSON) is tedious and confusing.

Would you be willing to add an option that takes a function which will be applied on every output? (e.g. {autoEscape: (val: any) => any})

[harttle]

Makes sense. This option makes templates safer.

[github-actions]

🎉 This issue has been resolved in version 9.37.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[harttle]

Now it's supported on v9.37.0. I created some test cases here:

liquidjs/test/integration/liquid/outputEscape.ts

Lines 4 to 42 in f88490c

	describe('LiquidOptions#*outputEscape*', function () {
	it('when outputEscape is not set', async function () {
	const engine = new Liquid()
	const html = await engine.parseAndRender('{{"<"}}')
	expect(html).to.equal('<')
	})
	it('should escape when outputEscape="escape"', async function () {
	const engine = new Liquid({
	outputEscape: 'escape'
	})
	const html = await engine.parseAndRender('{{"<"}}')
	expect(html).to.equal('&lt;')
	})
	it('should json stringify when outputEscape="json"', async function () {
	const engine = new Liquid({
	outputEscape: 'json'
	})
	const html = await engine.parseAndRender('{{"<"}}')
	expect(html).to.equal('"<"')
	})
	it('should support outputEscape=Function', async function () {
	const engine = new Liquid({
	outputEscape: (v: any) => `{${v}}`
	})
	const html = await engine.parseAndRender('{{"<"}}')
	expect(html).to.equal('{<}')
	})
	it('should skip escape for output with filter "| raw"', async function () {
	const engine = new Liquid({
	outputEscape: 'escape'
	})
	const html = await engine.parseAndRender('{{"<" | raw}}')
	expect(html).to.equal('<')
	})
	})

And you may also need this raw filter now: https://liquidjs.com/filters/raw.html

[floofnoodlecode]

This is such great news. Thank you very much.

This will be so much cleaner than my hack. I wasn't expecting you to add this feature so soon so I registered a tag that would add the "| escape" filter to all output tokens. 😂

By the way, one observation regarding the docs: https://liquidjs.com/tutorials/parse-parameters.html

The docs instruct to create a new tokenizer like so: const tokenizer = new Tokenizer(tagToken.args).
However, typescript complains that 2-3 args are needed. I saw that in your code you actually use this: const tokenizer = new Tokenizer(token.args, this.liquid.options.operatorsTrie)

[rauschma]

Another option would be to do what Handlebars does:

• {{expression}} escapes expression before inserting it.
  • By default, escaping is for HTML, but users can provide their own escape function.
• {{{expression}}} inserts unescaped/raw.

Source: https://handlebarsjs.com/guide/expressions.html