diff --git a/bundles/org.openhab.ui/web/src/index.html b/bundles/org.openhab.ui/web/src/index.html
index 47f67a6829..317a8d70ae 100644
--- a/bundles/org.openhab.ui/web/src/index.html
+++ b/bundles/org.openhab.ui/web/src/index.html
@@ -3,15 +3,27 @@
 <head>
   <meta charset="utf-8">
   <!--
-  Customize this policy to fit your own app's needs. For more guidance, see:
-      https://github.com/apache/cordova-plugin-whitelist/blob/master/README.md#content-security-policy
-  Some notes:
+  Cordova recommended default CSP. For more guidance, see:
+      https://cordova.apache.org/docs/en/dev/guide/appdev/allowlist/#content-security-policy-csp
+  <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com; style-src 'self' 'unsafe-inline'; media-src *">
+  Explanation:
     * gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication
+           Note that UIWebView is deprecated, see https://developer.apple.com/documentation/uikit/uiwebview
     * https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
-    * Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
-      * Enable inline JS: add 'unsafe-inline' to default-src
+    * Disables use of eval() and inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
+        * Enable inline JS: add 'unsafe-inline' to default-src
+        * Enable eval(): add 'unsafe-eval' to default-src
   -->
-  <meta http-equiv="Content-Security-Policy" content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: content: blob:; style-src 'self' 'unsafe-inline';">
+  <!-- Explanation:
+    * allow loading resources from the same origin, inline scripts and styles
+    * allow loading fonts from the same origin, and data: URIs
+    * allow loading images from any source, and data: URIs
+    * allow loading media from any source, and data:, blob: and media: URIs
+    * allow connecting (through fetch(), XMLHttpRequest, WebSocket etc.) to the same origin, raw.githubusercontent.com (add-on logos etc.), Iconify icon sources, and any source
+  -->
+  <% if (process.env.NODE_ENV !== 'development') { %>
+  <meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline'; font-src 'self' data:; img-src * data:; media-src * data: blob: media:; connect-src 'self' raw.githubusercontent.com api.iconify.design api.unisvg.com api.simplesvg.com *;">
+  <% } %>
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">
 
   <meta name="theme-color" content="#e64a19">
