Allow to integrate subresource-integrity attributes to javascript and…

… stylesheet tags.

Require to add the two following keys beside "output_filename" in Django's setting PIPELINE['JAVASCRIPT']["your package"] and PIPELINE['STYLESHEETS']["your package"] and :

"crossorigin": "anonymous",
"integrity": "sha384",
Of course, "sha256" and "sha512" also works.
Hashes are computed at runtime and cached to minimize code changes.

Cf. https://infosec.mozilla.org/guidelines/web_security#subresource-integrity

docs/configuration.rst

@@ -132,6 +132,25 @@ A dictionary passed to compiler's ``compile_file`` method as kwargs. None of def
 
 Defaults to ``{}``.
 
+``crossorigin``
+...............
+
+**Optional**
+
+Indicate if you want to add to the group this attribute that provides support for CORS, defining how the element handles cross-origin requests, thereby enabling the configuration of the CORS requests for the element's fetched data. .
+
+Missing by default (the attribute is not added), the only valid values currently are ``anonymous`` and ``use-credentials``.
+
+``integrity``
+.............
+
+**Optional**
+
+Indicate if you want to add the sub-resource integrity (SRI) attribute to the group.
+This attribute contains inline metadata that a user agent can use to verify that a fetched resource has been delivered free of unexpected manipulation
+
+Missing by default, and only valid values are ``"sha256"``, ``"sha384"`` and ``"sha512"``.
+
 
 Other settings
 --------------

pipeline/jinja2/__init__.py

@@ -42,7 +42,12 @@ def render_css(self, package, path):
         template_name = package.template_name or "pipeline/css.jinja"
         context = package.extra_context
         context.update(
-            {"type": guess_type(path, "text/css"), "url": staticfiles_storage.url(path)}
+            {
+                "type": guess_type(path, "text/css"),
+                "url": staticfiles_storage.url(path),
+                "crossorigin": package.config.get("crossorigin"),
+                "integrity": package.get_sri(path),
+             }
         )
         template = self.environment.get_template(template_name)
         return template.render(context)
@@ -66,6 +71,8 @@ def render_js(self, package, path):
             {
                 "type": guess_type(path, "text/javascript"),
                 "url": staticfiles_storage.url(path),
+                "crossorigin": package.config.get("crossorigin"),
+                "integrity": package.get_sri(path),
             }
         )
         template = self.environment.get_template(template_name)

pipeline/jinja2/pipeline/css.jinja

@@ -1 +1 @@
-<link href="{{ url }}" rel="stylesheet" type="{{ type }}"{% if media %} media="{{ media }}"{% endif %}{% if charset %} charset="{{ charset }}"{% endif %} />
+<link href="{{ url }}" rel="stylesheet" type="{{ type }}"{% if media %} media="{{ media }}"{% endif %}{% if charset %} charset="{{ charset }}"{% endif %}{% if integrity %} integrity="{{ integrity }}"{% endif %}{% if crossorigin %} crossorigin="{{ crossorigin }}"{% endif %} />

pipeline/jinja2/pipeline/js.jinja

@@ -1 +1 @@
-<script{% if async %} async{% endif %}{% if defer %} defer{% endif %} type="{{ type }}" src="{{ url }}" charset="utf-8"></script>
+<script{% if async %} async{% endif %}{% if defer %} defer{% endif %} type="{{ type }}" src="{{ url }}" charset="utf-8"{% if integrity %} integrity="{{ integrity }}"{% endif %}{% if crossorigin %} crossorigin="{{ crossorigin }}"{% endif %}></script>

pipeline/packager.py

@@ -1,3 +1,7 @@
+import base64
+import hashlib
+from functools import lru_cache
+
 from django.contrib.staticfiles.finders import find, get_finders
 from django.contrib.staticfiles.storage import staticfiles_storage
 from django.core.files.base import ContentFile
@@ -61,6 +65,20 @@ def manifest(self):
     def compiler_options(self):
         return self.config.get("compiler_options", {})
 
