Content Security Policy: add img-src data: (#5648)

compulim · web-flow · commit 1c4fe5d22b26 · 2025-12-09T15:56:59.000-08:00
* Add img-src data: to CSP

* Add entry
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -330,6 +330,8 @@ Notes: web developers are advised to use [`~` (tilde range)](https://github.com/
 - Fixed `botframework-webchat/decorator` import in legacy CommonJS environments, in [#5616](https://github.com/microsoft/BotFramework-WebChat/pull/5616), by [@OEvgeny](https://github.com/OEvgeny)
 - Fixed `npm start` for efficiency and reliability, in PR [#5621](https://github.com/microsoft/BotFramework-WebChat/pull/5621) and [#5629](https://github.com/microsoft/BotFramework-WebChat/pull/5629), by [@compulim](https://github.com/compulim)
 - Fixed activity sorting introduced in PR [#5622](https://github.com/microsoft/BotFramework-WebChat/pull/5622), part grouping, and livestreaming, by [@compulim](https://github.com/compulim) in PR [#5635](https://github.com/microsoft/BotFramework-WebChat/pull/5635)
+- Fixed Content Security Policy documentation and sample in PR, by [@compulim](https://github.com/compulim) in PR [#5648](https://github.com/microsoft/BotFramework-WebChat/pull/5648)
+   - Added `img-src data:`, required for icons
 
 ### Removed
 
diff --git a/__tests__/__image_snapshots__/html/content-security-policy-html-simple-content-security-policy-html-1-snap.png b/__tests__/__image_snapshots__/html/content-security-policy-html-simple-content-security-policy-html-1-snap.png
diff --git a/__tests__/html2/simple/contentSecurityPolicy.html b/__tests__/html2/simple/contentSecurityPolicy.html
@@ -0,0 +1,48 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" nonce="TEST_PAGE_NONCE" rel="stylesheet" type="text/css" />
+    <script crossorigin="anonymous" nonce="TEST_PAGE_NONCE" src="/test-harness.js"></script>
+    <script crossorigin="anonymous" nonce="TEST_PAGE_NONCE" src="/test-page-object.js"></script>
+    <script crossorigin="anonymous" nonce="TEST_PAGE_NONCE" src="/__dist__/webchat-es5.js"></script>
+    <!--
+      Outside of the CSP defined in our /docs/CONTENT_SECURITY_POLICY.md, this test added limited number rules to enable the test case.
+
+      - connect-src
+        - https://hawo-mockbot4-token-app.blueriver-ce85e8f0.westus.azurecontainerapps.io/api/token/directline to fetching Direct Line token
+      - script-src
+        - 'nonce-TEST_PAGE_NONCE' to loading test related assets
+      - style-src
+        - 'nonce-TEST_PAGE_NONCE' to loading test related assets
+    -->
+    <meta
+      http-equiv="Content-Security-Policy"
+      content="default-src 'none'; base-uri 'none'; connect-src blob: https://directline.botframework.com https://hawo-mockbot4-token-app.blueriver-ce85e8f0.westus.azurecontainerapps.io/api/token/directline wss://directline.botframework.com; img-src blob: data:; script-src 'strict-dynamic' 'nonce-TEST_PAGE_NONCE'; style-src 'nonce-WEB_CHAT_NONCE' 'nonce-TEST_PAGE_NONCE'"
+    />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script nonce="TEST_PAGE_NONCE">
+      run(async function () {
+        WebChat.renderWebChat(
+          {
+            directLine: WebChat.createDirectLine({
+              token: await testHelpers.token.fetchDirectLineToken()
+            }),
+            nonce: 'WEB_CHAT_NONCE',
+            store: testHelpers.createStore()
+          },
+          document.getElementById('webchat')
+        );
+
+        await pageConditions.uiConnected();
+
+        await pageObjects.sendMessageViaSendBox('card breakfast');
+
+        await pageConditions.numActivitiesShown(2);
+
+        await host.snapshot();
+      });
+    </script>
+  </body>
+</html>
diff --git a/docs/CONTENT_SECURITY_POLICY.md b/docs/CONTENT_SECURITY_POLICY.md
@@ -2,21 +2,29 @@
 
 Starting from 4.10.1, [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) is supported.
 
-> In this article, we are using a nonce of `a1b2c3d`. In a production system, it should be a random and unguessable value that changes every time a policy is applied.
+> In this article, we are using a nonce of `a1b2c3d`. In production environment, it should be a value generated by random number generator (RNG) with high entropy. The value should change every time the policy is applied.
+
+> New in 4.19.0: `img-src data:` is required for display icons used in Web Chat.
 
 To enable Web Chat in a CSP-enforced environment, the following directives must be configured:
 
 ```
-connect-src https://directline.botframework.com wss://directline.botframework.com; img-src blob:; script-src 'strict-dynamic'; style-src 'nonce-a1b2c3d'
+img-src blob: data:; script-src 'strict-dynamic'; style-src 'nonce-a1b2c3d'
+```
+
+If Web Chat is used to connect to Azure Bot Services, the following additional directives must be configured:
+
+```
+connect-src https://directline.botframework.com wss://directline.botframework.com;
 ```
 
-For example, in a strict CSP environment, the basic policy should be:
+For example, in a strict CSP environment, the basic policy to connect to Azure Bot Services should be:
 
 <!-- prettier-ignore-start -->
 ```html
 <meta
   http-equiv="Content-Security-Policy"
-  content="default-src 'none'; base-uri 'none'; connect-src blob: https://directline.botframework.com wss://directline.botframework.com; img-src blob:; script-src 'strict-dynamic'; style-src 'nonce-a1b2c3d'"
+  content="default-src 'none'; base-uri 'none'; connect-src blob: https://directline.botframework.com wss://directline.botframework.com; img-src blob: data:; script-src 'strict-dynamic'; style-src 'nonce-a1b2c3d'"
 />
 ```
 <!-- prettier-ignore-end -->
@@ -27,43 +35,44 @@ Additional directives may be needed to operate the bot properly. For example, if
 
 ## Explanation of directives
 
--  `default-src 'none'`
-   -  For strict CSP: deny access unless otherwise specified
--  `base-uri 'none'`
-   -  For strict CSP: deny rebasing URIs using the [`<base>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base)
--  `connect-src blob: https://directline.botframework.com wss://directline.botframework.com`
-   -  `blob:` is used for uploading attachments
-   -  REST call to https://directline.botframework.com for starting conversation, posting activities, etc.
-   -  Web Socket connection to wss://directline.botframework.com for receiving activities
-   -  When using protocols other than Direct Line or Web Chat channel, the source will be different
--  `img-src blob:`
-   -  `blob:` will allow images in Web Chat to be loaded via `blob:` scheme. Types of images using `blob:` scheme:
-      -  Inlined assets. For example, connectivity status spinner and typing indicator
-         -  You can use `styleOptions` to load these images from your source and modify this directive as needed
-      -  Bot attached images using data URI, will be converted to URL with scheme of `blob:`
-      -  User uploaded images are downscaled as thumbnails with scheme of `blob:`
--  `script-src 'strict-dynamic'`
-   -  (Optional) `strict-dynamic` will allow Web Chat to use Web Worker to downscale image on upload
-      -  If `strict-dynamic` is not provided, Web Chat will fallback to main thread to downscale image
--  `style-src 'nonce-a1b2c3d'`
-   -  `'nonce-a1b2c3d'` will allow CSS injection through this nonce. This should be a per-policy, unique, and unguessable value
-   -  Web Chat inject `<style>` element using [`emotion`](https://emotion.sh/) with `nonce` attribute
-   -  You will need to pass this nonce when rendering Web Chat
+- `default-src 'none'`
+  - For strict CSP: deny access unless otherwise specified
+- `base-uri 'none'`
+  - For strict CSP: deny rebasing URIs using the [`<base>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base)
+- `connect-src blob: https://directline.botframework.com wss://directline.botframework.com`
+  - `blob:` is used for uploading attachments
+  - REST call to https://directline.botframework.com for starting conversation, posting activities, etc.
+  - Web Socket connection to wss://directline.botframework.com for receiving activities
+  - When using protocols other than Direct Line or Web Chat channel, the source will be different
+- `img-src blob:`
+  - `blob:` will allow images in Web Chat to be loaded via `blob:` scheme. Types of images using `blob:` scheme:
+    - Bot attached images using data URI, will be converted to URL with scheme of `blob:`
+    - User uploaded images are downscaled as thumbnails with scheme of `blob:`
+- `img-src data:`
+  - `data:` will allow images in Web Chat to be loaded via `data:` scheme. Types of images using `data:` scheme:
+    - Inlined assets. For example, connectivity status spinner and typing indicator
+- `script-src 'strict-dynamic'`
+  - (Optional) `strict-dynamic` will allow Web Chat to use Web Worker to downscale image on upload
+    - If `strict-dynamic` is not provided, Web Chat will fallback to main thread to downscale image
+- `style-src 'nonce-a1b2c3d'`
+  - `'nonce-a1b2c3d'` will allow CSS injection through this nonce. This should be a per-policy, unique, and unguessable value
+  - Web Chat inject `<style>` element using [`emotion`](https://emotion.sh/) with `nonce` attribute
+  - You will need to pass this nonce when rendering Web Chat
 
 ## Setting up the nonce
 
 When rendering Web Chat, pass the nonce as a prop named `nonce`.
 
 ```js
 WebChat.renderWebChat({
-   directLine: createDirectLine({ token }),
-   nonce: 'a1b2c3d'
+  directLine: createDirectLine({ token }),
+  nonce: 'a1b2c3d'
 });
 ```
 
 ## Limitations
 
-Currently, the nonce is used for injecting `<style>` elements only. It is not used for other elements, including `<img>` and other media elements. For details, please see [#3445](https://github.com/microsoft/BotFramework-WebChat/issues/3445.
+Currently, the nonce is used for injecting `<style>` elements only. It is not used for other elements, including `<img>` and other media elements. For details, please see [#3445](https://github.com/microsoft/BotFramework-WebChat/issues/3445).
 
 ## Nonce exposure
 
diff --git a/packages/test/harness/src/browser/globals/imageAsLog.js b/packages/test/harness/src/browser/globals/imageAsLog.js
@@ -1,6 +1,13 @@
-async function getBlobURL(base64) {
-  const res = await fetch(`data:image/png;base64,${base64}`);
-  const blob = await res.blob();
+function getBlobURL(base64) {
+  const byteString = atob(base64);
+  const arrayBuffer = new ArrayBuffer(byteString.length);
+  const uint8Array = new Uint8Array(arrayBuffer);
+
+  for (let index = 0; index < byteString.length; index++) {
+    uint8Array[+index] = byteString.charCodeAt(index);
+  }
+
+  const blob = new Blob([uint8Array], { type: 'image/png' });
 
   return URL.createObjectURL(blob);
 }
@@ -17,7 +24,7 @@ function getImageSize(url) {
 }
 
 async function imageAsLog(base64, scale = 1) {
-  const url = await getBlobURL(base64);
+  const url = getBlobURL(base64);
   const { height, width } = await getImageSize(url);
 
   const scaledHeight = height * scale;
diff --git a/samples/01.getting-started/j.bundle-with-content-security-policy/README.md b/samples/01.getting-started/j.bundle-with-content-security-policy/README.md
@@ -41,7 +41,7 @@ The only change needed in this sample is to configure a strict Content Security
   <head>
 +   <meta
 +     http-equiv="Content-Security-Policy"
-+     content="default-src 'none'; base-uri 'none'; connect-src https://directline.botframework.com wss://directline.botframework.com https://webchat-mockbot.azurewebsites.net; img-src blob:; script-src 'nonce-a1b2c3d' 'strict-dynamic'; style-src 'nonce-a1b2c3d'"
++     content="default-src 'none'; base-uri 'none'; connect-src https://directline.botframework.com wss://directline.botframework.com https://webchat-mockbot.azurewebsites.net; img-src blob: data:; script-src 'nonce-a1b2c3d' 'strict-dynamic'; style-src 'nonce-a1b2c3d'"
 +   />
 -   <script crossorigin="anonymous" src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
 +   <script crossorigin="anonymous" nonce="a1b2c3d" src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
@@ -78,10 +78,10 @@ Here is the finished `index.html`:
 <!DOCTYPE html>
 <html lang="en-US">
   <head>
-    <title>Web Chat: Minimal bundle</title>
+    <title>Web Chat: Content Security Policy</title>
     <meta
       http-equiv="Content-Security-Policy"
-      content="default-src 'none'; base-uri 'none'; connect-src https://directline.botframework.com wss://directline.botframework.com https://webchat-mockbot.azurewebsites.net; img-src blob:; script-src 'nonce-a1b2c3d' 'strict-dynamic'; style-src 'nonce-a1b2c3d'"
+      content="default-src 'none'; base-uri 'none'; connect-src https://directline.botframework.com wss://directline.botframework.com https://webchat-mockbot.azurewebsites.net; img-src blob: data:; script-src 'nonce-a1b2c3d' 'strict-dynamic'; style-src 'nonce-a1b2c3d'"
     />
     <script crossorigin="anonymous" nonce="a1b2c3d" src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
     <style nonce="a1b2c3d">
diff --git a/samples/01.getting-started/j.bundle-with-content-security-policy/index.html b/samples/01.getting-started/j.bundle-with-content-security-policy/index.html
@@ -1,15 +1,15 @@
 <!doctype html>
 <html lang="en-US">
   <head>
-    <title>Web Chat: Full-featured bundle</title>
+    <title>Web Chat: Content Security Policy</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <!--
       This CDN points to the latest official release of Web Chat. If you need to test against Web Chat's latest bits, please refer to using Web Chat's latest bits:
       https://github.com/microsoft/BotFramework-WebChat#how-to-test-with-web-chats-latest-bits
     -->
     <meta
       http-equiv="Content-Security-Policy"
-      content="default-src 'none'; base-uri 'none'; connect-src blob: https://directline.botframework.com wss://directline.botframework.com https://webchat-mockbot.azurewebsites.net; img-src blob:; script-src 'nonce-a1b2c3d' 'strict-dynamic' 'unsafe-eval'; style-src 'nonce-a1b2c3d'"
+      content="default-src 'none'; base-uri 'none'; connect-src blob: https://directline.botframework.com wss://directline.botframework.com https://hawo-mockbot4-token-app.blueriver-ce85e8f0.westus.azurecontainerapps.io; img-src blob: data:; script-src 'nonce-a1b2c3d' 'strict-dynamic'; style-src 'nonce-a1b2c3d'"
     />
     <script
       crossorigin="anonymous"
