web modeler violates the following Content Security Policy directive

Environment (Required on creation)

Production

Description (Required on creation; please attach any relevant screenshots, stacktraces, log files, etc. to the ticket)

Steps to reproduce (Required on creation)

Enabling web modeler through camunda helm chart.
enabled the required ingress.
When i try to login on web modeler, getting the below error in console log. Other components are working fine and able to login properly. Only web modeler is having an issue while logging in.

Observed Behavior (Required on creation)

app.js:sourcemap:338 Refused to connect to ‘http://camunda.example.com/modeler/internal-api/login?version=0198e04…&lastRefreshAge=0’ because it violates the following Content Security Policy directive: “connect-src ‘self’ wss://camunda.example.com:80 ws://camunda.example.com:80 https://camunda.example.com .play.camunda.io wss://.play.camunda.io”.

Expected behavior (Required on creation)

Should be able to login on web modeler

Root Cause (Required on prioritization)

violates the following Content Security Policy directive. Unable to redirect it on https. redirect request is going to http only.

Hi @Nikhil_Bansal, welcome to the forums! What version of Camunda are you using and where is it deployed? Can you share you values.yaml file?

ingress.yaml is as below .

`global:
ingress:
enabled: true
className: internal
host: "camunda.example.com"
tls:
enabled: false
secretName: "mycert"
identity:
auth:
publicIssuerUrl: "https://camunda.example.com/auth/realms/camunda-platform"
operate:
redirectUrl: "http://camunda.example.com/operate"
tasklist:
redirectUrl: "http://camunda.example.com/tasklist"
optimize:
redirectUrl: "http://camunda.example.com/optimize"
webModeler:
redirectUrl: "http://camunda.example.com/modeler"

identity:
contextPath: "/identity"
fullURL: "https://camunda.example.com/identity"
keycloak:
ingress:
enabled: true
ingressclassName: internal
hostname: "camunda.example.com"
extraEnvVars:
- name: KEYCLOAK_PROXY_ADDRESS_FORWARDING
value: "true"
- name: KEYCLOAK_EXTRA_ARGS
value: "-Dkeycloak.frontendUrl=https://camunda.example.com/auth"
operate:
contextPath: "/operate"
ingress:
enabled: true
className: internal
annotations:
ingress.kubernetes.io/rewrite-target:
nginx.ingress.kubernetes.io/ssl-redirect: "false"
path: /
host: "camunda.example.com"
tls:
enabled: false
secretName: ""

optimize:
contextPath: "/optimize"
ingress:
enabled: true
className: internal
annotations:
ingress.kubernetes.io/rewrite-target:
nginx.ingress.kubernetes.io/ssl-redirect: "false"
path: /
host: "camunda.example.com"
tls:
enabled: false
secretName: ""

tasklist:
contextPath: "/tasklist"
ingress:
enabled: true
className: internal
annotations:
ingress.kubernetes.io/rewrite-target:
nginx.ingress.kubernetes.io/ssl-redirect: "false"
path: /
host: "camunda.example.com"
tls:
enabled: false
secretName: ""

webModeler:
contextPath: "/modeler"

zeebe-gateway:
ingress:
enabled: true
className: internal
host: "zeebe-camunda.example.com"`

Hi @Nikhil_Bansal - what version of Camunda are you using? Is there a reason you have TLS disabled everywhere but are using an HTTPS URL for Identity? (I don’t think it’s the root cause, but generally mixing secure and insecure paths can cause problems.)

We are using camunda version 8.6 and we have already setup ssl certificate on our GCP Load balancer. That’s why we are using https.

Hi @Nikhil_Bansal - that might be the issue. Those URLs are used to reference each component and configure the routes/redirects for them. If you are accessing them with HTTPS, I believe all those values need to be HTTPS, even if the certificate is applied at a different network layer. This would also affect content security policies, where the website is loaded using a secure URL but then trying to fetch data from an insecure URL.

