Embedded widgets cannot make external API requests due to hardcoded CSP

[guvra]

Description

The Electron Player currently overrides CSP headers for rendered content in src/main/index.ts:

electron-player/src/main/index.ts

Lines 1530 to 1542 in 84d2620

	session.defaultSession.webRequest.onHeadersReceived((details, callback) => {
	callback({
	responseHeaders: {
	...details.responseHeaders,
	'Content-Security-Policy': [
	"default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' http://localhost:9696; style-src 'self' 'unsafe-inline' http://localhost:9696; img-src 'self' http://localhost:9696 https://develop.xibo.co.uk data: https:; connect-src 'self' http://localhost:9696 https://auth.signlicence.co.uk; media-src 'self' http://localhost:9696 https:; frame-src 'self' http://localhost:9696 https: http:; font-src 'self' http://localhost:9696 http://localhost data:;",
	],
	// 'Access-Control-Allow-Origin': ['http://localhost:5173'], // Allow any domain to access
	'Access-Control-Allow-Methods': ['GET, POST, PUT, DELETE, OPTIONS'], // Allowed methods
	'Access-Control-Allow-Headers': ['Content-Type, Authorization', 'x-preview-jwt'] // Allowed headers
	}
	});
	});

Because of this, embedded widgets cannot fetch data from external APIs with the fetch function.

Data connectors are a possible workaround, but I would really like to avoid using them because preview mode is broken when a layout depends on a data connector (and the workaround to open another tab with the data connector JS opened is not user friendly).

Reproduction

fetch('https://example.com/');


VM543:1 Fetch API cannot load https://example.com/. Refused to connect because it violates the document's Content Security Policy.

fetch also fails when nested in the EmbedInit function of an embedded widget.

Proposal

Would it be possible to make the CSP configurable?
Or maybe a configuration for setting an allow-list of authorized domains (e.g. example.com, localhost:8888...).