From 5130e6c8fb43fbc3aadeafec3aee885ffc690150 Mon Sep 17 00:00:00 2001
From: rajsite <rajsite@users.noreply.github.com>
Date: Sun, 3 Mar 2024 15:57:05 -0600
Subject: [PATCH 1/8] Add CSP headers to the karma run

---
 .../projects/example-client-app/karma.conf.js        | 12 +++++++++++-
 .../projects/ni/nimble-angular/karma.conf.js         | 12 +++++++++++-
 packages/jasmine-parameterized/karma.conf.cjs        | 12 +++++++++++-
 packages/nimble-components/karma.conf.js             | 12 +++++++++++-
 4 files changed, 44 insertions(+), 4 deletions(-)

diff --git a/angular-workspace/projects/example-client-app/karma.conf.js b/angular-workspace/projects/example-client-app/karma.conf.js
index cb3fb06a5c..6a5488068d 100644
--- a/angular-workspace/projects/example-client-app/karma.conf.js
+++ b/angular-workspace/projects/example-client-app/karma.conf.js
@@ -42,6 +42,16 @@ module.exports = function (config) {
     autoWatch: true,
     browsers: ['ChromeHeadless'],
     singleRun: false,
-    restartOnFileChange: true
+    restartOnFileChange: true,
+    customHeaders: [
+      // Add a Content-Security-Policy header for the tests
+      // Following: https://developer.chrome.com/docs/extensions/reference/manifest/content-security-policy
+      // Need 'unsafe-inline' to support karma behavior: https://github.com/karma-runner/karma/issues/3260
+      {
+          match: '\\.html',
+          name: 'Content-Security-Policy',
+          value: "script-src 'self' 'unsafe-inline'; object-src 'self';"
+      }
+  ]
   });
 };
diff --git a/angular-workspace/projects/ni/nimble-angular/karma.conf.js b/angular-workspace/projects/ni/nimble-angular/karma.conf.js
index ac2aa009a6..1b211f44da 100644
--- a/angular-workspace/projects/ni/nimble-angular/karma.conf.js
+++ b/angular-workspace/projects/ni/nimble-angular/karma.conf.js
@@ -48,6 +48,16 @@ module.exports = config => {
         autoWatch: true,
         browsers: ['ChromeHeadless'],
         singleRun: false,
-        restartOnFileChange: true
+        restartOnFileChange: true,
+        customHeaders: [
+            // Add a Content-Security-Policy header for the tests
+            // Following: https://developer.chrome.com/docs/extensions/reference/manifest/content-security-policy
+            // Need 'unsafe-inline' to support karma behavior: https://github.com/karma-runner/karma/issues/3260
+            {
+                match: '\\.html',
+                name: 'Content-Security-Policy',
+                value: "script-src 'self' 'unsafe-inline'; object-src 'self';"
+            }
+        ]
     });
 };
diff --git a/packages/jasmine-parameterized/karma.conf.cjs b/packages/jasmine-parameterized/karma.conf.cjs
index 03d6751ea9..e39b732a9f 100644
--- a/packages/jasmine-parameterized/karma.conf.cjs
+++ b/packages/jasmine-parameterized/karma.conf.cjs
@@ -58,7 +58,17 @@ module.exports = config => {
             captureConsole: true
         },
         // to disable the WARN 404 for image requests
-        logLevel: config.LOG_ERROR
+        logLevel: config.LOG_ERROR,
+        customHeaders: [
+            // Add a Content-Security-Policy header for the tests
+            // Following: https://developer.chrome.com/docs/extensions/reference/manifest/content-security-policy
+            // Need 'unsafe-inline' to support karma behavior: https://github.com/karma-runner/karma/issues/3260
+            {
+                match: '\\.html',
+                name: 'Content-Security-Policy',
+                value: "script-src 'self' 'unsafe-inline'; object-src 'self';"
+            }
+        ]
     };
 
     config.set(options);
diff --git a/packages/nimble-components/karma.conf.js b/packages/nimble-components/karma.conf.js
index 0d90929cd4..6f9742eb61 100644
--- a/packages/nimble-components/karma.conf.js
+++ b/packages/nimble-components/karma.conf.js
@@ -147,7 +147,17 @@ module.exports = config => {
             },
             captureConsole: true
         },
