diff --git a/cfgov/agreements/jinja2/agreements/base_agreements.html b/cfgov/agreements/jinja2/agreements/base_agreements.html
index 60e9e553810..875817e3dff 100644
--- a/cfgov/agreements/jinja2/agreements/base_agreements.html
+++ b/cfgov/agreements/jinja2/agreements/base_agreements.html
@@ -9,7 +9,7 @@
 {{ super() }}
 <script src="{{ static( 'agreements/js/jquery-3.5.1.min.js' ) }}"></script>
 <script src="{{ static( 'agreements/js/chosen.jquery.js' ) }}"></script>
-<script>
+<script nonce="{{request.csp_nonce}}">
     $(document).ready(function () {
         $("#issuer_select").chosen();
         $("#issuer_select").chosen().change( function(e){
diff --git a/cfgov/ask_cfpb/jinja2/ask-cfpb/landing-page.html b/cfgov/ask_cfpb/jinja2/ask-cfpb/landing-page.html
index dff27067ea5..2f78a113453 100644
--- a/cfgov/ask_cfpb/jinja2/ask-cfpb/landing-page.html
+++ b/cfgov/ask_cfpb/jinja2/ask-cfpb/landing-page.html
@@ -48,5 +48,7 @@
 
 {% block javascript scoped %}
     {{ super() }}
-    <script src="{{ static('apps/ask-cfpb/js/main.js') }}"></script>
+    <script nonce="{{request.csp_nonce}}">
+      jsl(["{{ static('apps/ask-cfpb/js/main.js') }}"])
+    </script>
 {% endblock javascript %}
diff --git a/cfgov/cfgov/settings/base.py b/cfgov/cfgov/settings/base.py
index d7029c71985..a040298cbf0 100644
--- a/cfgov/cfgov/settings/base.py
+++ b/cfgov/cfgov/settings/base.py
@@ -463,117 +463,29 @@
         "HOSTNAMES": environment_json("CLOUDFRONT_PURGE_HOSTNAMES")
     }
 
-# CSP Allowlists
+# CSP
 #
-# Please note: Changing these lists will change the value of the
-# Content-Security-Policy header Django returns. Django does NOT include
-# header values when calculating the response hash returned in the ETag
-# header.
-# Our Akamai cache uses the ETag header to know whether a cached copy of a
-# page has been updated after it expires or after an invalidation purge.
-#
-# Together, this means that any changes to these CSP values WILL NOT BE
-# RETURNED by Akamai until a page's non-header content changes, or a
-# delete-purge is performed.
+# See https://web.dev/articles/strict-csp
 
-# These specify what is allowed in <script> tags
 CSP_SCRIPT_SRC = (
-    "'self'",
+    "'strict-dynamic'",
+    "https:",
     "'unsafe-inline'",
-    "'unsafe-eval'",
-    "*.consumerfinance.gov",
-    "dap.digitalgov.gov",
-    "*.googleanalytics.com",
-    "*.google-analytics.com",
-    "*.googletagmanager.com",
-    "*.googleoptimize.com",
-    "optimize.google.com",
-    "api.mapbox.com",
-    "js-agent.newrelic.com",
-    "bam.nr-data.net",
-    "gov-bam.nr-data.net",
-    "*.youtube.com",
-    "*.ytimg.com",
-    "*.mouseflow.com",
-    "*.geo.census.gov",
-    "about:",
-    "www.federalregister.gov",
-    "*.qualtrics.com",
-    "www.ssa.gov/accessibility/andi/",
-    "ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js", # needed for ANDI accessibility tool
 )
-
-# These specify valid sources of CSS code
 CSP_STYLE_SRC = (
     "'self'",
     "'unsafe-inline'",
-    "*.consumerfinance.gov",
-    "*.googletagmanager.com",
-    "optimize.google.com",
-    "fonts.googleapis.com",
-    "api.mapbox.com",
-    "www.ssa.gov/accessibility/andi/",
+    "https:",
 )
-
-# These specify valid image sources
 CSP_IMG_SRC = (
-    "'self'",
-    "*.consumerfinance.gov",
-    "www.ecfr.gov",
-    "s3.amazonaws.com",
-    "img.youtube.com",
-    "*.google-analytics.com",
-    "*.googletagmanager.com",
-    "optimize.google.com",
-    "api.mapbox.com",
-    "*.tiles.mapbox.com",
-    "blob:",
+    "*",
     "data:",
-    "www.gravatar.com",
-    "*.qualtrics.com",
-    "*.mouseflow.com",
-    "i.ytimg.com",
-    "www.ssa.gov/accessibility/andi/",
-)
-
-# These specify what URL's we allow to appear in frames/iframes
-CSP_FRAME_SRC = (
-    "'self'",
-    "*.consumerfinance.gov",
-    "*.googletagmanager.com",
-    "*.google-analytics.com",
-    "*.googleoptimize.com",
-    "optimize.google.com",
-    "www.youtube.com",
-    "*.qualtrics.com",
-    "mailto:",
-)
-
-# These specify where we allow fonts to come from
-CSP_FONT_SRC = ("'self'", "fonts.gstatic.com")
-
-# These specify hosts we can make (potentially) cross-domain AJAX requests to
-CSP_CONNECT_SRC = (
-    "'self'",
-    "*.consumerfinance.gov",
-    "*.google-analytics.com",
-    "*.googleoptimize.com",
-    "*.tiles.mapbox.com",
-    "api.mapbox.com",
-    "bam.nr-data.net",
-    "gov-bam.nr-data.net",
-    "s3.amazonaws.com",
-    "public.govdelivery.com",
-    "n2.mouseflow.com",
-    "*.qualtrics.com",
-    "raw.githubusercontent.com",
-)
-
-# These specify valid media sources (e.g., MP3 files)
-CSP_MEDIA_SRC = (
-    "'self'",
-    "*.consumerfinance.gov",
+    "blob:",
 )
+CSP_OBJECT_SRC = ("'none'")
+CSP_BASE_URI = ("'none'")
+CSP_INCLUDE_NONCE_IN = ["script-src"]
+CSP_EXCLUDE_URL_PREFIXES = ("/admin")
 
 # FEATURE FLAGS
 # Flags can be declared here with an empty list, which will evaluate as false
diff --git a/cfgov/cfgov/settings/local.py b/cfgov/cfgov/settings/local.py
index df40e7f7c9c..de0b87bc881 100644
--- a/cfgov/cfgov/settings/local.py
+++ b/cfgov/cfgov/settings/local.py
@@ -94,8 +94,6 @@
     f"//{_placeholder_domain}/{{width}}x{{height}}/addc91/1fa040"
 )
 
-CSP_IMG_SRC += (_placeholder_domain,)
-
 # Add django-cprofile-middleware to enable lightweight local profiling.
 # The middleware's profiling is only available if DEBUG=True
 MIDDLEWARE += ("django_cprofile_middleware.middleware.ProfilerMiddleware",)
diff --git a/cfgov/filing_instruction_guide/jinja2/filing_instruction_guide/index.html b/cfgov/filing_instruction_guide/jinja2/filing_instruction_guide/index.html
index 6c0d510bfb2..430e35e8459 100644
--- a/cfgov/filing_instruction_guide/jinja2/filing_instruction_guide/index.html
+++ b/cfgov/filing_instruction_guide/jinja2/filing_instruction_guide/index.html
@@ -38,7 +38,7 @@ <h1>{{ page.page_header }}</h1>
 
 {% block javascript scoped %}
     {{ super() }}
-    <script>
+    <script nonce="{{request.csp_nonce}}">
         jsl(['{{ static("apps/filing-instruction-guide/js/fig-init.js") }}']);
     </script>
 {% endblock javascript %}
diff --git a/cfgov/housing_counselor/jinja2/housing_counselor/index.html b/cfgov/housing_counselor/jinja2/housing_counselor/index.html
index 54ff3376b6d..9e50b827320 100644
--- a/cfgov/housing_counselor/jinja2/housing_counselor/index.html
+++ b/cfgov/housing_counselor/jinja2/housing_counselor/index.html
@@ -315,7 +315,7 @@ <h2 class="h4">
 {% block javascript %}
     {{ super() }}
 
-    <script>
+    <script nonce="{{request.csp_nonce}}">
       // Store backend settings to pass to front-end scripts.
       window.cfpbHudSettings = {};
       window.cfpbHudSettings.hud_data = {};
@@ -325,7 +325,7 @@ <h2 class="h4">
       window.cfpbHudSettings.mapbox_access_token = "{{ mapbox_access_token }}";
     </script>
 
-    <script>
+    <script nonce="{{request.csp_nonce}}">
       jsl(['{{ static("apps/find-a-housing-counselor/js/common.js") }}']);
     </script>
 {% endblock javascript %}
diff --git a/cfgov/jinja2/ccdb-complaint/ccdb-search.html b/cfgov/jinja2/ccdb-complaint/ccdb-search.html
index f04c3f1f834..a256f5b0db8 100644
--- a/cfgov/jinja2/ccdb-complaint/ccdb-search.html
+++ b/cfgov/jinja2/ccdb-complaint/ccdb-search.html
@@ -38,7 +38,7 @@
 
 {% block javascript scoped %}
     {{ super() }}
-    <script>
+    <script nonce="{{request.csp_nonce}}">
       jsl([
         'https://files.consumerfinance.gov/ccdb/metadata.js',
         '{{ static("apps/ccdb-search/js/main.js") }}'
diff --git a/cfgov/jinja2/owning-a-home/explore-rates/index.html b/cfgov/jinja2/owning-a-home/explore-rates/index.html
index e0293c3dc3f..736ec093720 100644
--- a/cfgov/jinja2/owning-a-home/explore-rates/index.html
+++ b/cfgov/jinja2/owning-a-home/explore-rates/index.html
@@ -606,7 +606,7 @@ <h3 class="subhead">About our data source for this tool</h3>
 
 {% block javascript scoped %}
     {{ super() }}
-    <script>
+    <script nonce="{{request.csp_nonce}}">
       jsl([
         '{{ static("apps/owning-a-home/js/common.js") }}',
         '{{ static("apps/owning-a-home/js/explore-rates/index.js") }}'
diff --git a/cfgov/jinja2/rural-or-underserved/index.html b/cfgov/jinja2/rural-or-underserved/index.html
index e8a0eee38de..df40b0a5e04 100644
--- a/cfgov/jinja2/rural-or-underserved/index.html
+++ b/cfgov/jinja2/rural-or-underserved/index.html
@@ -19,7 +19,7 @@
 
 {% block javascript scoped %}
     {{ super() }}
-    <script>
+    <script nonce="{{request.csp_nonce}}">
       window.cfpbMapboxAccessToken = '{{ mapbox_access_token }}';
       jsl(['{{ static("apps/rural-or-underserved-tool/js/common.js") }}']);
     </script>
diff --git a/cfgov/paying_for_college/jinja2/paying-for-college/college-costs.html b/cfgov/paying_for_college/jinja2/paying-for-college/college-costs.html
index 460c532aec0..023103a755d 100644
--- a/cfgov/paying_for_college/jinja2/paying-for-college/college-costs.html
+++ b/cfgov/paying_for_college/jinja2/paying-for-college/college-costs.html
@@ -77,7 +77,7 @@ <h1 style="display:none">Your financial path to graduation</h1>
 
 {% block javascript scoped %}
     {{ super() }}
-    <script>
+    <script nonce="{{request.csp_nonce}}">
       jsl(['{{ static("apps/paying-for-college/js/college-costs.js") }}']);
     </script>
 {% endblock javascript %}
diff --git a/cfgov/paying_for_college/jinja2/paying-for-college/disclosure.html b/cfgov/paying_for_college/jinja2/paying-for-college/disclosure.html
index 7a15cc7c2cd..e88cf48bef6 100644
--- a/cfgov/paying_for_college/jinja2/paying-for-college/disclosure.html
+++ b/cfgov/paying_for_college/jinja2/paying-for-college/disclosure.html
@@ -3332,7 +3332,7 @@ <h2 class="step__heading">
 
 {% block javascript scoped %}
 {{ super() }}
-<script>
+<script nonce="{{request.csp_nonce}}">
   jsl(['{{ static("apps/paying-for-college/js/disclosures/index.js") }}']);
 </script>
 {% endblock javascript %}
diff --git a/cfgov/prepaid_agreements/jinja2/prepaid_agreements/detail.html b/cfgov/prepaid_agreements/jinja2/prepaid_agreements/detail.html
index 4520af9cd3c..f730f701903 100644
--- a/cfgov/prepaid_agreements/jinja2/prepaid_agreements/detail.html
+++ b/cfgov/prepaid_agreements/jinja2/prepaid_agreements/detail.html
@@ -137,7 +137,7 @@ <h2 class="m-slug-header__heading">
 
 {% block javascript scoped %}
     {{ super() }}
-    <script>
+    <script nonce="{{request.csp_nonce}}">
       jsl(['{{ static("js/routes/data-research/prepaid-accounts/search-agreements/index.js") }}']);
     </script>
 {% endblock javascript %}
diff --git a/cfgov/prepaid_agreements/jinja2/prepaid_agreements/index.html b/cfgov/prepaid_agreements/jinja2/prepaid_agreements/index.html
index f7a48745ecf..16e7877353e 100644
--- a/cfgov/prepaid_agreements/jinja2/prepaid_agreements/index.html
+++ b/cfgov/prepaid_agreements/jinja2/prepaid_agreements/index.html
@@ -89,7 +89,7 @@ <h3 class="h4 u-mb5">Search within</h3>
 
 {% block javascript %}
     {{ super() }}
-    <script>
+    <script nonce="{{request.csp_nonce}}">
       jsl(['{{ static("apps/prepaid-agreements/js/common.js") }}']);
     </script>
 {% endblock javascript %}
diff --git a/cfgov/privacy/jinja2/privacy/disclosure-consent-form.html b/cfgov/privacy/jinja2/privacy/disclosure-consent-form.html
index 42d71fbbc39..072e04291ea 100644
--- a/cfgov/privacy/jinja2/privacy/disclosure-consent-form.html
+++ b/cfgov/privacy/jinja2/privacy/disclosure-consent-form.html
@@ -304,7 +304,7 @@ <h2>Consent for disclosure of records</h2>
 
 {% block javascript %}
     {{ super() }}
-    <script>
+    <script nonce="{{request.csp_nonce}}">
       jsl(['{{ static("js/routes/on-demand/privacy-forms.js") }}']);
     </script>
 {% endblock javascript %}
diff --git a/cfgov/privacy/jinja2/privacy/records-access-form.html b/cfgov/privacy/jinja2/privacy/records-access-form.html
index fbec1e23d9d..a1e3658ffeb 100644
--- a/cfgov/privacy/jinja2/privacy/records-access-form.html
+++ b/cfgov/privacy/jinja2/privacy/records-access-form.html
@@ -277,7 +277,7 @@ <h2>Consent for release of records</h2>
 
 {% block javascript %}
     {{ super() }}
-    <script>
+    <script nonce="{{request.csp_nonce}}">
       jsl(['{{ static("js/routes/on-demand/privacy-forms.js") }}']);
     </script>
 {% endblock javascript %}
diff --git a/cfgov/regulations3k/jinja2/regulations3k/browse-regulation.html b/cfgov/regulations3k/jinja2/regulations3k/browse-regulation.html
index 0b9a00fe5db..56695a45b83 100644
--- a/cfgov/regulations3k/jinja2/regulations3k/browse-regulation.html
+++ b/cfgov/regulations3k/jinja2/regulations3k/browse-regulation.html
@@ -312,7 +312,7 @@ <h1>{{ page.title }}</h1>
 
 {% block javascript scoped %}
     {{ super() }}
-    <script>
+    <script nonce="{{request.csp_nonce}}">
       jsl([
         '{{ static("apps/regulations3k/js/index.js") }}',
         '{{ static("apps/regulations3k/js/permalinks.js") }}'
diff --git a/cfgov/regulations3k/jinja2/regulations3k/landing-page.html b/cfgov/regulations3k/jinja2/regulations3k/landing-page.html
index f2e18afd8b8..09db4da5219 100644
--- a/cfgov/regulations3k/jinja2/regulations3k/landing-page.html
+++ b/cfgov/regulations3k/jinja2/regulations3k/landing-page.html
@@ -43,7 +43,7 @@
 
 {% block javascript scoped %}
     {{ super() }}
-    <script>
+    <script nonce="{{request.csp_nonce}}">
       jsl([
         '{{ static("apps/regulations3k/js/index.js") }}',
         '{{ static("apps/regulations3k/js/recent-notices.js") }}'
diff --git a/cfgov/regulations3k/jinja2/regulations3k/regulations3k-side-nav.html b/cfgov/regulations3k/jinja2/regulations3k/regulations3k-side-nav.html
index 237550fa850..3ba9080f4b2 100644
--- a/cfgov/regulations3k/jinja2/regulations3k/regulations3k-side-nav.html
+++ b/cfgov/regulations3k/jinja2/regulations3k/regulations3k-side-nav.html
@@ -32,7 +32,7 @@
 
 {% block javascript scoped %}
     {{ super() }}
-    <script>
+    <script nonce="{{request.csp_nonce}}">
       jsl(['{{ static("js/routes/on-demand/secondary-nav.js") }}']);
     </script>
 {% endblock javascript %}
diff --git a/cfgov/regulations3k/jinja2/regulations3k/search-regulations.html b/cfgov/regulations3k/jinja2/regulations3k/search-regulations.html
index c337ebb00d1..7179871e063 100644
--- a/cfgov/regulations3k/jinja2/regulations3k/search-regulations.html
+++ b/cfgov/regulations3k/jinja2/regulations3k/search-regulations.html
@@ -194,7 +194,7 @@ <h3>Refine results</h3>
 
 {% block javascript scoped %}
     {{ super() }}
-    <script>
+    <script nonce="{{request.csp_nonce}}">
       jsl([
         '{{ static("apps/regulations3k/js/index.js") }}'
         {%- if page.results.search_query -%}
diff --git a/cfgov/retirement_api/jinja2/retirement_api/claiming.html b/cfgov/retirement_api/jinja2/retirement_api/claiming.html
index 7024d8e3e2f..d5394632539 100644
--- a/cfgov/retirement_api/jinja2/retirement_api/claiming.html
+++ b/cfgov/retirement_api/jinja2/retirement_api/claiming.html
@@ -988,7 +988,7 @@ <h5>{{ _("Legal Disclaimer:") }}</h5>
 
 {% block javascript scoped %}
 {{ super() }}
-<script>
+<script nonce="{{request.csp_nonce}}">
   jsl(['{{ static("apps/retirement/js/index.js") }}']);
 </script>
 {% endblock javascript %}
diff --git a/cfgov/v1/jinja2/v1/layouts/404.html b/cfgov/v1/jinja2/v1/layouts/404.html
index 4aac88f52be..0afa2396b50 100644
--- a/cfgov/v1/jinja2/v1/layouts/404.html
+++ b/cfgov/v1/jinja2/v1/layouts/404.html
@@ -53,8 +53,3 @@ <h1>404: Page not found</h1>
         </p>
     </div>
 {% endblock %}
-
-{% block javascript %}
-{# Include site-wide JavaScript. #}
-<script type='text/javascript' src="{{ static('js/routes/common.js') }}"></script>
-{% endblock javascript %}
diff --git a/cfgov/v1/jinja2/v1/layouts/500.html b/cfgov/v1/jinja2/v1/layouts/500.html
index f12bfd38124..69bb76e2151 100644
--- a/cfgov/v1/jinja2/v1/layouts/500.html
+++ b/cfgov/v1/jinja2/v1/layouts/500.html
@@ -53,8 +53,3 @@ <h1>500: Server error</h1>
         </p>
     </div>
 {% endblock %}
-
-{% block javascript %}
-{# Include site-wide JavaScript. #}
-<script type='text/javascript' src="{{ static('js/routes/common.js') }}"></script>
-{% endblock javascript %}
diff --git a/cfgov/v1/jinja2/v1/layouts/base.html b/cfgov/v1/jinja2/v1/layouts/base.html
index 981470ca081..09bce2b276e 100644
--- a/cfgov/v1/jinja2/v1/layouts/base.html
+++ b/cfgov/v1/jinja2/v1/layouts/base.html
@@ -150,7 +150,7 @@
           href="{{ static('fonts/627fbb5a-3bae-4cd9-b617-2f923e29d55e.woff2') }}"
           as="font"
           type="font/woff2" crossorigin>
-    <link rel="preload" href="{{ static('js/routes/common.js') }}" as="script">
+    <link rel="preload" nonce="{{request.csp_nonce}}" href="{{ static('js/routes/common.js') }}" as="script">
 
     {# Preconnecting comes from the 3rd best practice in
        https://developer.mozilla.org/en-US/docs/Web/Performance/dns-prefetch#best_practices #}
@@ -184,7 +184,7 @@
     {# Begin Google Optimize #}
     {# Optimize anti-flicker snippet. #}
     <style>.async-hide { opacity: 0 !important} </style>
-    <script>(function(a,s,y,n,c,h,i,d,e){s.className+=' '+y;h.start=1*new Date;
+    <script nonce="{{request.csp_nonce}}">(function(a,s,y,n,c,h,i,d,e){s.className+=' '+y;h.start=1*new Date;
     h.end=i=function(){s.className=s.className.replace(RegExp(' ?'+y),'')};
     (a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c);h.timeout=c;
     })(window,document.documentElement,'async-hide','dataLayer',4000,
@@ -197,7 +197,7 @@
     {% endif %}
 
     {# Begin Google Tag Manager #}
-    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+    <script nonce="{{request.csp_nonce}}">(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
     new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;
@@ -209,7 +209,7 @@
     {% endif -%}
 
     {% block javascript_loader %}
-    <script>
+    <script nonce="{{request.csp_nonce}}">
       {# Minified dynamic JavaScript loader that injects a script tag in the head of the page. #}
       function jsl(a){
         if(window.fetch){
@@ -219,7 +219,7 @@
     </script>
     {% endblock javascript_loader %}
 
-    <script>
+    <script nonce="{{request.csp_nonce}}">
       if(window.fetch){
         document.documentElement.className = document.documentElement.className.replace('no-js', 'js')
       }
@@ -308,7 +308,7 @@
 
     {% block javascript scoped %}
 
-    <script>
+    <script nonce="{{request.csp_nonce}}">
       if ( window.fetch ) {
         !function(){
           {# Include site-wide JavaScript. #}
@@ -361,7 +361,7 @@
     </script>
 
     {% if flag_enabled('PATH_MATCHES_FOR_QUALTRICS') %}
-        <script type='text/javascript'>
+        <script nonce="{{request.csp_nonce}}" type='text/javascript'>
         (function(){var g=function(e,h,f,g){
         this.get=function(a){for(var a=a+"=",c=document.cookie.split(";"),b=0,e=c.length;b<e;b++){for(var d=c[b];" "==d.charAt(0);)d=d.substring(1,d.length);if(0==d.indexOf(a))return d.substring(a.length,d.length)}return null};
         this.set=function(a,c){var b="",b=new Date;b.setTime(b.getTime()+6048E5);b="; expires="+b.toGMTString();document.cookie=a+"="+c+b+"; path=/; "};
diff --git a/cfgov/v1/jinja2/v1/layouts/layout-1-3.html b/cfgov/v1/jinja2/v1/layouts/layout-1-3.html
index 7186c2f3081..2c5cabfb3fa 100644
--- a/cfgov/v1/jinja2/v1/layouts/layout-1-3.html
+++ b/cfgov/v1/jinja2/v1/layouts/layout-1-3.html
@@ -35,7 +35,7 @@
 
 {% block javascript scoped %}
     {{ super() }}
-    <script>
+    <script nonce="{{request.csp_nonce}}">
       jsl(['{{ static("js/routes/on-demand/secondary-nav.js") }}']);
     </script>
 {% endblock javascript %}
diff --git a/cfgov/wagtailadmin_overrides/templates/wagtailadmin/userbar/base.html b/cfgov/wagtailadmin_overrides/templates/wagtailadmin/userbar/base.html
new file mode 100644
index 00000000000..80299cd7e64
--- /dev/null
+++ b/cfgov/wagtailadmin_overrides/templates/wagtailadmin/userbar/base.html
@@ -0,0 +1,41 @@
+{% load wagtailadmin_tags i18n %}
+<!-- Wagtail user bar embed code -->
+<template id="wagtail-userbar-template">
+    {# In preview panels, we still render the userbar UI, but hidden by default. #}
+    <aside {% if request.in_preview_panel %}hidden{% endif %}>
+        <div class="w-userbar w-userbar--{{ position|default:'bottom-right' }} {% admin_theme_classname %}" data-wagtail-userbar part="userbar">
+            <link rel="stylesheet" href="{% versioned_static 'wagtailadmin/css/core.css' %}">
+            {% hook_output 'insert_global_admin_css' %}
+            <div class="w-userbar-nav">
+
+                <svg class="w-hidden">
+                    <defs>
+                        {% include "wagtailadmin/icons/wagtail.svg" %}
+                        {% include "wagtailadmin/icons/key.svg" %}
+                        {% include "wagtailadmin/icons/folder-open-inverse.svg" %}
+                        {% include "wagtailadmin/icons/edit.svg" %}
+                        {% include "wagtailadmin/icons/plus.svg" %}
+                        {% include "wagtailadmin/icons/check.svg" %}
+                        {% include "wagtailadmin/icons/cross.svg" %}
+                        {% include "wagtailadmin/icons/crosshairs.svg" %}
+                    </defs>
+                </svg>
+
+                <button aria-controls="wagtail-userbar-items" aria-haspopup="true" class="w-userbar-trigger" id="wagtail-userbar-trigger" data-wagtail-userbar-trigger>
+                    {% block branding_logo %}{% include "wagtailadmin/logo.html" with classname="w-userbar-icon" %}{% endblock %}
+                    <span class="w-sr-only">{% trans 'View Wagtail quick actions' %}</span>
+                </button>
+                <ul aria-labelledby="wagtail-userbar-trigger" class="w-userbar-items" id="wagtail-userbar-items" role="menu">
+                    {% for item in items %}
+                        {{ item|safe }}
+                    {% endfor %}
+                </ul>
+            </div>
+        </div>
+        <div data-a11y-result-outline-container></div>
+    </aside>
+</template>
+<wagtail-userbar></wagtail-userbar>
+<script nonce="{{request.csp_nonce}}" src="{% versioned_static 'wagtailadmin/js/vendor.js' %}"></script>
+<script nonce="{{request.csp_nonce}}" src="{% versioned_static 'wagtailadmin/js/userbar.js' %}"></script>
+<!-- end Wagtail user bar embed code -->
diff --git a/cfgov/wellbeing/jinja2/wellbeing/home.html b/cfgov/wellbeing/jinja2/wellbeing/home.html
index 8b03f1c44e4..78bfd55d754 100644
--- a/cfgov/wellbeing/jinja2/wellbeing/home.html
+++ b/cfgov/wellbeing/jinja2/wellbeing/home.html
@@ -984,7 +984,7 @@ <h2 class="m-slug-header__heading">{{ _('About this questionnaire') }}</h2>
 
 {% block javascript scoped %}
 {{ super() }}
-<script>
+<script nonce="{{request.csp_nonce}}">
   jsl(['{{ static("apps/financial-well-being/js/home.js") }}']);
 </script>
 {% endblock %}
diff --git a/cfgov/wellbeing/jinja2/wellbeing/results.html b/cfgov/wellbeing/jinja2/wellbeing/results.html
index fef2fbd7da4..853666777b5 100644
--- a/cfgov/wellbeing/jinja2/wellbeing/results.html
+++ b/cfgov/wellbeing/jinja2/wellbeing/results.html
@@ -517,7 +517,7 @@ <h2 class="m-slug-header__heading">{{ _('About this questionnaire') }}</h2>
 
 {% block javascript scoped %}
 {{ super() }}
-<script>
+<script nonce="{{request.csp_nonce}}">
   jsl(['{{ static("apps/financial-well-being/js/results.js") }}']);
 </script>
 {% endblock %}
diff --git a/docs/editing-components.md b/docs/editing-components.md
index dcb9fefeb67..a0f7f483378 100644
--- a/docs/editing-components.md
+++ b/docs/editing-components.md
@@ -316,6 +316,21 @@ see [Notes on Atomic Design](atomic-structure.md).)
 This will load the `related-content.js` script on any page
 that includes the `RelatedContent` molecule in one of its StreamFields.
 
+If adding Javascript directly with a script tag is required, you'll need to add a `nonce` attribute with the value `{{request.csp_nonce}}`. This
+is due to our use of `strict-dynamic` in our Content Security Policy via [django-csp](https://django-csp.readthedocs.io/en/3.8/nonce.html).
+Here's an example from the [records-access-form template](https://github.com/cfpb/consumerfinance.gov/blob/main/cfgov/privacy/jinja2/privacy/records-access-form.html):
+
+```javascript
+{% block javascript %}
+    {{ super() }}
+    <script nonce="{{request.csp_nonce}}">
+      jsl(['{{ static("js/routes/on-demand/privacy-forms.js") }}']);
+    </script>
+{% endblock javascript %}
+```
+
+You'll note this uses our asynchronous javascript loaderi (jsl), which is also how js in the Media classes of components are loaded.
+
 ## How-to guides
 
 ### Creating a new component