Escape strings for JavaScript using Jinja2?

Question

How do I escape HTML with Jinja2 so that it can be used as a string in JavaScript (jQuery)?

If I were using Django's templating system I could write:

$("#mydiv").append("{{ html_string|escapejs }}"); 

Django's |escapejs filter would escape things in html_string (eg quotes, special chars) that could break the intended use of this code block, but Jinja2 does not seem to have an equivalent filter (am I wrong here?).

Is there a cleaner solution than copying/pasting the code from Django?

Answer 1

Jinja2 has nice filter tojson. If you make json from string, it will generate string enclosed in double quotes "". You can safely use it in javascript. And you don't need put quotes around by yourself.

$("#mydiv").append({{ html_string|tojson }}); 

It also escapes <>& symbols. So it is safe even when sting contains something XSS dangerous like <script>

Answer 2

This is a escapejs filter, based on Django's one, that I wrote for use in Jinja2 templates:

_js_escapes = {         '\\': '\\u005C',         '\'': '\\u0027',         '"': '\\u0022',         '>': '\\u003E',         '<': '\\u003C',         '&': '\\u0026',         '=': '\\u003D',         '-': '\\u002D',         ';': '\\u003B',         u'\u2028': '\\u2028',         u'\u2029': '\\u2029' } # Escape every ASCII character with a value less than 32. _js_escapes.update(('%c' % z, '\\u%04X' % z) for z in xrange(32)) def jinja2_escapejs_filter(value):         retval = []         for letter in value:                 if _js_escapes.has_key(letter):                         retval.append(_js_escapes[letter])                 else:                         retval.append(letter)          return jinja2.Markup("".join(retval)) JINJA_ENVIRONMENT.filters['escapejs'] = jinja2_escapejs_filter 

Example safe usage in a template:

<script type="text/javascript"> <!-- var variableName = "{{ variableName | escapejs }}"; … //--> </script> 

When variableName is a str or unicode.