-        logLevel: config.LOG_ERROR // to disable the WARN 404 for image requests
+        logLevel: config.LOG_ERROR, // to disable the WARN 404 for image requests
+        customHeaders: [
+            // Add a Content-Security-Policy header for the tests
+            // Following: https://developer.chrome.com/docs/extensions/reference/manifest/content-security-policy
+            // Need 'unsafe-inline' to support karma behavior: https://github.com/karma-runner/karma/issues/3260
+            {
+                match: '\\.html',
+                name: 'Content-Security-Policy',
+                value: "script-src 'self' 'unsafe-inline'; object-src 'self';"
+            }
+        ]
     };
 
     config.set(options);

From 429e81ad4e1b29b70c7b33c7b88924524c346358 Mon Sep 17 00:00:00 2001
From: rajsite <rajsite@users.noreply.github.com>
Date: Sun, 3 Mar 2024 16:48:32 -0600
Subject: [PATCH 2/8] Loosen for workers

---
 angular-workspace/projects/example-client-app/karma.conf.js | 6 ++++--
 angular-workspace/projects/ni/nimble-angular/karma.conf.js  | 6 ++++--
 packages/jasmine-parameterized/karma.conf.cjs               | 6 ++++--
 packages/nimble-components/karma.conf.js                    | 6 ++++--
 4 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/angular-workspace/projects/example-client-app/karma.conf.js b/angular-workspace/projects/example-client-app/karma.conf.js
index 6a5488068d..29aa8aae7b 100644
--- a/angular-workspace/projects/example-client-app/karma.conf.js
+++ b/angular-workspace/projects/example-client-app/karma.conf.js
@@ -46,11 +46,13 @@ module.exports = function (config) {
     customHeaders: [
       // Add a Content-Security-Policy header for the tests
       // Following: https://developer.chrome.com/docs/extensions/reference/manifest/content-security-policy
-      // Need 'unsafe-inline' to support karma behavior: https://github.com/karma-runner/karma/issues/3260
+      // Need script-src 'unsafe-inline' to support karma behavior
+      // See https://github.com/karma-runner/karma/issues/3260
+      // Need worker-src blob: to support current worker loading pattern
       {
           match: '\\.html',
           name: 'Content-Security-Policy',
-          value: "script-src 'self' 'unsafe-inline'; object-src 'self';"
+          value: "script-src 'self' 'unsafe-inline'; object-src 'self'; worker-src 'self' blob: ;"
       }
   ]
   });
diff --git a/angular-workspace/projects/ni/nimble-angular/karma.conf.js b/angular-workspace/projects/ni/nimble-angular/karma.conf.js
index 1b211f44da..dd29e39e70 100644
--- a/angular-workspace/projects/ni/nimble-angular/karma.conf.js
+++ b/angular-workspace/projects/ni/nimble-angular/karma.conf.js
@@ -52,11 +52,13 @@ module.exports = config => {
         customHeaders: [
             // Add a Content-Security-Policy header for the tests
             // Following: https://developer.chrome.com/docs/extensions/reference/manifest/content-security-policy
-            // Need 'unsafe-inline' to support karma behavior: https://github.com/karma-runner/karma/issues/3260
+            // Need script-src 'unsafe-inline' to support karma behavior
+            // See https://github.com/karma-runner/karma/issues/3260
+            // Need worker-src blob: to support current worker loading pattern
             {
                 match: '\\.html',
                 name: 'Content-Security-Policy',
-                value: "script-src 'self' 'unsafe-inline'; object-src 'self';"
+                value: "script-src 'self' 'unsafe-inline'; object-src 'self'; worker-src 'self' blob: ;"
             }
         ]
     });
diff --git a/packages/jasmine-parameterized/karma.conf.cjs b/packages/jasmine-parameterized/karma.conf.cjs
index e39b732a9f..74631f1f01 100644
--- a/packages/jasmine-parameterized/karma.conf.cjs
+++ b/packages/jasmine-parameterized/karma.conf.cjs
@@ -62,11 +62,13 @@ module.exports = config => {
         customHeaders: [
             // Add a Content-Security-Policy header for the tests
             // Following: https://developer.chrome.com/docs/extensions/reference/manifest/content-security-policy
-            // Need 'unsafe-inline' to support karma behavior: https://github.com/karma-runner/karma/issues/3260
+            // Need script-src 'unsafe-inline' to support karma behavior
+            // See https://github.com/karma-runner/karma/issues/3260
+            // Need worker-src blob: to support current worker loading pattern
             {
                 match: '\\.html',
                 name: 'Content-Security-Policy',
-                value: "script-src 'self' 'unsafe-inline'; object-src 'self';"
+                value: "script-src 'self' 'unsafe-inline'; object-src 'self'; worker-src 'self' blob: ;"
             }
         ]
     };
