search

BookStackApp / BookStack

A platform to create documentation/wiki content built with PHP & Laravel
https://www.bookstackapp.com/
MIT License
15.38k stars 1.93k forks source link

Images do not load in self hosted drawio instance #4285

Closed bradyon2 closed 1 year ago

bradyon2 commented 1 year ago

Attempted Debugging

Searched GitHub Issues

Describe the Scenario

Main Issue and behavior When selecting 'Insert/edit drawing' for images uploaded to Bookstack and added to a page the drawio instance opens but the image does not load. Any edit or image created and then saved in drawio replaces the image in bookstack. If the image is not highlighted and an image is created and saved in drawio, it inserts that image below the original. If the image is created or uploaded in the local drawio instance, everything works as expected. Details The original image exists in public/uploads/images/gallery/2023-05/original-image.png The overwriting image exists in public/uploads/images/drawio/2023-05/new-image.png I created both drawio and bookstack using docker-compose files.

I have tested that another service can open images in an embedded drawio setup. The image being created in drawio instead of uploaded to Bookstack is leading me to believe it is a issue with my bookstack configuration.

Configs Env APP_ENV=production APP_DEBUG=false APP_KEY=SomeRandomStringWith32Characters APP_URL=https://bookstack.domain.name/ DB_HOST=mysql:3306 DB_DATABASE=bookstack DB_USERNAME=bookstack DB_PASSWORD=secret CACHE_DRIVER=file SESSION_DRIVER=file QUEUE_DRIVER=sync MEMCACHED_SERVERS=127.0.0.1:11211:100 STORAGE_TYPE=local STORAGE_S3_KEY=false STORAGE_S3_SECRET=false STORAGE_S3_REGION=false STORAGE_S3_BUCKET=false STORAGE_URL=false AUTH_METHOD=standard GITHUB_APP_ID=false GITHUB_APP_SECRET=false GOOGLE_APP_ID=false GOOGLE_APP_SECRET=false DISABLE_EXTERNAL_SERVICES=false LDAP_SERVER=false LDAP_BASE_DN=false LDAP_DN=false LDAP_PASS=false LDAP_USER_FILTER=false LDAP_VERSION=false

DRAWIO=https://drawio.infra.sdev:8443/?embed=1&proto=json&spin=1&stealth=1&configure=1 ALLOWED_IFRAME_SOURCES="https://drawio.infra.sdev:8443" ALLOW_CONTENT_SCRIPTS=true

sslproxy.conf ServerRoot "/usr/local/apache2"

LoadModule mpm_event_module modules/mod_mpm_event.so LoadModule authn_file_module modules/mod_authn_file.so LoadModule authn_core_module modules/mod_authn_core.so LoadModule authz_host_module modules/mod_authz_host.so LoadModule authz_groupfile_module modules/mod_authz_groupfile.so LoadModule authz_user_module modules/mod_authz_user.so LoadModule authz_core_module modules/mod_authz_core.so LoadModule authnz_ldap_module modules/mod_authnz_ldap.so LoadModule access_compat_module modules/mod_access_compat.so LoadModule auth_basic_module modules/mod_auth_basic.so LoadModule socache_shmcb_module modules/mod_socache_shmcb.so LoadModule reqtimeout_module modules/mod_reqtimeout.so LoadModule filter_module modules/mod_filter.so LoadModule mime_module modules/mod_mime.so LoadModule ldap_module modules/mod_ldap.so LoadModule log_config_module modules/mod_log_config.so LoadModule env_module modules/mod_env.so LoadModule headers_module modules/mod_headers.so LoadModule setenvif_module modules/mod_setenvif.so LoadModule version_module modules/mod_version.so LoadModule proxy_module modules/mod_proxy.so LoadModule proxy_http_module modules/mod_proxy_http.so LoadModule proxy_ajp_module modules/mod_proxy_ajp.so LoadModule ssl_module modules/mod_ssl.so LoadModule unixd_module modules/mod_unixd.so LoadModule status_module modules/mod_status.so LoadModule autoindex_module modules/mod_autoindex.so LoadModule dir_module modules/mod_dir.so LoadModule alias_module modules/mod_alias.so

