From 4e5b938ebee3020ca91aba7a0e240bf4bd55ccd2 Mon Sep 17 00:00:00 2001
From: Teffen Ellis <592134+GirlBossRush@users.noreply.github.com>
Date: Mon, 27 Apr 2026 22:01:20 +0200
Subject: [PATCH] Flesh out CSP.

---
 authentik/brands/utils.py                         |  1 +
 authentik/core/templates/base/header_js.html      |  2 +-
 authentik/core/templates/base/skeleton.html       |  3 ++-
 authentik/core/templates/base/theme.html          |  4 ++--
 authentik/core/templates/login/base_full.html     |  2 +-
 authentik/flows/templates/flows/frame-submit.html |  2 +-
 authentik/flows/templates/if/flow-sfe.html        | 14 +++++++-------
 authentik/flows/templates/if/flow.html            | 10 +++++-----
 web/src/admin/events/EventMap.ts                  |  4 ++--
 web/src/flow/sources/apple/AppleLoginInit.ts      |  1 +
 web/src/flow/sources/telegram/utils.ts            |  2 ++
 web/src/flow/stages/captcha/CaptchaStage.ts       |  1 +
 12 files changed, 26 insertions(+), 20 deletions(-)

diff --git a/authentik/brands/utils.py b/authentik/brands/utils.py
index 9b2b5be65c..2487653cb7 100644
--- 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,
     }
diff --git a/authentik/core/templates/base/header_js.html b/authentik/core/templates/base/header_js.html
index 39dc374cf0..cc5b673258 100644
--- 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 = {
diff --git a/authentik/core/templates/base/skeleton.html b/authentik/core/templates/base/skeleton.html
index 89cc7a4c9e..ff155e41fb 100644
--- 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 %}
diff --git a/authentik/core/templates/base/theme.html b/authentik/core/templates/base/theme.html
index 9be2091e13..d36d844ea2 100644
--- 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;
 
diff --git a/authentik/core/templates/login/base_full.html b/authentik/core/templates/login/base_full.html
index 1e55116354..d5c332d369 100644
--- 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 }}");
     }
diff --git a/authentik/flows/templates/flows/frame-submit.html b/authentik/flows/templates/flows/frame-submit.html
index d2f2aefc46..3d87299118 100644
--- 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",
diff --git a/authentik/flows/templates/if/flow-sfe.html b/authentik/flows/templates/if/flow-sfe.html
index 39f528d416..7f7abdb495 100644
--- 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>
diff --git a/authentik/flows/templates/if/flow.html b/authentik/flows/templates/if/flow.html
index ea5d0f60cb..3ad081d54e 100644
--- 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"
diff --git a/web/src/admin/events/EventMap.ts b/web/src/admin/events/EventMap.ts
index 48eee3aa2d..6af8adf633 100644
--- 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;
                 }
diff --git a/web/src/flow/sources/apple/AppleLoginInit.ts b/web/src/flow/sources/apple/AppleLoginInit.ts
index fa43245547..dbf4204dbc 100644
--- 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";
diff --git a/web/src/flow/sources/telegram/utils.ts b/web/src/flow/sources/telegram/utils.ts
index 54cc7e5414..d6fc8239d4 100644
--- 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) {
diff --git a/web/src/flow/stages/captcha/CaptchaStage.ts b/web/src/flow/stages/captcha/CaptchaStage.ts
index 1806123cbd..043ba5445e 100644
--- 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;