[Enhancement] Support landing page image in security headers

[Claude-Alexandre]

Detailed description of the problem [REQUIRED]

I try to change the landing_background value with external URL in the advanced settings but the image is not loading.

Steps to reproduce the issue

Steps to reproduce the behavior:

1. Go to settings => more => landing_background => add value https://static.mydomain.ch/lychee/background.jpg => Save
2. Go to root url
3. View the background not loading
4. See error in Developper tools
   Refused to load the image 'https://static.mydomain.ch/lychee/background.jpg' because it violates the following Content Security Policy directive: "img-src 'self' https://maps.wikimedia.org/osm-intl/ https://a.tile.osm.org/ https://b.tile.osm.org/ https://c.tile.osm.org/ https://a.tile.openstreetmap.de/ https://b.tile.openstreetmap.de/ https://c.tile.openstreetmap.de/ https://a.tile.openstreetmap.fr/osmfr/ https://b.tile.openstreetmap.fr/osmfr/ https://c.tile.openstreetmap.fr/osmfr/ https://a.osm.rrze.fau.de/osmhd/ https://b.osm.rrze.fau.de/osmhd/ https://c.osm.rrze.fau.de/osmhd/ data:".

Screenshots
If applicable, add screenshots to help explain your problem.

Output of the diagnostics [REQUIRED]

(Settings => Diagnostics or https://example.com/Diagnostics or php artisan lychee:diagnostics)

`Diagnostics
-------
Warning: Dropbox import not working. dropbox_key is empty.
Warning: Default timezone not properly set; you might experience strange results when importing photos without explicit EXIF timezone

System Information
--------------
Lychee Version (git):            No git data found.
DB Version:                      4.6.1

composer install:                --no-dev
APP_ENV:                         production
APP_DEBUG:                       false

System:                          Linux
PHP Version:                     8.1.7
PHP User agent:                  Lychee/4 (https://lycheeorg.github.io/)
Timezone:                        UTC
Max uploaded file size:          100M
Max post size:                   100M
Max execution time:              3600
MySQL Version:                   10.9.3-MariaDB-1:10.9.3+maria~ubu2204

exec() Available:                yes
Imagick Available:               1
Imagick Enabled:                 1
Imagick Version:                 1691
GD Version:                      2.3.3



Config Information
--------------
version:                         040601
check_for_updates:               0
sorting_photos_col:              taken_at
sorting_photos_order:            ASC
sorting_albums_col:              max_taken_at
sorting_albums_order:            ASC
imagick:                         1
skip_duplicates:                 0
small_max_width:                 0
small_max_height:                360
medium_max_width:                1920
medium_max_height:               1080
lang:                            en
layout:                          2
image_overlay_type:              none
default_license:                 none
compression_quality:             90
full_photo:                      1
delete_imported:                 0
Mod_Frame:                       1
Mod_Frame_refresh:               30
thumb_2x:                        1
small_2x:                        1
medium_2x:                       1
landing_page_enable:             1
landing_owner:                   Name
landing_title:                   Gallery
landing_subtitle:                by infinity pixel
landing_facebook:                
landing_flickr:                  https://mydomain.ch
landing_twitter:                 
landing_instagram:               https://instagram.com/myinsta
landing_youtube:                 
landing_background:              https://static.mydomain.ch/lychee/background.jpg
site_title:                      Gallery
site_copyright_enable:           0
site_copyright_begin:            2019
site_copyright_end:              2019
additional_footer_text:          
display_social_in_gallery:       0
public_search:                   0
SL_enable:                       0
SL_for_admin:                    0
public_recent:                   0
recent_age:                      1
public_starred:                  0
downloadable:                    0
photos_wraparound:               1
map_display:                     0
zip64:                           1
map_display_public:              0
map_provider:                    Wikimedia
force_32bit_ids:                 0
map_include_subalbums:           0
update_check_every_days:         3
has_exiftool:                    1
share_button_visible:            0
import_via_symlink:              0
has_ffmpeg:                      1
location_decoding:               0
location_decoding_timeout:       30
location_show:                   0
location_show_public:            0
rss_enable:                      0
rss_recent_days:                 7
rss_max_items:                   100
prefer_available_xmp_metadata:   0
editor_enabled:                  1
lossless_optimization:           0
swipe_tolerance_x:               150
swipe_tolerance_y:               250
local_takestamp_video_formats:   .avi|.mov
log_max_num_line:                1000
unlock_password_photos_with_url_param: 0
nsfw_visible:                    0
nsfw_blur:                       0
nsfw_warning:                    0
nsfw_warning_admin:              0
map_display_direction:           1
album_subtitle_type:             oldstyle
upload_processing_limit:         4
public_photos_hidden:            0
new_photos_notification:         0
legacy_id_redirection:           1
zip_deflate_level:               6`

Browser and system

• MacOS
• Chrome
• Run with docker official image lycheeorg/lychee:v4.6.1

Comment

I try to add landing_background accessible through URL of an other sub domain in https. Chrome refuse to load the image due to an Content Security Policy directive: "img-src 'self'. I think it required to change the value img-src to load images from other domain but I'm not sure.
Documentation : https://lycheeorg.github.io/docs/settings.html#landing_background
Stackoverflow : https://stackoverflow.com/questions/40360109/content-security-policy-img-src-self-data

Important information, the app run under gallery.mydomain.ch and the background image I'm trying to load is under static.mydomain.ch.

I took the liberty to change the domain in the config below.

I hope it's a real issue and it can help to improve the app how is great by the way.

Best regards

Claude

[kamil4]

For security reasons, Lychee now has a fairly restrictive Content Security Policy. You can add an exception for your image by editing the following file:

Lychee/config/secure-headers.php

Lines 374 to 395 in 0fc21a4

	// https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/img-src
	'img-src' => [
	'self' => true,
	// Allow OpenStreetMap tile images to be fetched from the different provides
	// Allow image to be directly encoded at the img source parameter
	'allow' => [
	'https://maps.wikimedia.org/osm-intl/',
	'https://a.tile.osm.org/',
	'https://b.tile.osm.org/',
	'https://c.tile.osm.org/',
	'https://a.tile.openstreetmap.de/',
	'https://b.tile.openstreetmap.de/',
	'https://c.tile.openstreetmap.de/',
	'https://a.tile.openstreetmap.fr/osmfr/',
	'https://b.tile.openstreetmap.fr/osmfr/',
	'https://c.tile.openstreetmap.fr/osmfr/',
	'https://a.osm.rrze.fau.de/osmhd/',
	'https://b.osm.rrze.fau.de/osmhd/',
	'https://c.osm.rrze.fau.de/osmhd/',
	'data:', // required by openstreetmap
	],
	],

I hope this helps!

[Claude-Alexandre]

Hello, thank you for your feedback. It's a way to do it I'm sure but for me using docker I'm not sure it's very practical. If mount a file to overwrite this one and the file change in the futur I will have trouble. Is it not possible to allow automatically the domain used in the field landing_background or having an other field of allowed sources ?
I don't want to be annoying if it's not possible it's not.

[ildyria]

This probably will require the use of .env to extend the support of external addresses inside the security headers.

[rfilmyer]

This would be good as well for things like tracking scripts (eg Google Analytics), which right now are non-trivial to do in docker.