diff --git a/packages/nimble-components/karma.conf.js b/packages/nimble-components/karma.conf.js
index 6f9742eb61..20fbecb42a 100644
--- a/packages/nimble-components/karma.conf.js
+++ b/packages/nimble-components/karma.conf.js
@@ -151,11 +151,13 @@ module.exports = config => {
         customHeaders: [
             // Add a Content-Security-Policy header for the tests
             // Following: https://developer.chrome.com/docs/extensions/reference/manifest/content-security-policy
-            // Need 'unsafe-inline' to support karma behavior: https://github.com/karma-runner/karma/issues/3260
+            // Need script-src 'unsafe-inline' to support karma behavior
+            // See https://github.com/karma-runner/karma/issues/3260
+            // Need worker-src blob: to support current worker loading pattern
             {
                 match: '\\.html',
                 name: 'Content-Security-Policy',
-                value: "script-src 'self' 'unsafe-inline'; object-src 'self';"
+                value: "script-src 'self' 'unsafe-inline'; object-src 'self'; worker-src 'self' blob: ;"
             }
         ]
     };

From 21dd799c1772cbb014b8f162e4c771d513b826ba Mon Sep 17 00:00:00 2001
From: rajsite <rajsite@users.noreply.github.com>
Date: Sun, 3 Mar 2024 17:10:48 -0600
Subject: [PATCH 3/8] Loosen CSP for Angular tests

---
 angular-workspace/projects/example-client-app/karma.conf.js | 3 ++-
 angular-workspace/projects/ni/nimble-angular/karma.conf.js  | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/angular-workspace/projects/example-client-app/karma.conf.js b/angular-workspace/projects/example-client-app/karma.conf.js
index 29aa8aae7b..ebda2d6bd8 100644
--- a/angular-workspace/projects/example-client-app/karma.conf.js
+++ b/angular-workspace/projects/example-client-app/karma.conf.js
@@ -48,11 +48,12 @@ module.exports = function (config) {
       // Following: https://developer.chrome.com/docs/extensions/reference/manifest/content-security-policy
       // Need script-src 'unsafe-inline' to support karma behavior
       // See https://github.com/karma-runner/karma/issues/3260
+      // Need script-src 'unsafe-eval' to support running in Angular tests
       // Need worker-src blob: to support current worker loading pattern
       {
           match: '\\.html',
           name: 'Content-Security-Policy',
-          value: "script-src 'self' 'unsafe-inline'; object-src 'self'; worker-src 'self' blob: ;"
+          value: "script-src 'self' 'unsafe-inline' 'unsafe-eval'; object-src 'self'; worker-src 'self' blob: ;"
       }
   ]
   });
diff --git a/angular-workspace/projects/ni/nimble-angular/karma.conf.js b/angular-workspace/projects/ni/nimble-angular/karma.conf.js
index dd29e39e70..04de86d08d 100644
--- a/angular-workspace/projects/ni/nimble-angular/karma.conf.js
+++ b/angular-workspace/projects/ni/nimble-angular/karma.conf.js
@@ -54,11 +54,12 @@ module.exports = config => {
             // Following: https://developer.chrome.com/docs/extensions/reference/manifest/content-security-policy
             // Need script-src 'unsafe-inline' to support karma behavior
             // See https://github.com/karma-runner/karma/issues/3260
+            // Need script-src 'unsafe-eval' to support running in Angular tests
             // Need worker-src blob: to support current worker loading pattern
             {
                 match: '\\.html',
                 name: 'Content-Security-Policy',
-                value: "script-src 'self' 'unsafe-inline'; object-src 'self'; worker-src 'self' blob: ;"
+                value: "script-src 'self' 'unsafe-inline' 'unsafe-eval'; object-src 'self'; worker-src 'self' blob: ;"
             }
         ]
     });

