In a front-facing view

When you own the template, build or collect the media in the view and put it in the context:

from django.shortcuts import render
from js_asset import ImportMap, Media, Script

def dashboard(request):
    media = Media(
        importmap=ImportMap({"chart": "chart/index.js"}),
        js=[Script("dashboard.js", type="module")],
    )
    return render(request, "dashboard.html", {"media": media})

form.media is already a js_asset.Media as soon as one of its widgets returns one, so you can render it directly. Combine your own assets with a form’s by simply adding them – as long as one side is a js_asset.Media the result stays one (regardless of order) and merges import maps. If neither side is, wrap one with Media.from_media first (Media(form.media) does not work, because forms.Media copies from a media definition, not an instance):

def edit(request):
    form = MyForm()
    page = Media(
        importmap=ImportMap({"editor": "editor/index.js"}),
        js=[Script("editor/init.js", type="module")],
    )
    media = page + form.media            # or: Media.from_media(form.media)
    return render(request, "edit.html", {"form": form, "media": media})

{# edit.html #}
<head>{{ media }}</head>
...
{{ form }}

Attach a per-request CSP nonce with media.with_nonce(request.csp_nonce) – see CSP nonces below.

In the Django admin

In the admin you write no view code: the admin collects ModelAdmin.media together with every form’s and widget’s media itself and renders it in the change form. All you have to do is make sure the widget that needs the import map returns a js_asset.Media:

from django.contrib import admin
from django import forms
from js_asset import ImportMap, Media, Script

class EditorWidget(forms.Textarea):
    media = Media(
        importmap=ImportMap({"editor": "editor/index.js"}),
        js=[Script("editor/init.js", type="module")],
    )

class ArticleForm(forms.ModelForm):
    class Meta:
        model = Article
        fields = "__all__"
        widgets = {"body": EditorWidget}

@admin.register(Article)
class ArticleAdmin(admin.ModelAdmin):
    form = ArticleForm

Because js_asset.Media keeps its type through the additions Django performs while combining ModelAdmin.media with the form media, the object the admin finally renders is a js_asset.Media – so the import maps your widgets contribute are merged into the single tag automatically, ahead of the admin’s own scripts. The same widget works unchanged outside the admin.

The admin adds ModelAdmin.media before the media of forms, widgets and inlines, so an import map on a ModelAdmin cannot override entries of import maps added by widgets.

The admin’s change list renders {{ media.css }} and {{ media.js }} separately, so it doesn’t render import maps, e.g. of widgets used with list_editable. Add them using a template which extends the admin’s own:

{# templates/admin/change_list.html #}
{% extends "admin/change_list.html" %}

{% block extrahead %}{{ media.importmap }}{{ block.super }}{% endblock %}

Use {% csp_nonce_attr media.importmap %} instead of {{ media.importmap }} with Django’s CSP support (Django 6.1 and newer).

Django 6.1 and newer (built-in CSP)

Django 6.1 added the csp_nonce_attr template tag with forms.Media support, and js_asset.Media plugs straight into it – no extra wiring. Configure CSP as usual:

# settings.py
from django.utils.csp import CSP

MIDDLEWARE = [
    # ...
    "django.middleware.csp.ContentSecurityPolicyMiddleware",
]

SECURE_CSP = {
    "default-src": [CSP.SELF],
    "script-src": [CSP.SELF, CSP.NONCE],
    "style-src": [CSP.SELF, CSP.NONCE],
}

TEMPLATES = [{
    # ...
    "OPTIONS": {
        "context_processors": [
            # ...
            "django.template.context_processors.csp",
        ],
    },
}]

Then render the media with the built-in {% csp_nonce_attr %} tag, which calls media.render(attrs={"nonce": ...}) for you:

{% csp_nonce_attr form.media %}

That single tag emits the merged import map and every script/stylesheet, each carrying the per-request nonce.

Django 6.0 (built-in CSP, no csp_nonce_attr)

Django 6.0 has the built-in CSP middleware, the SECURE_CSP setting and the csp context processor, but not the csp_nonce_attr tag (that arrived in 6.1). Configure CSP exactly as for Django 6.1 and newer (built-in CSP) above; the only difference is that you apply the nonce yourself.

Drop in a small tag. The built-in {{ csp_nonce }} value is lazy and reads as falsy until first used, so the tag wraps it in str(). It also copes with a plain forms.Media – Media(form.media) does not work, because forms.Media copies assets from a media definition, not an instance, so use from_media:

# yourapp/templatetags/js_asset_csp.py
from django import template
from js_asset import Media

register = template.Library()

@register.simple_tag(takes_context=True)
def media_with_nonce(context, media):
    nonce = context.get("csp_nonce", "")
    if not isinstance(media, Media):
        media = Media.from_media(media)
    return media.with_nonce(str(nonce)).render()

{% load js_asset_csp %}
{% media_with_nonce form.media %}

with_nonce() returns a copy, so a shared/cached widget media object is never mutated and one request’s nonce can never leak into another.

Django 4.2 to 5.x (with django-csp)

Older Django has no built-in CSP, so use the third-party django-csp package. Install it, add its middleware, and make sure the nonce is part of the relevant directives.

With django-csp 4.x the policy is a single setting and the nonce is a sentinel from csp.constants:

# settings.py (django-csp 4.x)
from csp.constants import NONCE, SELF

MIDDLEWARE = [
    # ...
    "csp.middleware.CSPMiddleware",
]

CONTENT_SECURITY_POLICY = {
    "DIRECTIVES": {
        "default-src": [SELF],
        "script-src": [SELF, NONCE],
        "style-src": [SELF, NONCE],
    },
}

django-csp 3.x uses individual settings instead, and you opt the nonce into directives with CSP_INCLUDE_NONCE_IN:

# settings.py (django-csp 3.x)
CSP_DEFAULT_SRC = ("'self'",)
CSP_SCRIPT_SRC = ("'self'",)
CSP_STYLE_SRC = ("'self'",)
CSP_INCLUDE_NONCE_IN = ("script-src", "style-src")

Either way the middleware exposes the per-request nonce as request.csp_nonce. It is lazy: django-csp only adds the nonce to the response header once the value has actually been used. Rendering the media with it counts as using it, so you do not have to do anything special – just make sure you render through js_asset. Attach the nonce in the view and render the copy:

def my_view(request):
    form = MyForm()
    return render(request, "page.html", {
        "form_media": form.media.with_nonce(request.csp_nonce),
    })

{{ form_media }}

If you would rather stay in the template, the media_with_nonce() approach is exactly the same as for Django 6.0 (built-in CSP, no csp_nonce_attr) above, only its source changes. The template tag’s nonce line can read request.csp_nonce (the request context processor must be enabled):

nonce = getattr(context.get("request"), "csp_nonce", "")

Anywhere: set the nonce explicitly

You can always set the nonce yourself, either on construction or per request:

Media(nonce=the_nonce, js=[...])               # at construction
some_media.with_nonce(the_nonce)               # copy with a nonce
some_media.render(attrs={"nonce": the_nonce})  # one-off render