mirror of
https://github.com/BookStackApp/BookStack.git
synced 2026-02-19 03:09:39 +03:00
Images do not load in self hosted drawio instance #3839
Reference in New Issue
Block a user
Delete Branch "%!s()"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
Originally created by @bradyon2 on GitHub (Jun 6, 2023).
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
<script src="https://drawio.domain.name:8443" nonce="{{ $cspNonce }}"></script>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:
volumes:
sslproxy:
image: httpd:2.4-alpine
network_mode: "service:bookstack"
volumes:
bookstack:
image: solidnerd/bookstack:23.5.1
container_name: bookstack
depends_on:
networks:
default:
ipv4_address: x.x.x.x
environment:
volumes:
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 on GitHub (Jun 6, 2023):
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 on GitHub (Jun 7, 2023):
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.
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.
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.
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 on GitHub (Jun 8, 2023):
@bradyon2 Thanks for the extra info.
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:
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 on GitHub (Jun 8, 2023):
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.