Connection through Cloudflare Tunnel: Error Sample creation

Technical
1

Hey Guys,

I’m running Senaite on an Ubuntu Server 24.04 LTS. It is a testing instance running at my home. Now I want to make it accessible to my colleagues at work. To achieve this, I implemented a Cloudflare Tunnel for external access.

The good news is that I can access the instance externally. However, the bad news is that after logging in, I encounter an error on the subpages, as shown in the screenshot.

I also tried another approach: opening a port on my router and forwarding it to the instance. This method works, but it’s not secure, so it’s not an option.

Do you have any ideas why it’s not working with Cloudflare?

Thanks for your assistance!

Jan

Cloudflare Fehler
Cloudflare Fehler1662×643 23.1 KB

Startbildschirm
Startbildschirm1685×819 40.8 KB

2

Hi Jan,

can you please share the output of your JS console when loading this page?
I.e. pressing F12 in Firefox/Chrome to see if you get errors displayed in the Console.

I guess it is a CORS error due to incorrect configured rewrite rules.
You probably need to put a webserver (NGINX, Apache etc.) in front of SENAITE and use this as your endpoint for cloudflare.

3

Hi Ramon,

Themes: You are right.

Thanks for your support!
Another lesson learned! So i will try to set it up with NGINX never done this but challenge accepted :wink:

JQMIGRATE: Migrate is installed, version 1.4.1
jquery.min.js:4  Mixed Content: The page at 'https://MYURL.net/MYCOMPANY/clients' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://MYURL.net/MYCOMPANY/plonejsi18n?domain=senaite.core&language=de'. This request has been blocked; the content must be served over HTTPS.
send @ jquery.min.js:4
ajax @ jquery.min.js:4
n.each.n.<computed> @ jquery.min.js:4
getJSON @ jquery.min.js:4
e.loadCatalog @ i18n.js:84
a @ i18n-wrapper.js:9
value @ senaite.app.listing.js:2
Af @ react-dom.production.min.js:133
si @ react-dom.production.min.js:132
Rk @ react-dom.production.min.js:252
Si @ react-dom.production.min.js:195
Pk @ react-dom.production.min.js:195
Nd @ react-dom.production.min.js:194
Mi @ react-dom.production.min.js:189
db @ react-dom.production.min.js:79
zb @ react-dom.production.min.js:190
$k @ react-dom.production.min.js:213
Wd @ react-dom.production.min.js:213
Q.render @ react-dom.production.min.js:266
(anonym) @ senaite.app.listing.js:2
senaite.app.listing.js:2  Mixed Content: The page at 'https://MYURL.net/MYCOMPANY/clients#?list_clientsfolder_review_state=default&list_clientsfolder_filter=&list_clientsfolder_sort_on=&list_clientsfolder_sort_order=&list_clientsfolder_pagesize=50' was loaded over HTTPS, but requested an insecure resource 'http://MYURL.net/MYCOMPANY/clients/base_view/folderitems'. This request has been blocked; the content must be served over HTTPS.
value @ senaite.app.listing.js:2
value @ senaite.app.listing.js:2
value @ senaite.app.listing.js:2
value @ senaite.app.listing.js:2
Ki @ react-dom.production.min.js:179
Ii @ react-dom.production.min.js:179
Ik @ react-dom.production.min.js:178
Sk @ react-dom.production.min.js:197
yb @ react-dom.production.min.js:196
Mi @ react-dom.production.min.js:189
db @ react-dom.production.min.js:79
zb @ react-dom.production.min.js:190
$k @ react-dom.production.min.js:213
Wd @ react-dom.production.min.js:213
Q.render @ react-dom.production.min.js:266
(anonym) @ senaite.app.listing.js:2
[NEU] Konsolenfehler mit Copilot in Edge erklären: Klicken Sie auf
         
         , um einen Fehler zu erklären.
        Weitere Informationen
        Nicht mehr anzeigen
content.js:390 getEmbedInfo
1 Like
4

The Mixed Content Error is caused by insecure requests (HTTP) fetching over a secure protocol (HTTPS). Add a ContentSecurityPolicy header on your reverse proxy (Nginx, Traefik) to fix the issue.

Check this reference: https://googlechrome.github.io/samples/csp-upgrade-insecure-requests/index.html

Look for instructions for adding a header for your chosen web server. You might need to rewrite the URLs to HTTPS if the issue persists.

For Nginx:

server {
    listen 80;
    server_name your-domain.com;

    # Redirect all HTTP to HTTPS
    return 301 https://$host$request_uri;
}

server {
    listen 443 ssl;
    server_name your-domain.com;

    # SSL config here
    ssl_certificate     /etc/nginx/ssl/your-cert.crt;
    ssl_certificate_key /etc/nginx/ssl/your-cert.key;

    location / {
        # Rewrite to VirtualHostBase format
        rewrite ^/(.*)$ /VirtualHostBase/https/your-domain.com:443/VirtualHostRoot/$1 break;

        proxy_pass http://backend-instance;  # Change this to your actual upstream

        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-Proto https;
        proxy_set_header X-Forwarded-Host your-domain.com;

        add_header Content-Security-Policy "upgrade-insecure-requests";
    }
}
1 Like