fix(google integration): add frame-src CSP header

[millaguie]

While using Google Drive as the backend you have to ensure to allow CSP frame-src from google or it will fail to log in, due to CSP restrictions.

This allows that and fixes the issue

[davidjgraph]

Thanks for the suggestion. Could you please explain what the problem is being fixed, what environment the problem is visible in and how the change fixes that problem?

[millaguie]

Thanks for the suggestion. Could you please explain what the problem is being fixed, what environment the problem is visible in and how the change fixes that problem?

sorry I just added a description

[m-mohamedin]

Hi,

Can you please test with frame-src 'self' https://*.google.com; Does it work?

[gek0]

Any updates on this?

@davidjgraph This is breaking google drive integration -> the part where you want to load the file from drive storage into drawio Saving the file into storage is not affected until you want to select any other directory that is not root

When trying to open a file from authorized storage a blocked iframe is shown:

When headers removed from there:

This is happening in a self-hosted environment where those CSP headers are injected to decouple from the cloud-hosted version https://github.com/jgraph/docker-drawio/blob/dev/main/docker-entrypoint.sh#L15

Hope this makes it to a new version

[davidjgraph]

What are the exact, complete steps to reproduce the problem?

[gek0]

@davidjgraph you can use the following docker-compose to run setup locally + you'll need to create google app to get credentials

version: '3'
services:
  image-export:
    image: jgraph/export-server # export:latest
    expose:
      - "8000"
    networks:
      - drawionet        
    environment:
      - DRAWIO_SERVER_URL=http://drawio:8080
  drawio:
    image: jgraph/drawio:18.1.1
    links:
      - image-export
    networks:
      - drawionet    
    ports:
      - "80:8080"
      - "443:8443"  
    environment:
      - DRAWIO_SELF_CONTAINED="1" # PDF export function removed for self-hosted
      - EXPORT_URL=http://image-export:8000/
      - DRAWIO_BASE_URL=http://drawio
      - DRAWIO_VIEWER_URL=http://drawio/js/viewer.min.js
      - DRAWIO_GOOGLE_APP_ID=xxxxxxx
      - DRAWIO_GOOGLE_CLIENT_ID=xxxxxxx
      - DRAWIO_GOOGLE_CLIENT_SECRET=xxxxxxx
networks:
  drawionet:

Steps:

1. Login and authorize google drive with your account
2. Click "open existing diagram" from drive storage
3. Iframe content is blocked

[m-mohamedin]

Hi,

You can customize the CSP using the environment variable DRAWIO_CSP_HEADER Also, we'll add frame-src 'self' https://*.google.com; to the default CSP

[gek0]

@ashrafteleb you are right, that looks to be the temporary fix until it's added to default CSP.

On top of what you've mentioned, I've added 3 missing domains for frame-src for this to work properly frame-src '\self\' https://*.google.com https://*.googleapis.com https://*.googleusercontent.com https://*.gstatic.com

My full CSP added as env variable DRAWIO_CSP_HEADER:

default-src '\self\'; script-src '\self\' https://storage.googleapis.com https://apis.google.com https://docs.google.com https://code.jquery.com \'unsafe-inline\'; connect-src '\self\' https://*.dropboxapi.com https://api.trello.com https://api.github.com https://raw.githubusercontent.com https://*.googleapis.com https://*.googleusercontent.com https://graph.microsoft.com https://*.1drv.com https://*.sharepoint.com https://gitlab.com https://*.google.com https://fonts.gstatic.com https://fonts.googleapis.com; img-src * data:; media-src * data:; font-src * about:; style-src '\self\' \'unsafe-inline\' https://fonts.googleapis.com; frame-src '\self\' https://*.google.com https://*.googleapis.com https://*.googleusercontent.com https://*.gstatic.com;

@millaguie try with this above, it works for me + removed unsafe-inline as it's not needed and better to avoid unless necessary

[davidjgraph]

I'm don't see it's a bug that the CSP applies the most restrictive policy. The majority of users won't integrate with Google, so I'd think that should be a custom setting and documented.