javascript - How to remove unsafe inline code for Content Security Policy? - Stack Overflow

admin管理员组

文章数量:1023773

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

Share Improve this question Follow edited Nov 9, 2012 at 10:00 Mike West 5,1512626 silver badges2626 bronze badges asked Oct 29, 2012 at 15:42 MitarMitar 7,15088 gold badges6767 silver badges9494 bronze badges 5

• 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

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

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

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

Share Improve this question Follow edited Nov 9, 2012 at 10:00 Mike West 5,1512626 silver badges2626 bronze badges asked Oct 29, 2012 at 15:42 MitarMitar 7,15088 gold badges6767 silver badges9494 bronze badges 5

• 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

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

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

本文标签： javascriptHow to remove unsafe inline code for Content Security PolicyStack Overflow