From 9f08a3760f4d4b60b9e7c9cb3aa289bfc66dce76 Mon Sep 17 00:00:00 2001
From: rajsite <rajsite@users.noreply.github.com>
Date: Sun, 3 Mar 2024 17:28:32 -0600
Subject: [PATCH 4/8] Change files

---
 ...parameterized-46b9b80c-a269-4b4c-adf2-57f68e5f4829.json | 7 +++++++
 ...imble-angular-39a7b01f-f617-432e-a667-cdc9f7775a0b.json | 7 +++++++
 ...le-components-ad3e3c6c-2355-4248-9dab-a01fc85b7aab.json | 7 +++++++
 3 files changed, 21 insertions(+)
 create mode 100644 change/@ni-jasmine-parameterized-46b9b80c-a269-4b4c-adf2-57f68e5f4829.json
 create mode 100644 change/@ni-nimble-angular-39a7b01f-f617-432e-a667-cdc9f7775a0b.json
 create mode 100644 change/@ni-nimble-components-ad3e3c6c-2355-4248-9dab-a01fc85b7aab.json

diff --git a/change/@ni-jasmine-parameterized-46b9b80c-a269-4b4c-adf2-57f68e5f4829.json b/change/@ni-jasmine-parameterized-46b9b80c-a269-4b4c-adf2-57f68e5f4829.json
new file mode 100644
index 0000000000..4e7aa6a614
--- /dev/null
+++ b/change/@ni-jasmine-parameterized-46b9b80c-a269-4b4c-adf2-57f68e5f4829.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Add CSP headers to the karma run",
+  "packageName": "@ni/jasmine-parameterized",
+  "email": "rajsite@users.noreply.github.com",
+  "dependentChangeType": "none"
+}
diff --git a/change/@ni-nimble-angular-39a7b01f-f617-432e-a667-cdc9f7775a0b.json b/change/@ni-nimble-angular-39a7b01f-f617-432e-a667-cdc9f7775a0b.json
new file mode 100644
index 0000000000..7f586a8f0c
--- /dev/null
+++ b/change/@ni-nimble-angular-39a7b01f-f617-432e-a667-cdc9f7775a0b.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Add CSP headers to the karma run",
+  "packageName": "@ni/nimble-angular",
+  "email": "rajsite@users.noreply.github.com",
+  "dependentChangeType": "none"
+}
diff --git a/change/@ni-nimble-components-ad3e3c6c-2355-4248-9dab-a01fc85b7aab.json b/change/@ni-nimble-components-ad3e3c6c-2355-4248-9dab-a01fc85b7aab.json
new file mode 100644
index 0000000000..223f1ca893
--- /dev/null
+++ b/change/@ni-nimble-components-ad3e3c6c-2355-4248-9dab-a01fc85b7aab.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Add CSP headers to the karma run",
+  "packageName": "@ni/nimble-components",
+  "email": "rajsite@users.noreply.github.com",
+  "dependentChangeType": "none"
+}

From 249c8ef2ceffbe9f70fbab918ee112ad1a16703f Mon Sep 17 00:00:00 2001
From: rajsite <rajsite@users.noreply.github.com>
Date: Mon, 4 Mar 2024 11:53:55 -0600
Subject: [PATCH 5/8] Use OWASP CSP settings

---
 .../projects/example-client-app/karma.conf.js              | 6 +++---
 angular-workspace/projects/ni/nimble-angular/karma.conf.js | 6 +++---
 packages/jasmine-parameterized/karma.conf.cjs              | 7 +++----
 packages/nimble-components/karma.conf.js                   | 6 +++---
 4 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/angular-workspace/projects/example-client-app/karma.conf.js b/angular-workspace/projects/example-client-app/karma.conf.js
