Nextcloud: Content-Security-Policy headers prevent PhotoPrism from loading in a frame

[voronond]

The new commit 2ddb1d6daaab847cd95f38aaa2f9293f35023f9a (Content-Security-Policy) in a new release prevents Nextclouds addon called External Sites (https://apps.nextcloud.com/apps/external) from opening Photoprism within Nextcloud webpage (embedding).

This is the error I get:

It worked without any problems before. Is there any way to make an exception for a Nextcloud? I understand that it is a security feature, but it would be nice to support this from a user perspective.

[lastzero]

Yes, I think specific domains can be whitelisted. Never heard about this plug-in before, thanks for letting us know!

[Fylax]

If I am correct, frame-ancestors directive specifies where a given webapp (photoprism) can be framed (i.e., inside iframe or object).

Ideally, being able to specify a list of domains in a docker variable would cover all possible scenarios. Can it be an applicable solution?

[dividehex]

This also affects users of Organizr, since it prevents loading PhotoPrism inside an iframe.

[lastzero]

Didn't even know there is an Organizr integration... thanks for reporting this.

[Akruidenberg]

Would love to add a withlist with an env configuration

[GordonFreemanK]

Didn't even know there is an Organizr integration... thanks for reporting this.

Technically it isn't a specific integration for Photoprism. Organizr allows adding any URL and then will try embedding it in an iframe, but the current Photoprism headers (Content-Security-Policy and maybe but I don't think so X-Frame-Options) prevents it, so it will open it in a new tab instead.

That being said if you're interested Organizr is actually aware of Photoprism insofar as they have a Photoprism icon available to select in their prefilled list!

[gymnae]

I would also like to be able to specify domains which can embed photoprism, since shared albums or folders can be seamlessly integrated into other pages

[firefly91]

Hi all, I had the problem with serveral docker containers (e.g. Photoprism, Paperless, etc.)

Solution if you are using a proxy, e.g. NGINX: Change the header via custom location.

# Remove current policy
proxy_hide_header  Content-Security-Policy;
# Add new policy
add_header Content-Security-Policy "frame-ancestors *.mydomain.com";

Now photoprism is loading in iFrames via your domain (e.g. Organizr, Netxtcloud, etc.)

[iWr4tH]

Hi all, I had the problem with serveral docker containers (e.g. Photoprism, Paperless, etc.)

Solution if you are using a proxy, e.g. NGINX: Change the header via custom location.

# Remove current policy
proxy_hide_header  Content-Security-Policy;
# Add new policy
add_header Content-Security-Policy "frame-ancestors *.mydomain.com";

Now photoprism is loading in iFrames via your domain (e.g. Organizr, Netxtcloud, etc.)

            This worked for me! Thanks 

[balajeek]

i am trying to do the similar: created a html file with two iframes, one will run photoprism and other will run grafana

i use ngnix proxy manager, and i am not sure how i would add the header like as you suggested. I see under "Custom Locations" in proxy host setting, I am not sure what to add there? If you can help that would be great. Thank you.

[kmanan]

Hi all, I had the problem with serveral docker containers (e.g. Photoprism, Paperless, etc.)

Solution if you are using a proxy, e.g. NGINX: Change the header via custom location.

# Remove current policy
proxy_hide_header  Content-Security-Policy;
# Add new policy
add_header Content-Security-Policy "frame-ancestors *.mydomain.com";

Now photoprism is loading in iFrames via your domain (e.g. Organizr, Netxtcloud, etc.)

Could you ELI5 this for me, please? What location hostname forward port did you use? And did you do this in the photoprism Nginx entry or the "destination" Nginx entry?

[ajmathews]

Hi all, I had the problem with serveral docker containers (e.g. Photoprism, Paperless, etc.) Solution if you are using a proxy, e.g. NGINX: Change the header via custom location.

# Remove current policy
proxy_hide_header  Content-Security-Policy;
# Add new policy
add_header Content-Security-Policy "frame-ancestors *.mydomain.com";

Now photoprism is loading in iFrames via your domain (e.g. Organizr, Netxtcloud, etc.)

Could you ELI5 this for me, please? What location hostname forward port did you use? And did you do this in the photoprism Nginx entry or the "destination" Nginx entry?

In case this helps you or others coming in here. This is my excerpt from the nginx conf,

upstream photoprism_backend {
  server 192.168.1.100:2342;
}

server {
  server_name photos.domain.com;
  listen 80;

  location / {
    proxy_pass http://photoprism_backend;

    # Remove current policy
    proxy_hide_header  Content-Security-Policy;
    # Add new policy
    add_header Content-Security-Policy "frame-ancestors *.snz.home";

    proxy_set_header        Host $host:$server_port;
    proxy_set_header        X-Real-IP $remote_addr;
    proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header        X-Forwarded-Proto $scheme;
    proxy_set_header        X-Forwarded-Host $server_name;
    proxy_set_header        X-Forwarded-Server $host;
  }

  # Proxy Live WebSocket connections.
  location /api {
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection $connection_upgrade;
    proxy_set_header Host $http_host;
    proxy_pass http://photoprism_backend;
  }
}

[Rolf-Smit]

I tried to do this with Traefik with Docker Compose, here is the configuration that worked for me:

      - "traefik.http.routers.photoprism.middlewares=photoprismheaders"
      - "traefik.http.middlewares.photoprismheaders.headers.contentSecurityPolicy=frame-ancestors mydomain.com"

Note 1: this assumes your router for Photoprism is called "photoprism"

Note 2: I turned *.mydomain.com into mydomain.com because I needed this to work on my main domain (without any subdomains).