User www-data Group www-data

ServerAdmin you@example.com ServerName bookstack.domain.name

AllowOverride none Require all denied

DocumentRoot "/usr/local/apache2/htdocs" <Directory "/usr/local/apache2/htdocs"> Options Indexes FollowSymLinks AllowOverride All Require all granted

DirectoryIndex index.html

<Files ".ht*"> Require all denied

ErrorLog /proc/self/fd/2 LogLevel warn

LogFormat "%h %l %u %t "%r" %>s %b "%{Referer}i" "%{User-Agent}i"" combined LogFormat "%h %l %u %t "%r" %>s %b" common

LogFormat "%h %l %u %t "%r" %>s %b "%{Referer}i" "%{User-Agent}i" %I %O" combinedio

CustomLog /proc/self/fd/1 common

RequestHeader unset Proxy early

Include conf/extra/proxy-html.conf

Include conf/extra/httpd-ssl.conf

SSLRandomSeed startup builtin SSLRandomSeed connect builtin

LDAPTrustedMode SSL LDAPVerifyServerCert Off <VirtualHost *:443> ServerName bookstack.domain.name SSLProxyEngine On ProxyPass / http://127.0.0.1:8080/ ProxyPassReverse / http://127.0.0.1:8080/ ProxyRequests Off SSLEngine On SSLCertificateFile /usr/local/apache2/conf/server.crt SSLCertificateKeyFile /usr/local/apache2/conf/server.key

base.blade.php

This was added to the yeild section at the bottom of this file to allow the drawio instance to open (based off a resolved issue, this + extra lines in the env file solved my issue)

docker-compose.yml version: '2' services: mysql: image: mysql:8.0 container_name: bookstack_db networks: default: ipv4_address: x.x.x.x environment:

sslproxy: image: httpd:2.4-alpine network_mode: "service:bookstack" volumes:

bookstack: image: solidnerd/bookstack:23.5.1 container_name: bookstack depends_on:

volumes: mysql-data: uploads: storage-uploads:

networks: OMMITTED

Exact BookStack Version

23.5.1

Log Content

docker logs --details bookstack output per attempt to select the edit image button:

bookstack.domain:80 127.0.0.1 - - [06/Jun/2023:17:00:47 +0000] "GET /books/page/test-image-edit-via-local-drawio/edit HTTP/1.1" 200 14924 "https://bookstack.domain/books/page/test-image-edit-via-local-drawio" "Mozilla/5.0 (X11; Linux x86_64; rv:109.0) Gecko/20100101 Firefox/113.0" bookstack.domain:80 127.0.0.1 - - [06/Jun/2023:17:00:47 +0000] "GET /search/entity-selector?types=book%2Cchapter%2Cpage&permission=view HTTP/1.1" 200 2743 "https://bookstack.domain/books/page/test-image-edit-via-local-drawio/edit" "Mozilla/5.0 (X11; Linux x86_64; rv:109.0) Gecko/20100101 Firefox/113.0" bookstack.domain:80 127.0.0.1 - - [06/Jun/2023:17:00:47 +0000] "GET /uploads/images/drawio/2023-06/drawing-1-1686065819.png HTTP/1.1" 304 182 "https://bookstack.domain/books/page/test-image-edit-via-local-drawio/edit" "Mozilla/5.0 (X11; Linux x86_64; rv:109.0) Gecko/20100101 Firefox/113.0" bookstack.domain:80 127.0.0.1 - - [06/Jun/2023:17:00:47 +0000] "GET /uploads/images/drawio/2023-06/drawing-1-1686069986.png HTTP/1.1" 304 182 "https://bookstack.domain/books/page/test-image-edit-via-local-drawio/edit" "Mozilla/5.0 (X11; Linux x86_64; rv:109.0) Gecko/20100101 Firefox/113.0" bookstack.domain:80 127.0.0.1 - - [06/Jun/2023:17:00:47 +0000] "GET /uploads/images/gallery/2023-06/scaled-1680-/screenshot-from-2023-04-06-10-50-30.png HTTP/1.1" 304 183 "https://bookstack.domain/books/page/test-image-edit-via-local-drawio/edit" "Mozilla/5.0 (X11; Linux x86_64; rv:109.0) Gecko/20100101 Firefox/113.0"

