set wildcard for img-src and disable report-only in dev mode

lib/csp/policies/app.ts

 import type CspDev from 'csp-dev';
 
 import appConfig from 'configs/app/config';
-import featuredNetworks from 'lib/networks/featuredNetworks';
 
 import { KEY_WORDS } from '../utils';
 
@@ -13,16 +12,6 @@ const MAIN_DOMAINS = [
 // eslint-disable-next-line no-restricted-properties
 const REPORT_URI = process.env.SENTRY_CSP_REPORT_URI;
 
-function getNetworksExternalAssetsHosts() {
-  const icons = featuredNetworks
-    .filter(({ icon }) => typeof icon === 'string')
-    .map(({ icon }) => new URL(icon as string).host);
-
-  const logo = appConfig.network.logo ? new URL(appConfig.network.logo).host : undefined;
-
-  return logo ? icons.concat(logo) : icons;
-}
-
 function getMarketplaceAppsHosts() {
   return {
     frames: appConfig.marketplaceAppList.map(({ url }) => new URL(url).host),
@@ -87,23 +76,23 @@ export default function generateAppDescriptor(): CspDev.DirectiveDescriptor {
       KEY_WORDS.DATA,
       ...MAIN_DOMAINS,
 
-      // github assets (e.g trustwallet token icons)
-      'raw.githubusercontent.com',
-
-      // auth0 assets and avatars
-      's.gravatar.com',
-      'i0.wp.com', 'i1.wp.com', 'i2.wp.com', 'i3.wp.com',
-      'lh3.googleusercontent.com', // google avatars
-      'avatars.githubusercontent.com', // github avatars
-
-      // network assets
-      ...getNetworksExternalAssetsHosts(),
-
-      // marketplace apps logos
-      ...marketplaceAppsHosts.logos,
+      // we agreed that using wildcard for images is mostly safe
+      // why do we have to use it? the main reason is that for NFT and inventory pages we get resources urls from API only on the client
+      // so they cannot be added to the policy on the server
+      // there could be 3 possible workarounds
+      //    a/ use server side rendering approach, that we don't want to do
+      //    b/ wrap every image/video in iframe with a source to static page for which we enforce certain img-src rule;
+      //        the downsides is page performance slowdown and code complexity (have to manage click on elements, color mode for
+      //        embedded page, etc)
+      //    c/ use wildcard for img-src directive; this can lead to some security vulnerabilities but we were unable to find evidence
+      //        that loose img-src directive alone could cause serious flaws on the site as long as we keep script-src and connect-src strict
+      //
+      // feel free to propose alternative solution and fix this
+      '*',
+    ],
 
-      // token's media
-      'ipfs.io',
+    'media-src': [
+      '*', // see comment for img-src directive
     ],
 
     'font-src': [

middleware.ts

@@ -28,7 +28,7 @@ export function middleware(req: NextRequest) {
 
   const end = Date.now();
   const res = NextResponse.next();
-  res.headers.append('Content-Security-Policy-Report-Only', cspPolicy);
+  res.headers.append(appConfig.isDev ? 'Content-Security-Policy' : 'Content-Security-Policy-Report-Only', cspPolicy);
   res.headers.append('Server-Timing', `middleware;dur=${ end - start }`);
 
   return res;