[BUG] css and images wont load in mobile

[vvirehead]

Describe the bug
Web interface doesn't load css and images on mobile.

Developer Console in Chrome returns (redacted):
Failed to find a valid digest in the 'integrity' attribute for resource 'https://PUBLIC_DOMAIN/build/app.8240996d.css' with computed SHA-256 integrity '############################################'. The resource has been blocked.

The problem doesn't occur when displaying on the desktop.
Displaying site on mobile in "Desktop site" (Chrome mobile) produces same error.

To Reproduce
Steps to reproduce the behaviour:

1. Pull this repo
2. Configure docker-compose.yml as specified below
3. Configure local.yml as specified below
4. Configure nginx as a reverse proxy
5. Run docker-compose up -d
   6.a. Load page on a mobile device on a public address
   6.b. Load page on a desktop in mobile mode (ie via developer tools in Chrome)

Desktop (please complete the following information):

• OS: Ubuntu 18.04.3
• Docker version: 19.03.5
• Docker compose version: 1.22.0
• Nginx version: nginx/1.14.0 (Ubuntu)
• CloudFlare as DNS, with proxied IP and caching

Command used to run the container
docker-compose up -d

Docker compose file (with passwords redacted)

version: '3.5'
services:

  sqldb:
    image: mysql:5.7
    environment:
      - MYSQL_DATABASE=kimai
      - MYSQL_USER=KIMAIUSER
      - MYSQL_PASSWORD=KIMAIPASSWORD
      - MYSQL_ROOT_PASSWORD=MYSQLPASSWORD
    volumes:
      - /var/lib/mysql
    command: --default-storage-engine innodb
    restart: unless-stopped
    healthcheck:
      test: mysqladmin -pMYSQLPASSWORD ping -h localhost
      interval: 20s
      start_period: 10s
      timeout: 10s
      retries: 3
    networks:
      - kimai

  nginx:
    build: compose
    ports:
      - KIMAI_PORT:80
    volumes:
      - ./nginx_site.conf:/etc/nginx/conf.d/default.conf
    restart: unless-stopped
    depends_on:
      - kimai
    volumes:
      - public:/opt/kimai/public
    healthcheck:
      test:  wget --spider http://localhost/health || exit 1 
      interval: 20s
      start_period: 10s
      timeout: 10s
      retries: 3
    networks:
      - kimai

  kimai:
    image: kimai/kimai2:fpm-alpine-1.7-prod
    environment:
      - APP_ENV=prod
      - TRUSTED_PROXIES=localhost,127.0.0.1,LAN_ADDRESS
      - TRUSTED_HOSTS=LAN_ADDRESS,localhost,PUBLIC_ADDRESS
      - ADMINMAIL=ADMIN@PUBLIC_ADDRESS
      - ADMINPASS=MYSQLPASSWORD
    volumes:
      - ./local.yaml:/opt/kimai/config/packages/local.yaml
      - public:/opt/kimai/public
      - var:/opt/kimai/var
    restart: unless-stopped
    healthcheck:
      test: wget --spider http://localhost || exit 1
      interval: 20s
      start_period: 10s
      timeout: 10s
      retries: 3
    networks:
      - kimai

  postfix:
    image: catatnight/postfix
    environment:
      maildomain: PUBLIC_ADDRESS
      smtp_user: kimai:kimai
    restart: unless-stopped
    restart: always
    networks:
      - kimai
    
networks:
  kimai:
    name: kimai
    driver: bridge
    driver_opts:
      com.docker.network.bridge.name: br-kimai
      
volumes:
  public:
  var:

Local.yaml file (with passwords redacted)

