NC19: Layout broken

ℹ️ Support
1

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

2020-07-09_07h45_31
2020-07-09_07h45_311872×909 275 KB

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:

2020-07-09_07h47_38
2020-07-09_07h47_381920×1004 185 KB

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

2

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.

3

2020-07-09_11h08_53
2020-07-09_11h08_531629×689 68.2 KB

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

4

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?

5

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

2020-07-09_11h34_56
2020-07-09_11h34_561920×1031 187 KB

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.

6

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 - #5 by alexbal

7

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

8

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