Flesh out CSP.

2026-05-09 00:22:24 +02:00 · 2026-04-27 22:01:20 +02:00
parent 2a027264b3
commit 4e5b938ebe
12 changed files with 26 additions and 20 deletions
--- a/authentik/brands/utils.py
+++ b/authentik/brands/utils.py
@@ -66,4 +66,5 @@ def context_processor(request: HttpRequest) -> dict[str, Any]:
        "footer_links": tenant.footer_links,
        "html_meta": {**get_http_meta()},
        "version": authentik_full_version(),
+        "csp_nonce": request.request_id,
    }
--- a/authentik/core/templates/base/header_js.html
+++ b/authentik/core/templates/base/header_js.html
@@ -1,7 +1,7 @@
 {% load i18n %}
 {% get_current_language as LANGUAGE_CODE %}

-<script data-id="authentik-config">
+<script data-id="authentik-config" nonce="{{ csp_nonce }}">
    "use strict";

    window.authentik = {
--- a/authentik/core/templates/base/skeleton.html
+++ b/authentik/core/templates/base/skeleton.html
@@ -14,6 +14,7 @@
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        {# Darkreader breaks the site regardless of theme as its not compatible with webcomponents, and we default to a dark theme based on preferred colour-scheme #}
        <meta name="darkreader-lock">
+        <script>window.litNonce = "{{ csp_nonce }}";</script>
        <title>{% block title %}{% trans title|default:brand.branding_title %}{% endblock %}</title>
        <link rel="icon" href="{{ brand.branding_favicon_url }}">
        <link rel="shortcut icon" href="{{ brand.branding_favicon_url }}">
@@ -27,7 +28,7 @@

        {% include "base/theme.html" %}

-        <style data-id="brand-css">{{ brand_css }}</style>
+        <style data-id="brand-css" nonce="{{ csp_nonce }}">{{ brand_css }}</style>
        <script src="{% versioned_script 'dist/poly-%v.js' %}" type="module"></script>
        {% block head %}
        {% endblock %}
--- a/authentik/core/templates/base/theme.html
+++ b/authentik/core/templates/base/theme.html
@@ -9,7 +9,7 @@
  <meta name="color-scheme" content="light" />
  <meta name="theme-color" content="#ffffff">
  {% else %}
-  <script data-id="theme-script">
+  <script data-id="theme-script" nonce="{{ csp_nonce }}">
    "use strict";

    (function () {
@@ -22,7 +22,7 @@
            if (!(["auto", "light", "dark"].includes(locallyStoredTheme))) {
                locallyStoredTheme = null;
            }
-            
+
            const initialThemeChoice =
                new URLSearchParams(window.location.search).get("theme") || locallyStoredTheme;

--- a/authentik/core/templates/login/base_full.html
+++ b/authentik/core/templates/login/base_full.html
@@ -10,7 +10,7 @@
 {% endblock %}

 {% block head %}
-<style data-id="static-styles">
+<style data-id="static-styles" nonce="{{ csp_nonce }}">
    :root {
        --ak-global--background-image: url("{{ request.brand.branding_default_flow_background_url }}");
    }
--- a/authentik/flows/templates/flows/frame-submit.html
+++ b/authentik/flows/templates/flows/frame-submit.html
@@ -1,5 +1,5 @@
 <html>
-<script>
+<script nonce="{{ csp_nonce }}">
  window.parent.postMessage({
    message: "submit",
    source: "goauthentik.io",
--- a/authentik/flows/templates/if/flow-sfe.html
+++ b/authentik/flows/templates/if/flow-sfe.html
@@ -17,7 +17,7 @@
        <meta name="sentry-trace" content="{{ sentry_trace }}" />
        <link rel="prefetch" href="{{ flow_background_url }}" />
        {% include "base/header_js.html" %}
-        <style data-id="flow-sfe">
+        <style data-id="flow-sfe" nonce="{{ csp_nonce }}">
          html,
          body {
            height: 100%;
@@ -43,13 +43,13 @@
            max-width: 100%;
          }
        </style>
+        <script src="{% static 'dist/sfe/index.js' %}"></script>
    </head>
    <body class="d-flex align-items-center py-4 bg-body-tertiary">
-      <div class="card m-auto">
-        <main class="form-signin w-100 m-auto" id="flow-sfe-container">
-        </main>
-        <span class="mt-3 mb-0 text-muted text-center">{% trans 'Powered by authentik' %}</span>
-      </div>
-      <script src="{% static 'dist/sfe/index.js' %}"></script>
+        <div class="card m-auto">
+            <main class="form-signin w-100 m-auto" id="flow-sfe-container">
+            </main>
+            <span class="mt-3 mb-0 text-muted text-center">{% trans 'Powered by authentik' %}</span>
+        </div>
    </body>
 </html>
--- a/authentik/flows/templates/if/flow.html
+++ b/authentik/flows/templates/if/flow.html
@@ -12,7 +12,7 @@
 {% comment %}
    @see {@link web/types/webcomponents.d.ts} for type definitions.
 {% endcomment %}
-<script data-id="shady-dom">
+<script data-id="shady-dom" nonce="{{ csp_nonce }}">
    "use strict";

    window.ShadyDOM = window.ShadyDOM || {}
@@ -20,7 +20,7 @@
 </script>
 {% endif %}
 {% include "base/header_js.html" %}
-<script data-id="flow-config">
+<script data-id="flow-config" nonce="{{ csp_nonce }}">
    "use strict";

    window.authentik.flow = {
@@ -37,7 +37,7 @@

 {% block head %}
 <script src="{% versioned_script 'dist/flow/FlowInterface-%v.js' %}" type="module"></script>
-<style data-id="flow-css">
+<style data-id="flow-css" nonce="{{ csp_nonce }}">
  :root {
      --ak-global--background-image: url("{{ flow_background_url }}");
  }
@@ -55,10 +55,10 @@
        loading
    >
        {% include "base/placeholder.html" %}
-        
+
        <ak-brand-links name="flow-links" slot="footer"></ak-brand-links>
    </ak-flow-executor>
-    
+
    <ak-flow-inspector
        slot="panel"
        id="flow-inspector"
--- a/web/src/admin/events/EventMap.ts
+++ b/web/src/admin/events/EventMap.ts
@@ -40,10 +40,10 @@ export interface SelectedFeatureEventDetail {
 export class Map extends OlMap {
    public render() {
        return html`
-            <style>
+            <style nonce="${window.litNonce!}">
                ${OL}
            </style>
-            <style>
+            <style nonce="${window.litNonce!}">
                :host {
                    display: block;
                }
--- a/web/src/flow/sources/apple/AppleLoginInit.ts
+++ b/web/src/flow/sources/apple/AppleLoginInit.ts
@@ -23,6 +23,7 @@ export class AppleLoginInit extends BaseStage<AppleLoginChallenge, AppleChalleng

    firstUpdated(): void {
        const appleAuth = document.createElement("script");
+        appleAuth.nonce = window.litNonce;
        appleAuth.src =
            "https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js";
        appleAuth.type = "text/javascript";
--- a/web/src/flow/sources/telegram/utils.ts
+++ b/web/src/flow/sources/telegram/utils.ts
@@ -17,6 +17,8 @@ export function loadTelegramWidget(
    const widgetScript = document.createElement("script");
    widgetScript.src = "https://telegram.org/js/telegram-widget.js?22";
    widgetScript.type = "text/javascript";
+    widgetScript.nonce = window.litNonce || "";
+
    widgetScript.setAttribute("data-radius", "0");
    widgetScript.setAttribute("data-telegram-login", botUsername);
    if (requestMessageAccess) {
--- a/web/src/flow/stages/captcha/CaptchaStage.ts
+++ b/web/src/flow/stages/captcha/CaptchaStage.ts
@@ -308,6 +308,7 @@ export class CaptchaStage
        const scriptElement = document.createElement("script");

        scriptElement.src = challengeURL.toString();
+        scriptElement.nonce = window.litNonce || "";
        scriptElement.async = true;
        scriptElement.defer = true;
        scriptElement.onload = this.#scriptLoadListener;