index ebda2d6bd8..dd01907b44 100644
--- a/angular-workspace/projects/example-client-app/karma.conf.js
+++ b/angular-workspace/projects/example-client-app/karma.conf.js
@@ -44,8 +44,8 @@ module.exports = function (config) {
     singleRun: false,
     restartOnFileChange: true,
     customHeaders: [
-      // Add a Content-Security-Policy header for the tests
-      // Following: https://developer.chrome.com/docs/extensions/reference/manifest/content-security-policy
+      // Test under the OWASP Basic non-strict CSP Policy
+      // See: https://cheatsheetseries.owasp.org/cheatsheets/Content_Security_Policy_Cheat_Sheet.html#basic-non-strict-csp-policy
       // Need script-src 'unsafe-inline' to support karma behavior
       // See https://github.com/karma-runner/karma/issues/3260
       // Need script-src 'unsafe-eval' to support running in Angular tests
@@ -53,7 +53,7 @@ module.exports = function (config) {
       {
           match: '\\.html',
           name: 'Content-Security-Policy',
-          value: "script-src 'self' 'unsafe-inline' 'unsafe-eval'; object-src 'self'; worker-src 'self' blob: ;"
+          value: "default-src 'self'; frame-ancestors 'self'; form-action 'self'; object-src 'none'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; worker-src 'self' blob: ;"
       }
   ]
   });
diff --git a/angular-workspace/projects/ni/nimble-angular/karma.conf.js b/angular-workspace/projects/ni/nimble-angular/karma.conf.js
index 04de86d08d..911604b5d1 100644
--- a/angular-workspace/projects/ni/nimble-angular/karma.conf.js
+++ b/angular-workspace/projects/ni/nimble-angular/karma.conf.js
@@ -50,8 +50,8 @@ module.exports = config => {
         singleRun: false,
         restartOnFileChange: true,
         customHeaders: [
-            // Add a Content-Security-Policy header for the tests
-            // Following: https://developer.chrome.com/docs/extensions/reference/manifest/content-security-policy
+            // Test under the OWASP Basic non-strict CSP Policy
+            // See: https://cheatsheetseries.owasp.org/cheatsheets/Content_Security_Policy_Cheat_Sheet.html#basic-non-strict-csp-policy
             // Need script-src 'unsafe-inline' to support karma behavior
             // See https://github.com/karma-runner/karma/issues/3260
             // Need script-src 'unsafe-eval' to support running in Angular tests
@@ -59,7 +59,7 @@ module.exports = config => {
             {
                 match: '\\.html',
                 name: 'Content-Security-Policy',
-                value: "script-src 'self' 'unsafe-inline' 'unsafe-eval'; object-src 'self'; worker-src 'self' blob: ;"
+                value: "default-src 'self'; frame-ancestors 'self'; form-action 'self'; object-src 'none'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; worker-src 'self' blob: ;"
             }
         ]
     });
diff --git a/packages/jasmine-parameterized/karma.conf.cjs b/packages/jasmine-parameterized/karma.conf.cjs
index 74631f1f01..9c60fdfa2e 100644
--- a/packages/jasmine-parameterized/karma.conf.cjs
+++ b/packages/jasmine-parameterized/karma.conf.cjs
@@ -60,15 +60,14 @@ module.exports = config => {
         // to disable the WARN 404 for image requests
         logLevel: config.LOG_ERROR,
         customHeaders: [
-            // Add a Content-Security-Policy header for the tests
-            // Following: https://developer.chrome.com/docs/extensions/reference/manifest/content-security-policy
+            // Test under the OWASP Basic non-strict CSP Policy
+            // See: https://cheatsheetseries.owasp.org/cheatsheets/Content_Security_Policy_Cheat_Sheet.html#basic-non-strict-csp-policy
             // Need script-src 'unsafe-inline' to support karma behavior
             // See https://github.com/karma-runner/karma/issues/3260
-            // Need worker-src blob: to support current worker loading pattern
             {
                 match: '\\.html',
                 name: 'Content-Security-Policy',
-                value: "script-src 'self' 'unsafe-inline'; object-src 'self'; worker-src 'self' blob: ;"
+                value: "default-src 'self'; frame-ancestors 'self'; form-action 'self'; object-src 'none'; script-src 'self' 'unsafe-inline';"
             }
         ]
     };
