Generate some code for CSP support

Author: matthiask

CHANGELOG.rst

@@ -8,6 +8,9 @@ Next version
 ~~~~~~~~~~~~
 
 - Added a ``static_lazy`` helper.
+- Added full CSP support for all object-based media classes:
+  - Added ``attrs`` parameter to ``CSS``, ``JSON``, and updated ``ImportMap`` constructor to accept attributes
+  - All classes now support adding a ``nonce`` attribute for CSP security
 
 
 3.1 (2025-02-28)

README.rst

@@ -14,7 +14,7 @@ Usage
 =====
 
 Use this to insert a script tag via ``forms.Media`` containing additional
-attributes (such as ``id`` and ``data-*`` for CSP-compatible data
+attributes (such as ``id``, ``nonce`` for CSP support, and ``data-*`` for CSP-compatible data
 injection.):
 
 .. code-block:: python
@@ -25,6 +25,7 @@ injection.):
         JS("asset.js", {
             "id": "asset-script",
             "data-answer": "42",
+            "nonce": "{{ request.csp_nonce }}",  # For CSP support
         }),
     ])
 
@@ -34,7 +35,7 @@ now contain a script tag as follows, without line breaks:
 .. code-block:: html
 
     <script type="text/javascript" src="/static/asset.js"
-        data-answer="42" id="asset-script"></script>
+        data-answer="42" id="asset-script" nonce="random-nonce-value"></script>
 
 The attributes are automatically escaped. The data attributes may now be
 accessed inside ``asset.js``:
@@ -65,21 +66,24 @@ So, you can add everything at once:
 
     from js_asset import CSS, JS, JSON
 
+    # Get the CSP nonce from the request context
+    nonce = request.csp_nonce
+
     forms.Media(js=[
-        JSON({"configuration": 42}, id="widget-configuration"),
-        CSS("widget/style.css"),
-        CSS("p{color:red;}", inline=True),
-        JS("widget/script.js", {"type": "module"}),
+        JSON({"configuration": 42}, id="widget-configuration", attrs={"nonce": nonce}),
+        CSS("widget/style.css", attrs={"nonce": nonce}),
+        CSS("p{color:red;}", inline=True, attrs={"nonce": nonce}),
+        JS("widget/script.js", {"type": "module", "nonce": nonce}),
     ])
 
 This produces:
 
 .. code-block:: html
 
-    <script id="widget-configuration" type="application/json">{"configuration": 42}</script>
-    <link href="/static/widget/style.css" media="all" rel="stylesheet">
-    <style media="all">p{color:red;}</style>
-    <script src="/static/widget/script.js" type="module"></script>
+    <script id="widget-configuration" type="application/json" nonce="random-nonce-value">{"configuration": 42}</script>
+    <link href="/static/widget/style.css" media="all" rel="stylesheet" nonce="random-nonce-value">
+    <style media="all" nonce="random-nonce-value">p{color:red;}</style>
+    <script src="/static/widget/script.js" type="module" nonce="random-nonce-value"></script>
 
 
 
@@ -152,10 +156,15 @@ widget classes for the admin than for the rest of your site.
 
 .. code-block:: python
 
-    # Example for adding a code.js JavaScript *module*
+    # Example for adding a code.js JavaScript *module* with CSP support
+    nonce = request.csp_nonce
+
+    # Create importmap with CSP nonce
+    importmap_with_nonce = ImportMap(importmap._importmap, {"nonce": nonce})
+
     forms.Media(js=[
-        importmap,  # See paragraph above!
-        JS("code.js", {"type": "module"}),
+        importmap_with_nonce,  # See paragraph above!
+        JS("code.js", {"type": "module", "nonce": nonce}),
     ])
 
 The code in ``code.js`` can now use a JavaScript import to import assets from

js_asset/js.py

@@ -23,17 +23,32 @@ class CSS:
     src: str
     inline: bool = field(default=False, kw_only=True)
     media: str = "all"
+    attrs: dict[str, Any] = field(default_factory=dict, kw_only=True)
 
     def __hash__(self):
         return hash(self.__str__())
 
     def __str__(self):
         if self.inline:
