Panel appears as blank

Bogdan_Condorachi · May 3, 2022, 8:47am

Hello, so I’m getting an ‘panel blank’ when I’m trying to access it with this error in console:

index.js:1 
        
       DOMException: Failed to execute 'pushState' on 'History': A history state object with URL 'http://hasty.ai/panel/login' cannot be created in a document with origin 'https://hasty.ai' and URL 'https://hasty.ai/panel/login'.
    at Object.onPushState (https://hasty.ai/media/panel/8b70b6d1b31f21fe005bf6002beb90f7/js/index.js:1:7778)
    at pt.setState (https://hasty.ai/media/panel/8b70b6d1b31f21fe005bf6002beb90f7/js/index.js:1:18156)
    at pt.init (https://hasty.ai/media/panel/8b70b6d1b31f21fe005bf6002beb90f7/js/index.js:1:16365)
    at a.created (https://hasty.ai/media/panel/8b70b6d1b31f21fe005bf6002beb90f7/js/index.js:1:7473)
    at Vt (https://hasty.ai/media/panel/8b70b6d1b31f21fe005bf6002beb90f7/js/vendor.js:6:11291)
    at nn (https://hasty.ai/media/panel/8b70b6d1b31f21fe005bf6002beb90f7/js/vendor.js:6:25303)
    at a.Cn._init (https://hasty.ai/media/panel/8b70b6d1b31f21fe005bf6002beb90f7/js/vendor.js:6:32894)
    at new a (https://hasty.ai/media/panel/8b70b6d1b31f21fe005bf6002beb90f7/js/vendor.js:6:30461)
    at https://hasty.ai/media/panel/8b70b6d1b31f21fe005bf6002beb90f7/js/vendor.js:6:19454
    at init (https://hasty.ai/media/panel/8b70b6d1b31f21fe005bf6002beb90f7/js/vendor.js:6:19485)
error @ index.js:1
index.js:1 
        
       Mixed Content: The page at 'https://hasty.ai/panel/login' was loaded over HTTPS, but requested an insecure resource 'http://hasty.ai/api/auth'. This request has been blocked; the content must be served over HTTPS.
request @ index.js:1
get @ index.js:1
user @ index.js:1
index.js:1 
        
       TypeError: Failed to fetch
    at Object.request (index.js:1:3022)
    at Object.get (index.js:1:3630)
    at user (index.js:1:5391)

Mentions:

I’m using a public folder structure
set url to ‘https://hasty.ai’
php 8.0 with kirby 3.6.5
kirby is installed with composer in vendor
already deleted media without any effect
user and group are www-data
permissions are 755 for folders and 644 for files

Here’s my .htaccess as well:

# Kirby .htaccess

# Core rewrite rules
<IfModule mod_rewrite.c>

    RewriteEngine on

    # Make sure to set the RewriteBase correctly if you are running
    # the site in a subfolder otherwise links or the entire site will break.
    # RewriteBase /

    # Block files and folders beginning with a dot, such as `.git`, except for
    # the `.well-known` folder, which is used for Let's Encrypt and `security.txt`.
    RewriteRule (^|/)\.(?!well-known\/) index.php [L]

    # Make site links work.
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule ^(.*) index.php [L]

</IfModule>

# Pass the Authorization header to PHP.
SetEnvIf Authorization "(.*)" HTTP_AUTHORIZATION=$1

# Allow cross-origin access to web fonts.
<IfModule mod_headers.c>
    <FilesMatch "\.(otf|woff2?)$">
        Header set Access-Control-Allow-Origin "*"
    </FilesMatch>
</IfModule>

# Compression for better web performance
<IfModule mod_deflate.c>

    # Force compression for mangled `Accept-Encoding` request headers.
    <IfModule mod_setenvif.c>
        <IfModule mod_headers.c>
            SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding
            RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding
        </IfModule>
    </IfModule>

    # Compress all output labeled with one of the following media types.
    <IfModule mod_filter.c>
        AddOutputFilterByType DEFLATE "application/atom+xml" \
                                      "application/javascript" \
                                      "application/json" \
                                      "application/ld+json" \
                                      "application/manifest+json" \
                                      "application/rdf+xml" \
                                      "application/rss+xml" \
                                      "application/schema+json" \
                                      "application/geo+json" \
                                      "application/wasm" \
                                      "application/x-font-ttf" \
                                      "application/x-javascript" \
                                      "application/x-web-app-manifest+json" \
                                      "application/xhtml+xml" \
                                      "application/xml" \
                                      "font/opentype" \
                                      "font/otf" \
                                      "image/bmp" \
                                      "image/svg+xml" \
                                      "text/cache-manifest" \
                                      "text/calendar" \
                                      "text/css" \
                                      "text/html" \
                                      "text/javascript" \
                                      "text/plain" \
                                      "text/markdown" \
                                      "text/vcard" \
                                      "text/vtt" \
                                      "text/x-component" \
                                      "text/x-cross-domain-policy" \
                                      "text/xml"

    </IfModule>

</IfModule>

texnixe · May 3, 2022, 12:27pm

A similar error message was encountered here: Kirby in Dokku broken with recent update - #2 by wout

Don’t know if that applies to your setup

Bogdan_Condorachi · May 3, 2022, 12:55pm

Tried to apply his solution but still with no success. I run the same setup on a test server where there’s no ssl and there is working. So the problem is related to ssl but really don’t know what I can do

texnixe · May 3, 2022, 1:01pm

Have you tried to set the URL in your config.php?

wout · May 3, 2022, 1:14pm

I was going to say the same. I had to explicitly force Kirby over https by adding the url option:

return [
  // ...
  'url' => 'https://hasty.ai'
];

If you used my hack, did you have the ENV var configured as well?

Bogdan_Condorachi · May 3, 2022, 1:35pm

Forgot to mention that I already have url set up but still does not solve it.

@wout I don’t have env configuration files, maybe can you explain your solution a bit in a way that I can integrate without env

wout · May 3, 2022, 1:57pm

Of course. Basically what it does is set $_SERVER['HTTPS'] to true for the production environment where everything always runs over https. If the value of APP_ENV is anything else than 'production', or simply not configured, $_SERVER['HTTPS'] is set to false.

I went with the ENV var setup because then I don’t need to do anything in development, and setting env vars in production requires minimum effort.

Bogdan_Condorachi · May 3, 2022, 2:15pm

any idea how I could do that directly in config just to test if it will solve? tried some stuff now my log looks like this

index.js:1 
       GET https://hasty.ai/api/auth 403
request @ index.js:1
get @ index.js:1
user @ index.js:1
index.js:1 
        
       {status: 'error', message: 'Unauthenticated', code: 403, exception: 'Kirby\\Exception\\PermissionException', key: 'error.permission', …}
onError @ index.js:1
request @ index.js:1
await in request (async)
get @ index.js:1
user @ index.js:1
index.js:1 
        
       DOMException: Failed to execute 'pushState' on 'History': A history state object with URL 'http://hasty.ai/panel/login' cannot be created in a document with origin 'https://hasty.ai' and URL 'https://hasty.ai/panel/login'.
    at Object.onPushState (https://hasty.ai/media/panel/8b70b6d1b31f21fe005bf6002beb90f7/js/index.js:1:7778)
    at pt.setState (https://hasty.ai/media/panel/8b70b6d1b31f21fe005bf6002beb90f7/js/index.js:1:18156)
    at pt.go (https://hasty.ai/media/panel/8b70b6d1b31f21fe005bf6002beb90f7/js/index.js:1:16601)

wout · May 3, 2022, 2:37pm

I think Config::get() in your main index.php is an option. Something like:

<?php

include '../vendor/autoload.php';

$kirby = new Kirby;

$_SERVER['HTTPS'] = Config::get('app.env') == 'production';

echo $kirby->render();

Then add the configuration on your server in the config file:

<?php

return [
  // ...
  'app' => [
    'env' => 'production'
  ]
];

Let me know if that works.

Bogdan_Condorachi · May 3, 2022, 4:30pm

Ok, added your example but can’t say if it actually does anything. Panel still acts the same but thank you for trying

@texnixe have any idea if this could be related to this? Fixed Fiber requests to non-origin urls

texnixe · May 3, 2022, 5:43pm

I think it’s rather this issue: Url overwrite config doesn't overwrite protocol · Issue #4234 · getkirby/kirby · GitHub

Bogdan_Condorachi · May 4, 2022, 11:18am

Ok, first thanks to @wout and @texnixe for pointing me in the right direction
Here’s the workaround solution I did to fix my issue:

if (strpos($_SERVER['HTTP_X_FORWARDED_PROTO'], 'https') !== false) {
    $_SERVER['HTTPS'] = true;
}

What it does is identify the protocol used and if https is used it will force HTTPS over Kirby.

wout · May 4, 2022, 12:45pm

You’re welcome. Great you found a solution!