PHP Version

No response

Hosting Environment

Drawio and Bookstack are created using docker-compose Mysql and sslproxy are both shown in the same compose file as Bookstack

Please let me know if there is any other information I could provide!

ssddanbrown commented 1 year ago

So, just to confirm, this is only when editing an existing drawing? And fresh drawings work fine?

Are you familiar with the browser developer tools? It would be ideal if you could go through the failing edit process, while having the "Console" tab of the browser dev tools open, and report back any red errors that appear during the process.

bradyon2 commented 1 year ago

So, just to confirm, this is only when editing an existing drawing? And fresh drawings work fine?

This is when using the 'Insert Image' button and then uploading the image via Bookstack's upload option. If the image is imported in the blank instance of Drawio then saved, it works fine. So it forces having to import the image once in Bookstack, then again in Drawio, and that leaves the 'Image Selection' area to retain only the unedited image.

Are you familiar with the browser developer tools? It would be ideal if you could go through the failing edit process, while having the "Console" tab of the browser dev tools open, and report back any red errors that appear during the process.

I took some screenshots of the difference using two different images and their dev tools console tab output. Hopefully the images can clarify the issue I'm having better than my text description as well.

Screenshot from 2023-06-07 09-38-31 Here is a photo added using "Upload Image", when selecting to edit the image, it will open my self hosted Drawio instance and no image appears.

Here is the console tab output. The 404 error is persistent throughout every page of Bookstack, not only when editing images. Screenshot from 2023-06-07 09-41-06 The fox photo is then added using Drawio's 'Import' option When I save this image it overwrites the bird photo. The fox is then saved correctly on the page, but in the 'Image Selection' window, only the bird image is shown. The console tab only shows the same 404 .. css.map error.

The fox image can then be opened in Drawio via the 'Edit Image' button or double-clicking the image and it works as expected, opening in Drawio.

ssddanbrown commented 1 year ago

@bradyon2 Thanks for the extra info.

So it forces having to import the image once in Bookstack, then again in Drawio, and that leaves the 'Image Selection' area to retain only the unedited image. Here is a photo added using "Upload Image", when selecting to edit the image, it will open my self hosted Drawio instance and no image appears. The fox is then saved correctly on the page, but in the 'Image Selection' window, only the bird image is shown.

This has me quite confused now to be honest. I'm not sure of the exact flow and the expectations within.

The image manager instance shown in your screenshot is for uploaded (non-drawing) images only. So that bird image is an uploaded image, and I would not expect that to be loadable via diagrams.net/draw.io at all. I'm not sure how it would be accessible via that flow unless manual HTML altering has been performed.

Drawings have their own "Image Select" window, via the little dropdown menu next to the drawing icon in the editor toolbar:

image

Are you expecting to open the parrot in draw.io? If so, how are you selecting to edit that image, in a way that causes the draw.io integration to load?

bradyon2 commented 1 year ago

The image manager instance shown in your screenshot is for uploaded (non-drawing) images only. So that bird image is an uploaded image, and I would not expect that to be loadable via diagrams.net/draw.io at all.

Thank you for your help @ssddanbrown, this was a misunderstanding on my end. I was under the impression that the uploaded photos were supposed to be loadable via drawio as well.