Mixed Content Error

Support
1

Hi again,

I’ve successfully managed to set up the Vikunja backend on my FreeBSD jail, and set up the frontend on my nginx reverseproxy. I’ve confirmed that the two are talking to each other correctly by typing https://MYDOMAINNAME/api/v1/info and I receive the JSON response - so all good.

However, when I go to register my first user, nothing happens. I’ve logged the network traffic and found the source of the error:

Capture

Capture3

It looks like Chrome doesn’t like having a https connection to the proxy, but a plain http connection over the local network. (the http://192.168.1.123:3456/api/v1 login is specified in the index.html file at the frontend).

Any thoughts on how to resolve this? Is it a mis-configuration on my side, or a bug?

EDIT: There is no ‘response’ data captured in the network analyser as the page is blocked

Capture2

Thanks in advance!
Skelly

2

I’ve been thinking a bit more about this, and think maybe I can avoid the issue by running the frontend on an nginx server hosted on the same jail as the backend, and then point the reverseproxy to that nginx server instead… I’ll post back in the next day or so with how that turns out :sweat_smile:

EDIT: No luck - just wind up with the exact same problem :disappointed_relieved:

3

AFAIK this is a chrome feature.

I think the easiest way to resolve this is to also proxy the api requests the same way you’re serving the frontend. Please take a look at the docs about this.

4

Thanks for the reply Konrad.

I have my nginx config set up as per the docs, yet the issue persists. It appears to be because we have to specify (read: force) the path to the api in the index.html file (window.API_URL = 'http://192.168.1.123:3456/api/v1') - and therefore the resources are returned as http through a https connection. I feel like this is an actual issue, as I’ve followed the documentation and it does not work as expected?

Thankfully, accessing vikunja works totally fine locally (i.e. pointing to the nginx instance hosting the vikunja frontend via the local 192.168.1.XXX address) as this is only accessed via http. It’s just for access via the reverseproxy that doesn’t work due to this mixed http/s issue.

Again, I appreaciate your time Konrad :slight_smile:

5

If you can reach the api through https://MYDOMAINNAME/api/v1/info you should be able to just switch the API_URL in the frontend to /api/v1 and be good to go.

6

Hi Konrad,

Turns out I can’t actually access the api through https://MYDOMAINNAME/api/v1/info. I got confused with which tab I had open… oops!

I’ve tried changing the url in index.html to all these variants:

http://192.168.1.123:3456/api/v1
https://192.168.1.123:3456/api/v1
192.168.1.123:3456/api/v1
/api/v1

None of them work through the reverseproxy, and only http://192.168.1.123:3456/api/v1 works locally…

This is my architechture:
Internet -> (https) -> NGINX ReverseProxy -> (http) -> NGINX Vikunja frontend (port 80) -> (http) -> Vikunja api (port 3456)

Any thoughts?

Cheers,
Skelly

7

Hi Skelly,

You would need to configure it so that the nginx serving the frontend (NGINX Vikunja frontend (port 80)) also proxies the api requests. Does it work with this example? Then you should be able to reach the api both at https://MYDOMAINNAME/api/v1/info and through http://192.168.1.123/api/v1/info (no port 3456 in the url).

1 Like
8

ahh yes you legend! I had the following block in the wrong nginx config :sweat_smile::

location ~* ^/(api|dav|\.well-known)/ {
            proxy_pass http://192.168.1.123:3456;
            client_max_body_size 20M;
        }

Thanks so much Konrad!

For anyone else who faces the same challenge as me, here is the minimalist nginx configs I have used. Be sure to leave the index.html file line as window.API_URL = '/api/v1'

Reverse Proxy Config (NGINX):

server {
    listen 443 ssl;
    
    location / {
        proxy_pass http://192.168.1.123:80;
        client_max_body_size 20M;
    }
}

Vikunja Config (NGINX):

server {
    listen 80 default_server;
    server_name default_server;
    
    location / {
        root   /mnt/frontend;
        try_files $uri $uri/ /;
        index  index.html index.htm;
    }
    
    location ~* ^/(api|dav|\.well-known)/ {
        proxy_pass http://192.168.1.123:3456;
        client_max_body_size 20M;
    }
}
1 Like
9

Awesome, glad it works now!