Safely Using JSON with html inside of the JSON in Django Templates

Question

How do you safely render JSON data in a django webapp?

On the server in django I generate JSON data and then render that JSON data in a django template. The JSON occasionally contains snippets of html. Most of the time, that's fine, however if the </script> tag is inside the JSON data when it is rendered, it destroys the surrounding javascript.

For example...

On the server, in python I'll have this:

template_data = {
    'my_json' : '[{"my_snippet": "<b>Happy HTML</b>"}]'
}
# pass the template data to the django template
return render_to_response('my_template.html', template_data, context_instance = c)

And then in the template:

<script type="text/javascript">
var the_json = {{my_json|safe}};
</script>
... some html ...

The resulting html works fine and looks like this:

<script type="text/javascript">
var the_json = [{"my_snippet": "<b>Happy HTML</b>"}];
</script>
... some html ...

However, you run into problems when, on the server, the JSON looks like this:

template_data = {
    'my_json' : '[{"my_snippet": "Bad HTML</script>"}]'
}
return render_to_response('my_template.html', template_data, context_instance = c)

Now, when it's rendered, you'll get:

<script type="text/javascript">
var the_json = [{"my_snippet": "Bad HTML</script>"}];
</script>
... some html ...

The closing script tag within the JSON code is treated as closing the entire script block. All of your javascript will then break.

One possible solution is to check for </script> when passing the template data to the template, but I feel like there is a better way.

You could serve it as json (via AJAX) or serve it as a javascript file (then include it using a script tag). — DanielB
– DanielB, Commented Jan 12, 2013 at 5:35

Flash · Accepted Answer · 2013-01-12 05:48:53Z

15

Safely insert the JSON as a string, and then call JSON.parse on it

Use escapejs instead of safe. It is designed for outputting to JavaScript.

var the_json = '{{my_json|escapejs}}';

To get a JavaScript object you then need to call JSON.parse on that string. This is always preferable than dumping a JSON-encoding into your script and evaluating it directly, for security reasons.

A useful filter to get python objects directly to the client that I use is this:

@register.filter
def to_js(value):
    """
    To use a python variable in JS, we call json.dumps to serialize as JSON server-side and reconstruct using
    JSON.parse. The serialized string must be escaped appropriately before dumping into the client-side code.
    """
    # separators is passed to remove whitespace in output
    return mark_safe('JSON.parse("%s")' % escapejs(json.dumps(value, separators=(',', ':'))))

And use it like:

var Settings = {{ js_settings|to_js }};

edited Jan 12, 2013 at 5:48

answered Jan 12, 2013 at 5:25

Flash

16.9k15 gold badges74 silver badges100 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

speedplane Over a year ago

If you do that then the_json becomes a string, not a javascript json object.

DanielB Over a year ago

You could do var the_json = JSON.parse({{my_json|escapejs}})

speedplane Over a year ago

I think you need to quote it, like this: var the_json = JSON.parse('{{my_json|escapejs}}')

Flash Over a year ago

The first line will simply get a string safely into your javascript. You then need to deserialize which is why I've created the filter. You should definitely use JSON.parse rather than hoping it parses as a legal object in any case.

xolox Over a year ago

Surprisingly tricky to get this nested escaping right, I couldn't quite reason my way out of it even though I fully understood the problem. Huge thanks to Andrew for (nicely) documenting the proper way to do this!

Collectives™ on Stack Overflow

Safely Using JSON with html inside of the JSON in Django Templates

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related