I would like to use Content Security Policy and make my Django web application safe without any unsafe inline code. But while it is easy to move most of the JavaScript code to external files, I also have a segment of inline code which I do not know fix. I am using Django and I have some variables in Django template context which I want to pqww to JavaScript. So currently I simply output that as inline JavaScript. But this does not work because of CSP.

<script type="text/javascript">
    /* <![CDATA[ */
    var documentURL = '{% filter escapejs %}{{ document.get_document_url }}{% endfilter %}';
    /* ]]> */
</script>

I would like to use Content Security Policy and make my Django web application safe without any unsafe inline code. But while it is easy to move most of the JavaScript code to external files, I also have a segment of inline code which I do not know fix. I am using Django and I have some variables in Django template context which I want to pqww to JavaScript. So currently I simply output that as inline JavaScript. But this does not work because of CSP.

<script type="text/javascript">
    /* <![CDATA[ */
    var documentURL = '{% filter escapejs %}{{ document.get_document_url }}{% endfilter %}';
    /* ]]> */
</script>

• javascript
• django
• content-security-policy

• 1 You could output that value to a hidden field (and read it via JavaScript) – Kevin Boucher Commented Oct 29, 2012 at 15:49
• What about more plex data-types? For example, it is very easy to output dict as JSON and JavaScript reads it as an object. – Mitar Commented Oct 29, 2012 at 15:58
• Well, 'easy' is a relative term, but yes you can do that. I've used that method on more than one occassion. – Kevin Boucher Commented Oct 29, 2012 at 16:02
• At the end I decided using data- attributes on one empty div. – Mitar Commented Oct 30, 2012 at 4:30
• An alternative solution is to use a nonce-adding middleware to add a nonce to your context and the same nonce to your CSP header. Usng this method you can convert all inline scripts (and css) to be patible with CSP in one fell swoop (or at least a simple find and replace to add in {{ nonce }} to all inline scripts). – DylanYoung Commented Sep 28, 2016 at 18:20

1 Answer 1

To put the ments in answer form and add a little...

The easiest way to do this is generate a tag with an attribute set. I don't know django so I'll just leave it in plain html:

<input type="hidden" id="mything" value="<MY VALUE>">

When I have multiple, related values I might throw them into the same element:

<span class="hidden" data-attribute1="<VALUE1>" data-attribute2="<VALUE2>">
<!-- rename 'attributeN' to something meaningful obviously -->

In either case, just read the values with JS (using jquery for brevity)

$('#mything').data("attribute1")

Or if you need a plex object, throw it in a span as html entity escaped data:

<span class="hidden" id="data-container">
  <your html-escaped JSON>
</span>

And read it in the external file with:

var myObject = JSON.parse($('#data-container').html());

This is also describe at https://www.owasp/index.php/XSS_(Cross_Site_Scripting)_Prevention_Cheat_Sheet#RULE_.233.1_-_HTML_escape_JSON_values_in_an_HTML_context_and_read_the_data_with_JSON.parse