diff --git a/packages/nimble-components/karma.conf.js b/packages/nimble-components/karma.conf.js
index 20fbecb42a..59f0338119 100644
--- a/packages/nimble-components/karma.conf.js
+++ b/packages/nimble-components/karma.conf.js
@@ -149,15 +149,15 @@ module.exports = config => {
         },
         logLevel: config.LOG_ERROR, // to disable the WARN 404 for image requests
         customHeaders: [
-            // Add a Content-Security-Policy header for the tests
-            // Following: https://developer.chrome.com/docs/extensions/reference/manifest/content-security-policy
+            // Test under the OWASP Basic non-strict CSP Policy
+            // See: https://cheatsheetseries.owasp.org/cheatsheets/Content_Security_Policy_Cheat_Sheet.html#basic-non-strict-csp-policy
             // Need script-src 'unsafe-inline' to support karma behavior
             // See https://github.com/karma-runner/karma/issues/3260
             // Need worker-src blob: to support current worker loading pattern
             {
                 match: '\\.html',
                 name: 'Content-Security-Policy',
-                value: "script-src 'self' 'unsafe-inline'; object-src 'self'; worker-src 'self' blob: ;"
+                value: "default-src 'self'; frame-ancestors 'self'; form-action 'self'; object-src 'none'; script-src 'self' 'unsafe-inline'; worker-src 'self' blob: ;"
             }
         ]
     };

From 31b7fd0fa8fba4f2d212fe7c7a72efe444147466 Mon Sep 17 00:00:00 2001
From: rajsite <rajsite@users.noreply.github.com>
Date: Mon, 4 Mar 2024 12:15:02 -0600
Subject: [PATCH 6/8] Update CSP to support FAST

---
 angular-workspace/projects/example-client-app/karma.conf.js | 4 +++-
 angular-workspace/projects/ni/nimble-angular/karma.conf.js  | 4 +++-
 packages/nimble-components/karma.conf.js                    | 6 ++++--
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/angular-workspace/projects/example-client-app/karma.conf.js b/angular-workspace/projects/example-client-app/karma.conf.js
index dd01907b44..34077676d3 100644
--- a/angular-workspace/projects/example-client-app/karma.conf.js
+++ b/angular-workspace/projects/example-client-app/karma.conf.js
@@ -49,11 +49,13 @@ module.exports = function (config) {
       // Need script-src 'unsafe-inline' to support karma behavior
       // See https://github.com/karma-runner/karma/issues/3260
       // Need script-src 'unsafe-eval' to support running in Angular tests
+      // Need style-src 'unsafe-inline' to support FAST
+      // See: https://github.com/microsoft/fast/issues/4510
       // Need worker-src blob: to support current worker loading pattern
       {
           match: '\\.html',
           name: 'Content-Security-Policy',
-          value: "default-src 'self'; frame-ancestors 'self'; form-action 'self'; object-src 'none'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; worker-src 'self' blob: ;"
+          value: "default-src 'self'; frame-ancestors 'self'; form-action 'self'; object-src 'none'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; worker-src 'self' blob: ;"
       }
   ]
   });
diff --git a/angular-workspace/projects/ni/nimble-angular/karma.conf.js b/angular-workspace/projects/ni/nimble-angular/karma.conf.js
index 911604b5d1..9ab6a02d3f 100644
--- a/angular-workspace/projects/ni/nimble-angular/karma.conf.js
+++ b/angular-workspace/projects/ni/nimble-angular/karma.conf.js
@@ -55,11 +55,13 @@ module.exports = config => {
             // Need script-src 'unsafe-inline' to support karma behavior
             // See https://github.com/karma-runner/karma/issues/3260
             // Need script-src 'unsafe-eval' to support running in Angular tests
+            // Need style-src 'unsafe-inline' to support FAST
+            // See: https://github.com/microsoft/fast/issues/4510
             // Need worker-src blob: to support current worker loading pattern
             {
                 match: '\\.html',
                 name: 'Content-Security-Policy',
-                value: "default-src 'self'; frame-ancestors 'self'; form-action 'self'; object-src 'none'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; worker-src 'self' blob: ;"
+                value: "default-src 'self'; frame-ancestors 'self'; form-action 'self'; object-src 'none'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; worker-src 'self' blob: ;"
             }
         ]
     });