kimai:
    ldap:
        connection:
            host: ###
            username: ###
            password: ###
            accountDomainName: ###
            accountDomainNameShort: ###
            accountFilterFormat: (&(objectClass=###)(###=%s))
        user:
            baseDn: ###
            filter: (&(objectClass=###))
            usernameAttribute: ###
            attributesFilter: (&(objectClass=###))
            attributes:
                - { ldap_attr: ###, user_method: setEmail }
                - { ldap_attr: ###, user_method: setAlias }
                - { ldap_attr: ###,  user_method: setUsername }
                #- { ldap_attr: jpegphoto, user_method: setAvatar }
                - { ldap_attr: ###, user_method: setTitle }
        role:
            baseDn: ###
            filter: (&(objectClass=groupOfUniqueNames))  # additional group filter
            userDnAttribute: uniqueMember                # field to lookup the users
            nameAttribute: ###                            # group name to match
            groups:
                - { ldap_value: ###, role: ROLE_TEAMLEAD }
                - { ldap_value: ###, role: ROLE_SUPER_ADMIN }
                - { ldap_value: ###, role: ROLE_USER }

    user:
        registration: false
        password_reset: false
        
    permissions:
      roles:
          ROLE_USER: ['!password_own_profile']
          ROLE_TEAMLEAD: ['!password_own_profile']
          ROLE_ADMIN: ['!password_own_profile']
          
    timesheet:
        active_entries:
            soft_limit: 1
            hard_limit: 1

security:
    providers:
        chain_provider:
            chain:
                providers: [kimai_ldap]
    firewalls:
        secured_area:
            kimai_ldap: ~

Nginx boilerplate server file - reverse proxy (with passwords redacted)

# All of the below uri combinations

# http://PUBLIC_DOMAIN
# http://www.PUBLIC_DOMAIN
# https://www.PUBLIC_DOMAIN

# redirect to the single correct one https://PUBLIC_DOMAIN

server {
    server_name             PUBLIC_DOMAIN;
    listen                  80;
    include                 boilerplate/disable/access_logs.conf;
    return                  301 https://$host$request_uri;
}

server
{
    server_name             www.PUBLIC_DOMAIN;

    listen                  80;
    listen                  443 ssl;
    include                 boilerplate/enable/ssl.conf;
    include                 boilerplate/disable/access_logs.conf;

    if ($host ~* ^www\.(?P<used_host>.*)$) {
        return 301 https://$used_host$request_uri;
    }
}

server
{
    server_name             PUBLIC_DOMAIN;
    listen                  443 ssl http2;

    location / {
        proxy_set_header Host               $host;
        proxy_set_header X-Real_IP          $remote_addr;
        proxy_set_header X-Forwarded-For    $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto  $scheme;

        proxy_pass http://127.0.0.1:KIMAI_PORT;
        proxy_read_timeout 90;
    }

    include                 boilerplate/enable/ssl.conf;
}

Additional context

Desktop version works OK.
Installation on this machine resulted in other errors described in issue #69

Reverse proxy is configured to serve https with HSTS enabled.

EDIT:
prod.log is empty, I found that disabling Cloudflare IP proxy and clearing cache in Cloudflare, and clearing cache in browser fixes issue on everything except real chrome mobile (I cannot find cache for this specific site to clear).

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[tobybatch]

@G-mike Can you test this with the apache image? I don't think it's the kimai image but the nginx set up.

docker run -p 8001:8001 -e TRUSTED_HOSTS=MY_LOCAL_IP kimai/kimai2:apache-debian-1.7-prod

And this does load style on my Pixel 3A phone, firefox.

[kevinpapst]

Maybe Cloudflare is caching assets and changing URLs, without adjusting the integrity part in eg:

<script src="/build/runtime.664a9501.js" integrity="sha384-xNNrNinl64G3nCUrIskgSjU0mUXXCB9lj6XCSInBTwxSKXk8uTMafnLHtdWdIGtd"></script>

I recently had a user who was running a pagespeed plugin in apache, that messed exactly like that with the asset tags.

[vvirehead]

I found the problem: it's the Cloudflare's hide ip option that messes up the css

[Schrolli91]

So, problem is solved now? Can we close the issue?

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.