+    @lru_cache
+    def get_sri(self, path):
+        method = self.config.get("integrity")
+        if method not in {"sha256", "sha384", "sha512"}:
+            return None
+        if staticfiles_storage.exists(path):
+            with staticfiles_storage.open(path) as fd:
+                h = getattr(hashlib, method)()
+                for data in iter(lambda: fd.read(16384), b""):
+                    h.update(data)
+            digest = base64.b64encode(h.digest()).decode()
+            return f"{method}-{digest}"
+        return None
+
 
 class Packager:
     def __init__(

pipeline/templates/pipeline/css.html

@@ -1 +1 @@
-<link href="{{ url }}" rel="stylesheet" type="{{ type }}" media="{{ media|default:"all" }}"{% if title %} title="{{ title }}"{% endif %}{% if charset %} charset="{{ charset }}"{% endif %} />
+<link href="{{ url }}" rel="stylesheet" type="{{ type }}" media="{{ media|default:"all" }}"{% if title %} title="{{ title }}"{% endif %}{% if charset %} charset="{{ charset }}"{% endif %}{% if integrity %} integrity="{{ integrity }}"{% endif %}{% if crossorigin %} crossorigin="{{ crossorigin }}"{% endif %} />

pipeline/templates/pipeline/css.jinja

@@ -1 +1 @@
-<link href="{{ url }}" rel="stylesheet" type="{{ type }}"{% if media %} media="{{ media }}"{% endif %}{% if charset %} charset="{{ charset }}"{% endif %} />
+<link href="{{ url }}" rel="stylesheet" type="{{ type }}"{% if media %} media="{{ media }}"{% endif %}{% if charset %} charset="{{ charset }}"{% endif %}{% if integrity %} integrity="{{ integrity }}"{% endif %}{% if crossorigin %} crossorigin="{{ crossorigin }}"{% endif %} />

pipeline/templates/pipeline/js.html

@@ -1 +1 @@
-<script{% if async %} async{% endif %}{% if defer %} defer{% endif %} type="{{ type }}" src="{{ url }}" charset="utf-8"></script>
+<script{% if async %} async{% endif %}{% if defer %} defer{% endif %} type="{{ type }}" src="{{ url }}" charset="utf-8"{% if integrity %} integrity="{{ integrity }}"{% endif %}{% if crossorigin %} crossorigin="{{ crossorigin }}"{% endif %}></script>

pipeline/templates/pipeline/js.jinja

@@ -1 +1 @@
-<script{% if async %} async{% endif %}{% if defer %} defer{% endif %} type="{{ type }}" src="{{ url }}" charset="utf-8"></script>
+<script{% if async %} async{% endif %}{% if defer %} defer{% endif %} type="{{ type }}" src="{{ url }}" charset="utf-8"{% if integrity %} integrity="{{ integrity }}"{% endif %}{% if crossorigin %} crossorigin="{{ crossorigin }}"{% endif %}></script>

pipeline/templatetags/pipeline.py

@@ -152,6 +152,8 @@ def render_css(self, package, path):
             {
                 "type": guess_type(path, "text/css"),
                 "url": mark_safe(staticfiles_storage.url(path)),
+                "crossorigin": package.config.get("crossorigin"),
+                "integrity": package.get_sri(path),
             }
         )
         return render_to_string(template_name, context)
@@ -188,6 +190,8 @@ def render_js(self, package, path):
             {
                 "type": guess_type(path, "text/javascript"),
                 "url": mark_safe(staticfiles_storage.url(path)),
+                "crossorigin": package.config.get("crossorigin"),
+                "integrity": package.get_sri(path),
             }
         )
         return render_to_string(template_name, context)

tests/settings.py

@@ -89,6 +89,42 @@ def local_path(path):
                 "title": "Default Style",
             },
         },
+        "screen_crossorigin": {
+            "source_filenames": (
+                "pipeline/css/first.css",
+                "pipeline/css/second.css",
+                "pipeline/css/urls.css",
+            ),
+            "output_filename": "screen_crossorigin.css",
+            "crossorigin": "anonymous",
+        },
+        "screen_sri_sha256": {
+            "source_filenames": (
+                "pipeline/css/first.css",
+                "pipeline/css/second.css",
+                "pipeline/css/urls.css",
+            ),
+            "output_filename": "screen_sri_sha256.css",
+            "integrity": "sha256",
+        },
+        "screen_sri_sha384": {
+            "source_filenames": (
+                "pipeline/css/first.css",
+                "pipeline/css/second.css",
+                "pipeline/css/urls.css",
+            ),
+            "output_filename": "screen_sri_sha384.css",
+            "integrity": "sha384",
+        },
+        "screen_sri_sha512": {
+            "source_filenames": (
+                "pipeline/css/first.css",
+                "pipeline/css/second.css",
+                "pipeline/css/urls.css",
+            ),
+            "output_filename": "screen_sri_sha512.css",
+            "integrity": "sha512",
+        },
     },
     "JAVASCRIPT": {
         "scripts": {
@@ -137,6 +173,46 @@ def local_path(path):
                 "defer": True,
             },
         },
+        "scripts_crossorigin": {
+            "source_filenames": (
+                "pipeline/js/first.js",
+                "pipeline/js/second.js",
+                "pipeline/js/application.js",
+                "pipeline/templates/**/*.jst",
+            ),
+            "output_filename": "scripts_crossorigin.js",
+            "crossorigin": "anonymous",
+        },
+        "scripts_sri_sha256": {
+            "source_filenames": (
+                "pipeline/js/first.js",
+                "pipeline/js/second.js",
+                "pipeline/js/application.js",
+                "pipeline/templates/**/*.jst",
+            ),
+            "output_filename": "scripts_sha256.js",
+            "integrity": "sha256",
+        },
+        "scripts_sri_sha384": {
+            "source_filenames": (
+                "pipeline/js/first.js",
+                "pipeline/js/second.js",
+                "pipeline/js/application.js",
+                "pipeline/templates/**/*.jst",
+            ),
+            "output_filename": "scripts_sha384.js",
+            "integrity": "sha384",
+        },
+        "scripts_sri_sha512": {
+            "source_filenames": (
+                "pipeline/js/first.js",
+                "pipeline/js/second.js",
+                "pipeline/js/application.js",
+                "pipeline/templates/**/*.jst",
+            ),
+            "output_filename": "scripts_sha512.js",
+            "integrity": "sha512",
+        },
     },
 }