diff --git a/packages/nimble-components/karma.conf.js b/packages/nimble-components/karma.conf.js
index 59f0338119..6d51034261 100644
--- a/packages/nimble-components/karma.conf.js
+++ b/packages/nimble-components/karma.conf.js
@@ -152,12 +152,14 @@ module.exports = config => {
             // Test under the OWASP Basic non-strict CSP Policy
             // See: https://cheatsheetseries.owasp.org/cheatsheets/Content_Security_Policy_Cheat_Sheet.html#basic-non-strict-csp-policy
             // Need script-src 'unsafe-inline' to support karma behavior
-            // See https://github.com/karma-runner/karma/issues/3260
+            // See: https://github.com/karma-runner/karma/issues/3260
+            // Need style-src 'unsafe-inline' to support FAST
+            // See: https://github.com/microsoft/fast/issues/4510
             // Need worker-src blob: to support current worker loading pattern
             {
                 match: '\\.html',
                 name: 'Content-Security-Policy',
-                value: "default-src 'self'; frame-ancestors 'self'; form-action 'self'; object-src 'none'; script-src 'self' 'unsafe-inline'; worker-src 'self' blob: ;"
+                value: "default-src 'self'; frame-ancestors 'self'; form-action 'self'; object-src 'none'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; worker-src 'self' blob: ;"
             }
         ]
     };

From 1ba2afe27581d028616c9264659f7d345be2db30 Mon Sep 17 00:00:00 2001
From: rajsite <rajsite@users.noreply.github.com>
Date: Thu, 11 Apr 2024 15:22:15 -0500
Subject: [PATCH 7/8] Document CSP settings

---
 packages/nimble-components/README.md | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/packages/nimble-components/README.md b/packages/nimble-components/README.md
index 867509e020..2de609fd7b 100644
--- a/packages/nimble-components/README.md
+++ b/packages/nimble-components/README.md
@@ -121,6 +121,13 @@ If a client is localized, it should:
     ```
 -   For each label token on the label provider API, localize the English string, and set the corresponding HTML attribute or JS property on the label provider to the localized values. A list of all label tokens for each label provider (and their corresponding attribute/property names and English strings) can be found in the [Tokens/Label Providers section of Storybook](http://nimble.ni.dev/storybook/?path=/docs/tokens-label-providers--docs).
 
+## Content Security Policy
+
+When using Nimble in an environment with a [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy) enabled, the following are known required settings beyond "common" settings (such as the [OWASP Basic non-Strict CSP Policy](https://cheatsheetseries.owasp.org/cheatsheets/Content_Security_Policy_Cheat_Sheet.html#basic-non-strict-csp-policy)) for using Nimble:
+
+- `style-src 'unsafe-inline'` is [needed to support style patterns in the FAST library](https://github.com/microsoft/fast/issues/4510) leveraged by Nimble.
+- `worker-src blob:` is needed to support controls that leverage Web Workers (for example the Wafer Map).
+
 ## Accessibility
 
 For accessibility information related to nimble components, see [accessibility.md](/packages/nimble-components/docs/accessibility.md).

From f7ce86f5f7b0a0c76bd4a5a987c2a7fe449df44b Mon Sep 17 00:00:00 2001
From: rajsite <rajsite@users.noreply.github.com>
Date: Thu, 11 Apr 2024 20:37:45 -0500
Subject: [PATCH 8/8] lint

---
 packages/nimble-components/README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nimble-components/README.md b/packages/nimble-components/README.md
index 2de609fd7b..6663053bdb 100644
--- a/packages/nimble-components/README.md
+++ b/packages/nimble-components/README.md
@@ -125,8 +125,8 @@ If a client is localized, it should:
 
 When using Nimble in an environment with a [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy) enabled, the following are known required settings beyond "common" settings (such as the [OWASP Basic non-Strict CSP Policy](https://cheatsheetseries.owasp.org/cheatsheets/Content_Security_Policy_Cheat_Sheet.html#basic-non-strict-csp-policy)) for using Nimble:
 
-- `style-src 'unsafe-inline'` is [needed to support style patterns in the FAST library](https://github.com/microsoft/fast/issues/4510) leveraged by Nimble.
-- `worker-src blob:` is needed to support controls that leverage Web Workers (for example the Wafer Map).
+-   `style-src 'unsafe-inline'` is [needed to support style patterns in the FAST library](https://github.com/microsoft/fast/issues/4510) leveraged by Nimble.
+-   `worker-src blob:` is needed to support controls that leverage Web Workers (for example the Wafer Map).
 
 ## Accessibility