-            return format_html('<style media="{}">{}</style>', self.media, self.src)
+            if not self.attrs:
+                return format_html('<style media="{}">{}</style>', self.media, self.src)
+            return format_html(
+                '<style media="{}"{}>{}</style>',
+                self.media,
+                mark_safe(flatatt(self.attrs)),
+                self.src,
+            )
+        if not self.attrs:
+            return format_html(
+                '<link href="{}" media="{}" rel="stylesheet">',
+                static_if_relative(self.src),
+                self.media,
+            )
         return format_html(
-            '<link href="{}" media="{}" rel="stylesheet">',
+            '<link href="{}" media="{}" rel="stylesheet"{}>',
             static_if_relative(self.src),
             self.media,
+            mark_safe(flatatt(self.attrs)),
         )
 
 
@@ -59,25 +74,36 @@ def __str__(self):
 class JSON:
     data: dict[str, Any]
     id: str | None = field(default="", kw_only=True)
+    attrs: dict[str, Any] = field(default_factory=dict, kw_only=True)
 
     def __hash__(self):
         return hash(self.__str__())
 
     def __str__(self):
-        return json_script(self.data, self.id)
+        if not self.attrs:
+            return json_script(self.data, self.id)
+
+        script = json_script(self.data, self.id)
+        # Insert attributes before the closing tag
+        if self.attrs:
+            attrs_str = flatatt(self.attrs)
+            script = script.replace(">", f"{attrs_str}>", 1)
+        return mark_safe(script)
 
 
 @html_safe
 class ImportMap:
-    def __init__(self, importmap):
+    def __init__(self, importmap, attrs=None):
         self._importmap = importmap
+        self._attrs = attrs or {}
 
     def __str__(self):
         if self._importmap:
             html = json_script(self._importmap).removeprefix(
                 '<script type="application/json">'
             )
-            return mark_safe(f'<script type="importmap">{html}')
+            attrs_str = flatatt(self._attrs) if self._attrs else ""
+            return mark_safe(f'<script type="importmap"{attrs_str}>{html}')
         return ""
 
     def update(self, other):

tests/testapp/test_importmap.py

@@ -40,3 +40,17 @@ def test_merging(self):
             """\
 <script type="importmap">{"imports": {"a": "/static/a.js", "b": "/static/b.js", "/app/": "./original-app/", "/app/helper": "./helper/index.mjs"}, "integrity": {"/static/a.js": "sha384-blub-a", "/static/b.js": "sha384-blub-b"}, "scopes": {"/js": {"/app/": "./js-app/"}}}</script>""",
         )
+
+    def test_csp_nonce(self):
+        # Test with CSP nonce attribute
+        importmap = ImportMap(
+            {
+                "imports": {"a": "/static/a.js"},
+            },
+            attrs={"nonce": "random-nonce"},
+        )
+
+        self.assertEqual(
+            str(importmap),
+            '<script type="importmap" nonce="random-nonce">{"imports": {"a": "/static/a.js"}}</script>',
+        )

tests/testapp/test_js_asset.py

@@ -83,6 +83,17 @@ def test_css(self):
             '<style media="all">p{color:red}</style>',
         )
 
+        # Test with CSP nonce attribute
+        self.assertEqual(
+            str(CSS("app/style.css", attrs={"nonce": "random-nonce"})),
+            '<link href="/static/app/style.css" media="all" rel="stylesheet" nonce="random-nonce">',
+        )
+
+        self.assertEqual(
+            str(CSS("p{color:red}", inline=True, attrs={"nonce": "random-nonce"})),
+            '<style media="all" nonce="random-nonce">p{color:red}</style>',
+        )
+
     def test_json(self):
         self.assertEqual(
             str(JSON({"hello": "world"}, id="hello")),
@@ -93,3 +104,9 @@ def test_json(self):
             str(JSON({"hello": "world"})),
             '<script type="application/json">{"hello": "world"}</script>',
         )
+
+        # Test with CSP nonce attribute
+        self.assertEqual(
+            str(JSON({"hello": "world"}, id="hello", attrs={"nonce": "random-nonce"})),
+            '<script id="hello" type="application/json" nonce="random-nonce">{"hello": "world"}</script>',
+        )

tox.ini

@@ -14,5 +14,5 @@ deps =
     dj42: Django>=4.2,<5.0
     dj50: Django>=5.0,<5.1
     dj51: Django>=5.1,<5.2
-    dj52: Django>=5.2a1,<6.0
+    dj52: Django>=5.2,<6.0
     djmain: https://github.com/django/django/archive/main.tar.gz