Can't figure out how to escape HTML in an .11ty.js template

[eeeps]

I'm trying (for probably bad reasons) to set up an Atom template using .11ty.js instead of Nunjucks.

While the sample Nunjucks template uses a filter called htmlToAbsoluteUrls, the plugin exports convertHtmlToAbsoluteUrls. The htmlToAbsoluteUrls Nunjucks filter calls convertHtmlToAbsoluteUrls and performs some sort of callback; I can't figure out where that callback is getting passed from.

Anyhoo, when I call convertHtmlToAbsoluteUrls directly, I don't get escaped HTML suitable for inclusion in <content type="html">.

How do I get escaped HTML?

[eeeps]

Wild, I guess the escaping is being handled by Nunjucks, itself?

https://github.com/11ty/eleventy-plugin-rss/issues/8#issuecomment-757371239

[pdehaan]

Nunjucks does have safe and escape filters (and a curious forceescape filter).

Plus:

• https://mozilla.github.io/nunjucks/templating.html#autoescaping
• https://mozilla.github.io/nunjucks/api.html#opts-autoescape
• https://mozilla.github.io/nunjucks/api.html#configure

  autoescape (default: true) controls if output with dangerous characters are escaped automatically. See Autoescaping

[eeeps]

@pdehaan Yeah, it looks like autoescape is doing the escape work in the sample Nunjucks.

I don't get that for free in my .11ty.js template, so I'll either have to Just Use Nunjucks or do the escaping some other way.

Thanks for the pointer!

[pdehaan]

@eeeps You could try extracting the Nunjucks filter and adding it to Eleventy.

const { escape } = require("nunjucks/src/filters");

module.exports = function (eleventyConfig) {
  eleventyConfig.addFilter("escape", escape);

  return {
    dir: {
      input: "src",
      output: "www",
    }
  };
};

And my homepage.11ty.js file looks like this:

class Homepage {
  data() {
    return {
      title: "This is the homepage",
    };
  }

  async render(data) {
    const str = `<h2>${ data.title }</h2>`;
    return `
      raw: ${ str }
      escaped: ${ this.escape(str).val }
    `;
  }
}

module.exports = Homepage;

[pdehaan]

Of course, you don't HAVE to ~steal~ borrow the built-in Nunjucks escape filter, you might be able to use something else like https://www.npmjs.com/package/escape-html if you don't require consistency w/ Nunjucks.

[eeeps]

@pdehaan that's cool! Didn't know you could borrow things like that...

For me myself personally, I've switched the template back to Nunjucks, and am making it work. I was doing some over engineerd stuff in my .11ty.js template, that I'm probably better off ditching anyways.

But, you know, it'd be nice to be able to do whatever. I guess this was all just a big +1 to https://github.com/11ty/eleventy-plugin-rss/issues/11

[pdehaan]

@pdehaan that's cool! Didn't know you could borrow things like that...

I mean, it's not without risk (Nunjucks or something refactors their code and something can easily break between releases), but it can be very useful if you want to use a specific Nunjucks filter in a LiquidJS template, or vice versa, or use some other filters in 11ty.js templates. Anyways, just a neat and delightfully dangerous little tip.

For your use case above, I'd probably suggest using the escape-html module instead of digging into the Nunjucks internals if possible. Or sounds like you're sticking with Nunjucks anyways, so not an immediate issue.