Issues with Improving CSP in Grafana

[jim8503]

• What Grafana version and what operating system are you using?
  Docker image grafana/grafana:11.2.6-ubuntu

• What are you trying to achieve?
  Improve security of Content Security Policy (CSP), specifically on style-src directive

• How are you trying to achieve it?

  1. Removing ‘unsafe-inline’ from style-src.
  2. Adding $NONCE to allow trusted inline styles.

• What happened?

  • Grafana homepage does not load correctly
  • Errors reported in browser console

• What did you expect to happen?
  Improve the security of the CSP in Grafana to only allow inline styles from the same origin, or from trusted origins, avoiding such a permissive policy

• Can you copy/paste the configuration(s) that you are having problems with?

  services:
  grafana:
  container_name: grafana
  image: grafana/grafana:11.2.6-ubuntu
  environment:
  GF_LOG_LEVEL: “debug”
  GF_SERVER_ROUTER_LOGGING: “true”
  GF_SECURITY_CONTENT_SECURITY_POLICY: “true”
  GF_SECURITY_CONTENT_SECURITY_POLICY_TEMPLATE: “script-src ‘self’ ‘strict-dynamic’ $$NONCE;object-src ‘none’;font-src ‘self’;style-src ‘self’ $$NONCE;img-src * data:;base-uri ‘self’;connect-src ‘self’ grafana.com ws://$$ROOT_PATH wss://$$ROOT_PATH;manifest-src ‘self’;media-src ‘none’;form-action ‘self’;”
  ports:
  - 3000:3000

• Did you receive any errors in the Grafana UI or in related logs? If so, please tell us exactly what they were.

  Refused to apply inline style because it violates the following Content Security Policy directive: “style-src ‘self’ ‘nonce-Nq1nWrsBrlbkEJJ+uquwyQ’”. Either the ‘unsafe-inline’ keyword, a hash (‘sha256-4bik+wU2/aEsu/1U9IyPEl3/GOGdZ1NrCOY2OPv3Ztc=’), or a nonce (‘nonce-…’) is required to enable inline execution.

  

• Did you follow any online instructions? If so, what is the URL?
  Configure security hardening | Grafana documentation

  I would appreciate any help or suggestions to resolve this issue, especially if someone has done something similar or knows the correct way to do it.

[jim8503]

In addition to the previous report, upon reviewing the operation of the script-src directive, it generally works; however, it fails with some plugins. For example:

Infinity Datasource

yesoreyeram-infinity-datasource plugin failed

EvalError: Refused to evaluate a string as JavaScript because ‘unsafe-eval’ is not an allowed source of script in the following Content Security Policy directive: “script-src ‘self’ ‘strict-dynamic’ ‘nonce-ljiAwTgM2c1OIJAboRugNg’”.

Bussiness Text

Refused to evaluate a string as JavaScript because ‘unsafe-eval’ is not an allowed source of script in the following Content Security Policy directive: “script-src ‘self’ ‘strict-dynamic’ ‘nonce-ljiAwTgM2c1OIJAboRugNg’”.

Business Charts

ECharts Execution Error

Refused to evaluate a string as JavaScript because ‘unsafe-eval’ is not an allowed source of script in the following Content Security Policy directive: “script-src ‘self’ ‘strict-dynamic’ ‘nonce-ljiAwTgM2c1OIJAboRugNg’”.

How can I adjust the directive to be more secure and not so permissive when adding ‘unsafe-eval’?

Can anyone help or guide me?

[jim8503]