Content-Security-Policy and strict-dynamic

[sshishov]

Django Debug Toolbar is blocked by CSP if we are using strict-dynamic.
Django already support it from the box if we can include nonce="{{request.csp_nonce}}" in the template

[tim-schilling]

Thanks for opening the issue.

Django already support it from the box if we can include nonce="{{request.csp_nonce}}" in the template

Can you elaborate on where in the template this should go? A PR would be welcome too. If not, defining this issue so a newcomer could pick it up would be very helpful to us.

[jkevingutierrez]

Hey!

I just encounter myself with this issue.

The error that I'm getting is something like

Refused to load the script 'http://localhost:8000/static/debug_toolbar/js/toolbar.js' because it violates the following Content Security Policy directive: "script-src-elem 'strict-dynamic' 

To fix this, every script/style added in this library should allow to add a nonce.

ex:

https://github.com/jazzband/django-debug-toolbar/blob/main/debug_toolbar/templates/debug_toolbar/redirect.html#L6

Could be something like

<script type="module" src="{% static 'debug_toolbar/js/toolbar.js' %}" async nonce="{{ CUSTOM_NONCE }}"></script>

[braiam]

@tim-schilling according to this proposal it isn't in django core yet. It's a third party project that seems to be the defacto library for django implementations.

[sshishov]

It is not django core yet, but everyone who is using Django and CSP, they 99% using django-csp library which producing request.csp_nonce which can be injected. We can check for the key and inject otherwise there is no way to inject.

Or we have to come up with dynamic nature of it and allow to set it either in global template context and reused here or by any other means...

Please, let's fix it, guys!

[sshishov]

For anyone who is looking for simple workaround, we are solving it like this (using django-csp):

We created template named debug_toolbar/base.html and put this content inside:

{% extends "debug_toolbar/base.html" %}
{% load static %}
{% block js %}
<script nonce="{{toolbar.request.csp_nonce}}" type="module" src="{% static 'debug_toolbar/js/toolbar.js' %}" async></script>
{% endblock %}

For maintainers, I would better add additional context inside the class, along with toolbar variable, where we can provide this nonce if we want or similar

NOTE: request is not available in the template as debug_toolbar is using render_to_string without providing the request in context:

return render_to_string("debug_toolbar/base.html", context)

Maybe we should provide request for it?
Docs: https://docs.djangoproject.com/en/dev/topics/templates/#django.template.loader.render_to_string

[tim-schilling]

Is there a common pattern for how other libraries that include JS support injecting nonces?

[sshishov]

Hi @tim-schilling , recently I was adding the support for some libraries. Webpack is adding it using global __webpack_nonce__ variable I guess, you can google it.

Other libraries, like google analytics provides the support for nonce parameter inside. But I am talking here about JS/React libraries itself, not the usage of them.
More and more libraries in npm start supporting nonce as it is the standard way to keep the application secure.

For the case of debug_toolbar, as it is not FE application, it is based on Django templating, we should come up with something, or find how other apps (which using templates) are doing it themselves...

[robhudson]

This caught my eye since I'm working on the next version of django-csp.

It sounds like there's a couple cases -- a project that has CSP and one that doesn't. The one that doesn't shouldn't have any problem loading the toolbar. It's those projects that have CSP that need the nonce.

The django-csp project provides a context processor. Would it make sense to add a note in the toolbar install docs that if your project uses CSP, also add csp.context_processors.nonce to your context processors? Then, in the template where we include the script we can add a conditional {% if CSP_NONCE %} nonce="{{ CSP_NONCE }}"{% endif %}.

This seems like it should work in both types of projects.

[matthiask]

@robhudson Thanks! This sounds like an excellent idea to me. We could even add a system check for this.

[karolyi]

The includes/panel_content.html also needs a fixup:

{% load static %}

{% if panel.has_content and panel.enabled %}
  <div id="{{ panel.panel_id }}" class="djdt-panelContent djdt-hidden">
    <div class="djDebugPanelTitle">
      <button type="button" class="djDebugClose">×</button>
      <h3>{{ panel.title }}</h3>
    </div>
    <div class="djDebugPanelContent">
      {% if toolbar.should_render_panels %}
        {% for script in panel.scripts %}<script nonce="{{ toolbar.request.csp_nonce }}" type="module" src="{{ script }}" async></script>{% endfor %}
        <div class="djdt-scroll">{{ panel.content }}</div>
      {% else %}
        <div class="djdt-loader"></div>
        <div class="djdt-scroll"></div>
      {% endif %}
    </div>
  </div>
{% endif %}