Unable to load image
animalillo opened this issue · 13 comments
The page stays on an infinite loading spinner. No related NC logs could be found.
This is what i found on the browser:
Browser console output
jQuery is deprecated: The global jQuery is deprecated. It will be removed in a later versions without another warning. Please ship your own. 4 [globals.js:59:15](webpack:///nextcloud/core/src/globals.js)
$ is deprecated: The global jQuery is deprecated. It will be removed in a later versions without another warning. Please ship your own. 12 [globals.js:59:15](webpack:///nextcloud/core/src/globals.js)
jQuery is deprecated: The global jQuery is deprecated. It will be removed in a later versions without another warning. Please ship your own. 16 [globals.js:59:15](webpack:///nextcloud/core/src/globals.js)
Content Security Policy: Las opciones para esta página han bloqueado la carga de un recurso en http://myhost/apps/files_photospheres/ (frame-src). [files](https://myhost/apps/files/files?dir=/ESFERICAS/somplace)
Error en el mapeo fuente: Error: request failed with status 404
URL del recurso: https://myhost/apps/bookmarks/js/bookmarks-collections.js?v=42554de6-10
URL del mapa fuente: bookmarks-collections.js.map?v=62018be65a25083e52df
Error en el mapeo fuente: Error: request failed with status 404
URL del recurso: https://myhost/apps/bookmarks/js/bookmarks-references.js?v=42554de6-10
URL del mapa fuente: bookmarks-references.js.map?v=2a6318d18357e7efed7a
$ is deprecated: The global jQuery is deprecated. It will be removed in a later versions without another warning. Please ship your own. 2 [globals.js:59:15](webpack:///nextcloud/core/src/globals.js)
$ is deprecated: The global jQuery is deprecated. It will be removed in a later versions without another warning. Please ship your own. 15 [globals.js:59:15](webpack:///nextcloud/core/src/globals.js)
$ is deprecated: The global jQuery is deprecated. It will be removed in a later versions without another warning. Please ship your own. 5 [globals.js:59:15](webpack:///nextcloud/core/src/globals.js)
No new notification data received [NotificationsApp.vue:381](webpack:///notifications/src/NotificationsApp.vue)
Polling interval updated to 30000 [NotificationsApp.vue:413](webpack:///notifications/src/NotificationsApp.vue)
jQuery is deprecated: The global jQuery is deprecated. It will be removed in a later versions without another warning. Please ship your own. 4 [globals.js:59:15](webpack:///nextcloud/core/src/globals.js)
$ is deprecated: The global jQuery is deprecated. It will be removed in a later versions without another warning. Please ship your own. 18 [globals.js:59:15](webpack:///nextcloud/core/src/globals.js)
No new notification data received [NotificationsApp.vue:381](webpack:///notifications/src/NotificationsApp.vue)
Polling interval updated to 30000 [NotificationsApp.vue:413](webpack:///notifications/src/NotificationsApp.vue)
$ is deprecated: The global jQuery is deprecated. It will be removed in a later versions without another warning. Please ship your own. 2 [globals.js:59:15](webpack:///nextcloud/core/src/globals.js)
$ is deprecated: The global jQuery is deprecated. It will be removed in a later versions without another warning. Please ship your own. 20 [globals.js:59:15](webpack:///nextcloud/core/src/globals.js)
No new notification data received [NotificationsApp.vue:381](webpack:///notifications/src/NotificationsApp.vue)
Polling interval updated to 30000 [NotificationsApp.vue:413](webpack:///notifications/src/NotificationsApp.vue)
$ is deprecated: The global jQuery is deprecated. It will be removed in a later versions without another warning. Please ship your own. 32 [globals.js:59:15](webpack:///nextcloud/core/src/globals.js)
No new notification data received [NotificationsApp.vue:381](webpack:///notifications/src/NotificationsApp.vue)
Polling interval updated to 30000 [NotificationsApp.vue:413](webpack:///notifications/src/NotificationsApp.vue)
$ is deprecated: The global jQuery is deprecated. It will be removed in a later versions without another warning. Please ship your own. 2 [globals.js:59:15](webpack:///nextcloud/core/src/globals.js)
$ is deprecated: The global jQuery is deprecated. It will be removed in a later versions without another warning. Please ship your own. 20 [globals.js:59:15](webpack:///nextcloud/core/src/globals.js)
No new notification data received [NotificationsApp.vue:381](webpack:///notifications/src/NotificationsApp.vue)
Polling interval updated to 30000 [NotificationsApp.vue:413](webpack:///notifications/src/NotificationsApp.vue)
$ is deprecated: The global jQuery is deprecated. It will be removed in a later versions without another warning. Please ship your own. 18 [globals.js:59:15](webpack:///nextcloud/core/src/globals.js)
No new notification data received [NotificationsApp.vue:381](webpack:///notifications/src/NotificationsApp.vue)
Polling interval updated to 30000 [NotificationsApp.vue:413](webpack:///notifications/src/NotificationsApp.vue)
$ is deprecated: The global jQuery is deprecated. It will be removed in a later versions without another warning. Please ship your own. 2 [globals.js:59:15](webpack:///nextcloud/core/src/globals.js)
$ is deprecated: The global jQuery is deprecated. It will be removed in a later versions without another warning. Please ship your own. 20 [globals.js:59:15](webpack:///nextcloud/core/src/globals.js)
No new notification data received [NotificationsApp.vue:381](webpack:///notifications/src/NotificationsApp.vue)
Polling interval updated to 30000 [NotificationsApp.vue:413](webpack:///notifications/src/NotificationsApp.vue)
$ is deprecated: The global jQuery is deprecated. It will be removed in a later versions without another warning. Please ship your own. 18 [globals.js:59:15](webpack:///nextcloud/core/src/globals.js)
No new notification data received [NotificationsApp.vue:381](webpack:///notifications/src/NotificationsApp.vue)
Polling interval updated to 30000 [NotificationsApp.vue:413](webpack:///notifications/src/NotificationsApp.vue)
$ is deprecated: The global jQuery is deprecated. It will be removed in a later versions without another warning. Please ship your own. 2 [globals.js:59:15](webpack:///nextcloud/core/src/globals.js)
$ is deprecated: The global jQuery is deprecated. It will be removed in a later versions without another warning. Please ship your own. 20 [globals.js:59:15](webpack:///nextcloud/core/src/globals.js)
No new notification data received [NotificationsApp.vue:381](webpack:///notifications/src/NotificationsApp.vue)
Polling interval updated to 30000 [NotificationsApp.vue:413](webpack:///notifications/src/NotificationsApp.vue)
$ is deprecated: The global jQuery is deprecated. It will be removed in a later versions without another warning. Please ship your own. 18 [globals.js:59:15](webpack:///nextcloud/core/src/globals.js)
No new notification data received [NotificationsApp.vue:381](webpack:///notifications/src/NotificationsApp.vue)
Polling interval updated to 30000 [NotificationsApp.vue:413](webpack:///notifications/src/NotificationsApp.vue)
$ is deprecated: The global jQuery is deprecated. It will be removed in a later versions without another warning. Please ship your own. 2 [globals.js:59:15](webpack:///nextcloud/core/src/globals.js)
$ is deprecated: The global jQuery is deprecated. It will be removed in a later versions without another warning. Please ship your own. 2 [globals.js:59:15](webpack:///nextcloud/core/src/globals.js)
$ is deprecated: The global jQuery is deprecated. It will be removed in a later versions without another warning. Please ship your own. 18 [globals.js:59:15](webpack:///nextcloud/core/src/globals.js)
No new notification data received [NotificationsApp.vue:381](webpack:///notifications/src/NotificationsApp.vue)
Polling interval updated to 30000 [NotificationsApp.vue:413](webpack:///notifications/src/NotificationsApp.vue)Network log
It may be related with CSP headers for what i see on the browser logs.
If i can give you any further details or try something out, would be great, I've recently got a bunch of spherical images and would be wonderful to view them from Nextcloud! :D
HI @animalillo, my Spanish skills are a little bit rusty but I think you're right, the line
Content Security Policy: Las opciones para esta página han bloqueado la carga de un recurso en http://myhost/apps/files_photospheres/ (frame-src). [files](https://myhost/apps/files/files?dir=/ESFERICAS/somplace)
seems to be the culprit, telling us, that the iframe where the photosphere should be displayed was blocked due to CSP rules.
If I open a PhotoSphere image, the response headers look like this:
Could you compare or post the CSP part of your response from /apps/files_photospheres, please?
Those are the headers from the response:
HTTP/1.1 301 Moved Permanently
Date: Sun, 04 Jun 2023 22:19:46 GMT
Server: nginx/1.18.0 (Ubuntu)
Content-Type: text/html
Content-Length: 178
Location: http://myhost/apps/files_photospheres/
Strict-Transport-Security: max-age=15768000; includeSubDomains;
Referrer-Policy: no-referrer
X-Content-Type-Options: nosniff
X-Download-Options: noopen
X-Frame-Options: SAMEORIGIN
X-Permitted-Cross-Domain-Policies: none
X-XSS-Protection: 1; mode=block
X-Robots-Tag: noindex, nofollow
Via: 1.1 myhost
Keep-Alive: timeout=5, max=99
Connection: Keep-AliveEdit: I have just noticed... for some reason is redirected to HTTP? the site is HTTPS only on my setup
Yes, seems like there's some issues with your nginx server setup. Would you like to post your config here, too?
Sure! here's the config from the server, altought it's behind a reverse proxy, but the main configuration goes here.
Nginx config
upstream php-handler {
#server 127.0.0.1:9000;
server unix:/var/run/php/php8.1-fpm.sock;
}
# Set the `immutable` cache control options only for assets with a cache busting `v` argument
map $arg_v $asset_immutable {
"" "";
default "immutable";
}
server {
listen 80;
server_name myhost;
# Enable gzip but do not remove ETag headers
gzip on;
gzip_vary on;
gzip_comp_level 4;
gzip_min_length 256;
gzip_proxied expired no-cache no-store private no_last_modified no_etag auth;
gzip_types application/atom+xml application/javascript application/json application/ld+json application/manifest+json application/rss+xml application/vnd.geo+json application/vnd.ms-fontobject application/wasm application/x-font-ttf application/x-web-app-manifest+json application/xhtml+xml application/xml font/opentype image/bmp image/svg+xml image/x-icon text/cache-manifest text/css text/plain text/vcard text/vnd.rim.location.xloc text/vtt text/x-component text/x-cross-domain-policy;
# Add headers to serve security related headers
# Before enabling Strict-Transport-Security headers please read into this
# topic first.
# add_header Strict-Transport-Security "max-age=15768000;
# includeSubDomains; preload;";
add_header Strict-Transport-Security "max-age=15768000; includeSubDomains;";
#
# WARNING: Only add the preload option once you read about
# the consequences in https://hstspreload.org/. This option
# will add the domain to a hardcoded list that is shipped
# in all major browsers and getting removed from this list
# could take several months.
add_header Referrer-Policy "no-referrer" always;
add_header X-Content-Type-Options "nosniff" always;
add_header X-Download-Options "noopen" always;
add_header X-Frame-Options "SAMEORIGIN" always;
add_header X-Permitted-Cross-Domain-Policies "none" always;
# add_header X-Robots-Tag "none" always;
add_header X-XSS-Protection "1; mode=block" always;
add_header X-Robots-Tag "noindex, nofollow";
# add_header 'Referrer-Policy' 'same-origin';
# Remove X-Powered-By, which is an information leak
fastcgi_hide_header X-Powered-By;
# Path to the root of your installation
root /var/www/nextcloud/;
location = /robots.txt {
allow all;
log_not_found off;
access_log off;
}
location ^~ /.well-known {
allow all;
location = /.well-known/carddav { return 301 /remote.php/dav/; }
location = /.well-known/caldav { return 301 /remote.php/dav/; }
location /.well-known/acme-challenge { try_files $uri $uri/ =404; }
location /.well-known/pki-validation { try_files $uri $uri/ =404; }
# Let Nextcloud's API for `/.well-known` URIs handle all other
# requests by passing them to the front-end controller.
return 301 /index.php$request_uri;
}
# set max upload size
client_max_body_size 512M;
fastcgi_buffers 64 4K;
location ~ ^/(?:build|tests|config|lib|3rdparty|templates|data)(?:$|/) { return 404; }
location ~ ^/(?:\.|autotest|occ|issue|indie|db_|console) { return 404; }
location ~ \.php(?:$|/) {
rewrite ^/(?!index|remote|public|cron|core\/ajax\/update|status|ocs\/v[12]|updater\/.+|oc[ms]-provider\/.+|.+\/richdocumentscode\/proxy) /index.php$request_uri;
fastcgi_split_path_info ^(.+\.php)(/.*)$;
set $path_info $fastcgi_path_info;
try_files $fastcgi_script_name =404;
include fastcgi_params;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
fastcgi_param PATH_INFO $fastcgi_path_info;
fastcgi_param HTTPS on;
#Avoid sending the security headers twice
fastcgi_param modHeadersAvailable true;
fastcgi_param front_controller_active true;
fastcgi_pass php-handler;
fastcgi_intercept_errors on;
fastcgi_request_buffering off;
fastcgi_max_temp_file_size 0;
}
index index.php index.html /index.php$request_uri;
location ~ \.(?:css|js|svg|gif|png|jpg|ico|wasm|tflite|map)$ {
try_files $uri /index.php$request_uri;
add_header Cache-Control "public, max-age=15778463, $asset_immutable";
access_log off; # Optional: Don't log access to assets
location ~ \.wasm$ {
default_type application/wasm;
}
}
location ~ \.woff2?$ {
try_files $uri /index.php$request_uri;
expires 7d; # Cache-Control policy borrowed from `.htaccess`
access_log off; # Optional: Don't log access to assets
}
# Rule borrowed from `.htaccess`
location /remote {
return 301 /remote.php$request_uri;
}
location / {
if ( $http_user_agent ~ ^DavClnt ) {
return 302 /remote.php/webdav/$is_args$args;
}
try_files $uri $uri/ /index.php$request_uri;
}
}I can't see any suspicious 301 redirects here. So maybe your reverse proxy is sending out the 301, no clue. But I'm quite convinced that if you fix that issue, the viewer will be shown correctly.
I'd recommend you do some research where the redirect originates from and try to fix that. It has to be some kind of server configuration issue here.
I will check the proxy when i have a bit of time, but the proxy has the simplest configuration ever, i don't think that's doing any https to http redirection, on any case the other way around, from http to https. Will let you know later on.
I have checked and i see no reason for the redirect on my configurations, neither on the proxy not on the nginx
Well just guessing but maybe there's something wrong in your NC config? Would you mind posting it here, too after removing all the sensitive information?
Sure, this is my nextcloud configuration file:
<?php
$CONFIG = array (
'instanceid' => '',
'passwordsalt' => '',
'secret' => '',
'trusted_proxies' =>
array (
0 => '1intip',
),
'trusted_domains' =>
array (
0 => 'myhost',
),
'datadirectory' => '/var/www/data',
'overwrite.cli.url' => '',
'dbtype' => 'pgsql',
'version' => '26.0.2.1',
'dbname' => 'nextcloud',
'dbhost' => '',
'dbport' => '',
'dbtableprefix' => 'oc_',
'dbuser' => '',
'dbpassword' => '',
'installed' => true,
'memcache.local' => '\\OC\\Memcache\\APCu',
'memcache.distributed' => '\\OC\\Memcache\\Memcached',
'enable_previews' => true,
'enabledPreviewProviders' =>
array (
0 => 'OC\\Preview\\TXT',
1 => 'OC\\Preview\\MarkDown',
2 => 'OC\\Preview\\PDF',
3 => 'OC\\Preview\\Image',
4 => 'OC\\Preview\\Photoshop',
5 => 'OC\\Preview\\TIFF',
6 => 'OC\\Preview\\SVG',
7 => 'OC\\Preview\\Font',
8 => 'OC\\Preview\\MP3',
9 => 'OC\\Preview\\Movie',
10 => 'OC\\Preview\\MKV',
11 => 'OC\\Preview\\MP4',
12 => 'OC\\Preview\\AVI',
),
'memcached_servers' =>
array (
0 =>
array (
0 => 'localhost',
1 => 11211,
),
),
'loglevel' => 2,
'maintenance' => false,
'theme' => '',
'app_install_overwrite' =>
array (
0 => 'calendar',
1 => 'files_reader',
2 => 'files_ebookreader',
3 => 'passman',
4 => 'social',
5 => 'impersonate',
),
'default_phone_region' => 'ES',
);Unfortunately I cannot see anything suspicious. Will close this issue here since your problem seems to be related to your server setup. Please send me a PM if you want to stay in touch.
ok, i think i found out what's causing it, it's not my server...
I don't know what's wrong with the response getting set to http, that's plain odd and can't see any reason for that.
But the problem seems to be related with the way the iframe is set.
The brwoser URL at a file that will open the app is this: https://mysite/apps/files/?dir=/PANO/something&fileid=123456#photo-sphere-viewer-frame
That url triggers the app to load an iframe, the iframe loosk like this:
<iframe id="photo-sphere-viewer-frame" src="/apps/files_photospheres" allowfullscreen="true"></iframe>This will attempt to load https://mysite/apps/files/apps/files_photospheres if i'm not wrong. The rediraction just confused our target.
If i manually edit the HTML on the browser from src="/apps/files_photospheres"' to src="https://mysite/apps/files_photospheres" it loads correctly and works as expected.
Would it be possible to change that?
That all sound weird to me to be honest. The line which generates the frame url hasn't been touched for quite a while now and no one else has the problem you're reporting (including me 😄 ). So the src for the iframe is generated via
files_photospheres/js/fileAction.js
Line 196 in 885c359
What I observed: if you don't have a copy paste error in your code, your URL seems to be just wrong.
In my case it's:
<iframe id="photo-sphere-viewer-frame" src="/index.php/apps/files_photospheres" allowfullscreen="true"></iframe>In your case it's
<iframe id="photo-sphere-viewer-frame" src="/apps/files_photospheres" allowfullscreen="true"></iframe>Note the missing index.php which is mandatory for NC to handle the request correctly. Could you open a browsers dev console and see what OC.generateUrl('apps/files_photospheres') gives you?
(Btw: don't be confused by the screenshot, it's my local dev setup using the sub-directory /nextcloud)
And could you also check what window?.OC?.config?.modRewriteWorking gives you, please? This variable will only be true if the NC server config value htaccess.IgnoreFrontController is set to true or if the environment variable font_controller_active is set to true. I can see the latter being set by your nginx config line:
fastcgi_param front_controller_active true;
If that's the case, the above config value will get true and the NC router component will skip the index.php part
In that case you need to make sure, your Apache rewrite (or whatever you're using) is handling the NC urls correctly for you. See here or https://help.nextcloud.com/t/apache-rewrite-to-remove-index-php/658/41?page=3 for more information.
So to summarize: this is definitely not an issue with this app but rather your NC setup. If the issue would have it's origin in this app, almost every app would be affected because everyone is using OC.generateUrl to generate their frontend urls.
Hope this helps!
Alright! there was a commented out block on my nginx file that happened to have the rewrite rule, but some how everything else was working proerply!
It's a mystery!
Anyhow, Thank you very much for your help and patience! <3