Stop nunjucks from escaping HTML

Question

I have a comments AJAX call which returns data of the posted comment, I also have @mention functionality built in, the server side is processing the @mentions and doing a str_replace on the mentioned users replacing their names with an a tag within the response, for example:

{
   data: {
      comment: "<a href=\"profile/derp\">Username</a> hey what's up"
   }
}

However I can't seem to find in the documentation how to allow nunjucks to print this as actual HTML, it escapes it and displays the code instead of letting it be a real a tag.

Does anyone know how I can allow this to be printed as an actual a tag?

score 78 · Accepted Answer · edited Oct 06 '19 at 18:46

78

OK so almost immediately after I posted this I found the answer! for anyone else looking it's simply this; within your template where you're printing your variable add the safe filter, which will disable automatic escaping.

{{ comment.content|safe }}

Although this means it's vulnerable to XSS injection, so make sure you add your protection on the server side.

edited Oct 06 '19 at 18:46

Malekai

4,765
5
25
60

answered Apr 25 '15 at 13:54

André Figueira

6,048
14
48
62

4

This threw me because when I initially saw the filter, I thought it was the *opposite*--that safe would escape HTML. – Scribblemacher Jun 01 '17 at 01:36
2

you saved me :) – Ali Nov 08 '17 at 15:08

score 12 · Answer 2 · edited Oct 06 '19 at 18:47

12

You can also avoid escaping globally using:

nunjucks.configure({ autoescape: false });

edited Oct 06 '19 at 18:47

Malekai

4,765
5
25
60

answered Apr 18 '16 at 14:18

jibe

578
1
4
12

7

Though you almost never want to do this. – danneu Feb 06 '17 at 21:40

score 5 · Answer 3 · edited Oct 06 '19 at 18:47

5

You could consider passing the comment's meta data and letting the template create the HTML:

<p>
  <a href="{{ comment.user.url }}">{{ comment.user.name }}</a> {{ comment.text }}
</p>

Then pass the following meta data:

comment: {
  user: { url: "profile/derp", name: "Username" },
  text: "hey what's up"
}

edited Oct 06 '19 at 18:47

Malekai

4,765
5
25
60

answered May 28 '15 at 05:38

Ja͢ck

170,779
38
263
309

Thanks for your suggestion, but the issue is the template does not know before hand if there will be a link, as this link is only added if there are mentions, which can be within a comment for example. – André Figueira May 28 '15 at 14:01
1

@AndréFigueira you can add a conditional statement. – Ja͢ck May 28 '15 at 14:11

Stop nunjucks from escaping HTML

3 Answers3