@nathan.loding
I have updated the yaml file. And changed every redirectUri to https and also enabled tls on ingress level. Still, getting same issue.

global:
ingress:
enabled: true
className: internal
host: “camunda.example.com
tls:
# Ingress.tls.enabled if true, then tls is configured on the ingress resource. If enabled the Ingress.host need to be defined.
enabled: true
# Ingress.tls.secretName defines the secret name which contains the TLS private key and certificate
secretName: “tls-secret”
identity:
auth:
publicIssuerUrl: “https://camunda.example.com/auth/realms/camunda-platform
operate:
redirectUrl: “https://camunda.example.com/operate
tasklist:
redirectUrl: “https://camunda.example.com/tasklist
optimize:
redirectUrl: “https://camunda.example.com/optimize
webModeler:
redirectUrl: “https://camunda.example.com/modeler

identity:
contextPath: “/identity”
fullURL: “https://camunda.example.com/identity
# Keycloak configuration, for the keycloak dependency chart which is used by identity
keycloak: # see: charts/bitnami/keycloak at main · bitnami/charts · GitHub
ingress: # see: Using a reverse proxy - Keycloak
enabled: true
ingressclassName: internal
hostname: “camunda.example.com
extraEnvVars: # see: http://github.com/bitnami/bitnami-docker-keycloak#configuration
- name: KEYCLOAK_PROXY_ADDRESS_FORWARDING
value: “true”
- name: KEYCLOAK_EXTRA_ARGS
value: “-Dkeycloak.frontendUrl=https://camunda.example.com/auth
operate:
contextPath: “/operate”
ingress:
enabled: true
className: internal
annotations:
ingress.kubernetes.io/rewrite-target:
nginx.ingress.kubernetes.io/ssl-redirect: “false”
path: /
host: “camunda.example.com
tls:
enabled: false
secretName: “”

optimize:
contextPath: “/optimize”
ingress:
enabled: true
className: internal
annotations:
ingress.kubernetes.io/rewrite-target:
nginx.ingress.kubernetes.io/ssl-redirect: “false”
path: /
host: “camunda.example.com
tls:
enabled: false
secretName: “”

tasklist:
contextPath: “/tasklist”
ingress:
enabled: true
className: internal
annotations:
ingress.kubernetes.io/rewrite-target:
nginx.ingress.kubernetes.io/ssl-redirect: “false”
path: /
host: “camunda.example.com
tls:
enabled: false
secretName: “”

webModeler:
# The context path is used for the web application that will be accessed by users in the browser.
# In addition, a WebSocket endpoint will be exposed on “[contextPath]-ws”, e.g. “/modeler-ws”.
contextPath: “/modeler”

zeebe-gateway:
replicas: 1
ingress:
enabled: true
className: internal
host: “zeebe-camunda.example.com
tls:
enabled: true
secretName: “tls-secret-zeebe”

Please let me know how can we resolve it?

Hi @Nikhil_Bansal - nothing seems obviously wrong with the setup. Is the error identical to the one received before?

Yes @nathan.loding exact same error.

@Nikhil_Bansal - I am unable to reproduce this, but I also don’t have a completely identical environment. Can you provide a screenshot of the error in your browser console (with the full error expanded)?

Hi @Nikhil_Bansal - that screenshot shows a mismatch between HTTP and HTTPS again. That is the only thing I can think of at the moment, and this isn’t something I’ve been able to reproduce myself.

I would recommend opening a support ticket at this point.

@nathan.loding I am not a professional or enterprise customer, could not raise a support ticket.

https://jira.camunda.com/servicedesk/customer/portal/2/SEC-1309

Can you please help me in this ??

@Nikhil_Bansal - apologies, I assumed you had a license. (Note: an enterprise license is required to run Camunda 8.6 in production.)

When I deploy Web Modeler using Helm, I do not get that error, so I do believe it is a deployment/configuration error, rather than an issue with the product. Your screenshot shows the browser navigating to https://camunda.tools... but it is trying to fetch data from http://camunda.tools... - I believe the mismatch between HTTP and HTTPS is the first issue to tackle (and hopefully it will resolve the whole problem).

