NC19: Layout broken

The website layout of my NC instance is broken and looks like this:


Haven’t changed or updated something lately. Also I’m not using custom theme or CSS.
However, all functions appear to be still working (like webdav etc.)

The devtools of the browser put a lot of warnings al regarding some depreciated function of Jquery, don’t think this has something to do with this:

No relevant errors in apache, php mysql nor nextcloud to report.

My installation:

  • Debian 10 buster
  • PHP 7.3
  • Apache 2.4
  • MariaDB 10.3.22
  • Nextcloud 19.0

My config.php

{
“system”: {
“instanceid”: “REMOVED SENSITIVE VALUE”,
“passwordsalt”: “REMOVED SENSITIVE VALUE”,
“secret”: “REMOVED SENSITIVE VALUE”,
“trusted_domains”: [
mycloud.company.com
],
“datadirectory”: “REMOVED SENSITIVE VALUE”,
“overwrite.cli.url”: “https://mycloud.company.com”,
“htaccess.RewriteBase”: “/”,
“dbtype”: “mysql”,
“version”: “19.0.0.12”,
“dbname”: “REMOVED SENSITIVE VALUE”,
“dbhost”: “REMOVED SENSITIVE VALUE”,
“dbport”: “”,
“dbtableprefix”: “oc_”,
“dbuser”: “REMOVED SENSITIVE VALUE”,
“dbpassword”: “REMOVED SENSITIVE VALUE”,
“installed”: true,
“mail_from_address”: “REMOVED SENSITIVE VALUE”,
“mail_smtpmode”: “smtp”,
“mail_smtpauthtype”: “LOGIN”,
“mail_domain”: “REMOVED SENSITIVE VALUE”,
“mail_smtpauth”: 1,
“mail_smtphost”: “REMOVED SENSITIVE VALUE”,
“updater.release.channel”: “stable”,
“maintenance”: false,
“theme”: “”,
“filelocking.enabled”: true,
“loglevel”: 2,
“mail_smtpsecure”: “ssl”,
“mail_smtpname”: “REMOVED SENSITIVE VALUE”,
“mail_smtppassword”: “REMOVED SENSITIVE VALUE”,
“mail_smtpport”: “465”,
“data-fingerprint”: “474464e13b9101e01b419b3fd16403d2”,
“enable_previews”: true,
“filesystem_check_changes”: 1,
“has_rebuilt_cache”: true,
“mysql.utf8mb4”: true,
“memcache.local”: “\OC\Memcache\APCu”,
“app_install_overwrite”: [
“files_ebookreader”,
“radio”,
“drawio”,
“passman”
],
“onlyoffice”: {
“jwt_header”: “REMOVED SENSITIVE VALUE
}
},

What could be the cause of this problem?

kr
Wouter

Please change in second screenshot to “network” and look if there are http-requests with not-200 e.g. 404 - file not found. I think the js-errors are normal. I also get errors with jQuery.


Hello,
please find updated screenshot with the network traffice. To 4xx errors like missing css or alike.
thx

I think there is no 404. But there are cached objects.
Can you test another browser? Can you delete the cache? Can you use inkognito modus?
Same error in all environments?

You’re right - I’ve deleted the cache and now I’m getting lot of CSP errors:

Here you have the relevant http headers:
(I’ve left the recommended defaults untouched)

  • .htaccess
# Add security and privacy related headers
# Avoid doubled headers by unsetting headers in "onsuccess" table,
# then add headers to "always" table: https://github.com/nextcloud/server/pull/19002
Header onsuccess unset Referrer-Policy
Header always set Referrer-Policy "no-referrer"

Header onsuccess unset X-Content-Type-Options
Header always set X-Content-Type-Options "nosniff"

Header onsuccess unset X-Download-Options
Header always set X-Download-Options "noopen"

Header onsuccess unset X-Frame-Options
Header always set X-Frame-Options "SAMEORIGIN"

Header onsuccess unset X-Permitted-Cross-Domain-Policies
Header always set X-Permitted-Cross-Domain-Policies "none"

Header onsuccess unset X-Robots-Tag
Header always set X-Robots-Tag "none"

Header onsuccess unset X-XSS-Protection
Header always set X-XSS-Protection "1; mode=block"
SetEnv modHeadersAvailable true
  • Apache Vhost

      <IfModule mod_ssl.c>
              <VirtualHost *:443>
        servername mycloud.company.com
      <IfModule mod_headers.c>
            Header always set Strict-Transport-Security "max-age=15552000; includeSubDomains"
          </IfModule>
    
                      SSLEngine on
                      SSLCertificateFile      /etc/letsencrypt/live/mycloud.company.com/fullchain.pem
                      SSLCertificateKeyFile /etc/letsencrypt/live/mycloud.company.com/privkey.pem
    
          #MOZILLA SSL SECURITY https://ssl-config.mozilla.org
              # enable HTTP/2, if available
              Protocols h2 http/1.1
    
      # intermediate configuration, tweak to your needs
      SSLProtocol             all -SSLv2 -SSLv3 -TLSv1 -TLSv1.1
      SSLCipherSuite          ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-S$
      SSLHonorCipherOrder     on
      SSLSessionTickets       off
    
                      <FilesMatch "\.(cgi|shtml|phtml|php)$">
                                      SSLOptions +StdEnvVars
                      </FilesMatch>
                      <Directory /usr/lib/cgi-bin>
                                      SSLOptions +StdEnvVars
                      </Directory>
    
    
      <Directory "/var/www/html/">
        Require all granted
        AllowOverride All
        Options FollowSymLinks MultiViews
      </Directory>
              </VirtualHost>
    
      SSLUseStapling On
      SSLStaplingCache "shmcb:logs/ssl_stapling(32768)"
      </IfModule>
    

[EDIT]
These CSP errors only appear when using Firefox. Could be a bug related to this browser as this github issue states.
I’ve used a chromium (after wiping cache etc.) and got the same network trafic as in the first screenshot.

Perhaps you can search the help forum of nextcloud and find something about CSP errors.

An example:

Surely a basic setting for any experienced Nextcloud / php dev.
I have setted the “overwriteprotocol” system param to “https” by running the following docker command : docker exec --user www-data 3ded238a522a /var/www/html/occ config:system:set “overwriteprotocol” --value “https” .

CSP error during login from NextCloud Windows

Looks like the scss was not compiled correctly. Try a occ maintenance:repair to clear the caches. This helps sometimes.

I’ve executed the occ maintenance:repair command and now the layout is fine again! I did have to clear the cache from the browser before it was working.

Thanks for your help!

1 Like