I’m not certain what the annotations under everything is doing, or why you have tls.enabled: false for all the services, and I don’t know how your environment is setup with the load balancer, so that makes it hard to further debug. (Losing the yaml formatting makes it hard also; forum tip, you can use three backticks or click the </> icon in the editor to paste formatted code!)

The first thing I would try is to review your TLS settings. This is a configured with ingress and TLS that we use for CI tests and is a good reference for this:

global:
  ingress:
    enabled: true
    className: internal
    host: "camunda.tools.fynd.engineering"
    tls:
      # Ingress.tls.enabled if true, then tls is configured on the ingress resource. If enabled the Ingress.host need to be defined.
      enabled: true
      # Ingress.tls.secretName defines the secret name which contains the TLS private key and certificate
      secretName: "tls-secret"
  identity:
    auth:
      publicIssuerUrl: "https://camunda.tools.fynd.engineering/auth/realms/camunda-platform"
      operate:
        redirectUrl: "https://camunda.tools.fynd.engineering/operate"
      tasklist:
        redirectUrl: "https://camunda.tools.fynd.engineering/tasklist"
      optimize:
        redirectUrl: "https://camunda.tools.fynd.engineering/optimize"
      webModeler:
        redirectUrl: "https://camunda.tools.fynd.engineering/modeler"

identity:
  contextPath: "/identity"
  fullURL: "https://camunda.tools.fynd.engineering/identity"
  # Keycloak configuration, for the keycloak dependency chart which is used by identity
  keycloak: # see: http://github.com/bitnami/charts/tree/master/bitnami/keycloak#parameters
    ingress: # see: http://www.keycloak.org/server/reverseproxy
      enabled: true
      ingressclassName: internal
      hostname: "camunda.tools.fynd.engineering"
    extraEnvVars: # see: http://github.com/bitnami/bitnami-docker-keycloak#configuration
      - name: KEYCLOAK_PROXY_ADDRESS_FORWARDING
        value: "true"
      - name: KEYCLOAK_EXTRA_ARGS
        value: "-Dkeycloak.frontendUrl=https://camunda.tools.fynd.engineering/auth"
operate:
  contextPath: "/operate"
  ingress:
    enabled: true
    className: internal
    annotations:
      ingress.kubernetes.io/rewrite-target:
      nginx.ingress.kubernetes.io/ssl-redirect: "false"
    path: /
    host: "camunda.tools.fynd.engineering"
    tls:
      enabled: true
      secretName: ""

optimize:
  contextPath: "/optimize"
  ingress:
    enabled: true
    className: internal
    annotations:
      ingress.kubernetes.io/rewrite-target:
      nginx.ingress.kubernetes.io/ssl-redirect: "false"
    path: /
    host: "camunda.tools.fynd.engineering"
    tls:
      enabled: true
      secretName: ""

tasklist:
  contextPath: "/tasklist"
  ingress:
    enabled: true
    className: internal
    annotations:
      ingress.kubernetes.io/rewrite-target:
      nginx.ingress.kubernetes.io/ssl-redirect: "false"
    path: /
    host: "camunda.tools.fynd.engineering"
    tls:
      enabled: true
      secretName: ""

webModeler:
  # The context path is used for the web application that will be accessed by users in the browser.
  # In addition, a WebSocket endpoint will be exposed on "[contextPath]-ws", e.g. "/modeler-ws".
  contextPath: "/modeler"

zeebe-gateway:
  replicas: 1
  ingress:
    enabled: true
    className: internal
    host: "zeebe-camunda.tools.fynd.engineering"
    tls:
      enabled: true
      secretName: "tls-secret-zeebe"

@nathan.loding I have enabled tls on services, still same issue.

@Nikhil_Bansal - but the error is the same one that shows both HTTP and HTTPS?

Should this ingress section also have a TLS section as you’ve defined for all the other ingress configurations?