XMLHttpRequest error when viewing PDF invoices

Hello everyone,

I encountered an error while trying to preview a PDF in Chromium. I was able to bypass the issue by checking a box in the top left corner and clicking ‘DISMISS’ twice. The PDF then displayed normally. This issue does not occur in the Snap app or the Android app. I tried a fresh install but still experienced the same issue with the latest Docker image. I think the issue appeared after a recent update, but I can’t confirm.

My installation includes a reverse proxy (NGINX Proxy Manager) and the NGINX server is connected to the proxy network. The DB, APP, and NGINX server are connected via another Docker network.

XMLHttpRequest error

main.foss.dart.js?v=5.5.67:64728 Mixed Content: The page at '<https_url>' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint '<http_download_url>'. This request has been blocked; the content must be served over HTTPS.

I 've looked over these posts:

And tried the following:

  1. APP_URL with http and https
  2. REQUIRE_HTTPS with true and false
  3. TRUSTED_PROXIES with ‘*’ and IPs

docker-compose.yml:

version: '3.7'

secrets:
  IN_MYSQL_PWD:
    file: ${DOCKERSECRETS_DIR}/in_mysql_pwd
  IN_MYSQL_ROOT_PWD:
    file: ${DOCKERSECRETS_DIR}/in_mysql_root_pwd
  IN_MAIL_PWD:
    file: ${DOCKERSECRETS_DIR}/in_mail_pwd

services:
  server:
    image: nginx
    restart: always
    env_file: .env
    volumes:
      - ${DOCKERDATA_DIR}/invoice-ninja/config/nginx/in-vhost.conf:/etc/nginx/conf.d/in-vhost.conf:ro
      - ${DOCKERDATA_DIR}/invoice-ninja/docker/app/public:/var/www/app/public:ro
    depends_on:
      - app
    networks:
      - proxy-network
      - ninja-internal
    extra_hosts:
      - "in5.localhost:192.168.0.124 " #host and ip

  app:
    image: invoiceninja/invoiceninja:5
    restart: always
    env_file: .env
    volumes:
      - ${DOCKERDATA_DIR}/invoice-ninja/config/hosts:/etc/hosts:ro
      - ${DOCKERDATA_DIR}/invoice-ninja/docker/app/public:/var/www/app/public:rw,delegated
      - ${DOCKERDATA_DIR}/invoice-ninja/docker/app/storage:/var/www/app/storage:rw,delegated
    depends_on:
      - db
    networks:
      - proxy-network
      - ninja-internal
    secrets:
      - IN_MYSQL_PWD
      - IN_MAIL_PWD
    extra_hosts:
      - "in5.localhost:192.168.0.124 " #host and ip

  db:
    image: mysql:8
    restart: always
    env_file: .env
    volumes:
      - ${DOCKERDATA_DIR}/invoice-ninja/docker/mysql/data:/var/lib/mysql:rw,delegated
    networks:
      - ninja-internal
    secrets:
      - IN_MYSQL_PWD
      - IN_MYSQL_ROOT_PWD
    extra_hosts:
      - "in5.localhost:192.168.0.124 " #host and ip

networks:
  proxy-network:
    external: true
  ninja-internal:

.env:

APP_URL=https://<FQDN>
APP_KEY=<removed>
APP_DEBUG=false
REQUIRE_HTTPS=true
PHANTOMJS_PDF_GENERATION=false
PDF_GENERATOR=snappdf
TRUSTED_PROXIES='*'
QUEUE_CONNECTION=database
DB_HOST=db
DB_PORT=3306
DB_DATABASE=ninja
DB_USERNAME=ninja
DB_PASSWORD_FILE=/run/secrets/IN_MYSQL_PWD
MAIL_MAILER=smtp
MAIL_HOST=<host>
MAIL_PORT=465
MAIL_USERNAME="<email>"
MAIL_PASSWORD_FILE=/run/secrets/IN_MAIL_PWD
MAIL_ENCRYPTION=ssl
MAIL_FROM_ADDRESS="<email>"
MAIL_FROM_NAME="Invoice Ninja"
MYSQL_ROOT_PASSWORD_FILE=/run/secrets/IN_MYSQL_ROOT_PWD
MYSQL_USER=ninja
MYSQL_PASSWORD_FILE=/run/secrets/IN_MYSQL_PWD
MYSQL_DATABASE=ninja
DOCKERDATA_DIR=/opt/appdata
DOCKERSECRETS_DIR=/opt/docker/secrets

Hi,

On Settings > Device Settings is “Use browser PDF viewer” enabled or disabled? Changing it may help.

Hello,

Thanks for the prompt response! I enabled it, as it was disabled by default. The issue still persists, but now the PDF appears right away after clicking ‘DISMISS’ and checking the box icon on the top right. The error message doesn’t appear the second time. However, the product table seems to be cut in half now.

Always with good will,
Kastoreion

Can you post a screenshot of the box you’re checking?

Thanks! Are there any more details about the XMLHttpRequest error in the browser console?

From the chromium console:

Flutter Web Bootstrap: Auto
main.foss.dart.js?v=5.5.67:50263 ## Error reporting is enabled
main.foss.dart.js?v=5.5.67:50263 POST: https://invoice.kastoreion.gr/api/v1/refresh?&first_load=true&include_static=true
main.foss.dart.js?v=5.5.67:50263 GET: http://invoice.kastoreion.gr/client/invoice/mSt6G4eccsTMRgIXIleNDRkqJGYpylsx/download?t=1675626013235&t=1675626013235
main.foss.dart.js?v=5.5.67:64728 Mixed Content: The page at 'https://invoice.kastoreion.gr/#/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://invoice.kastoreion.gr/client/invoice/mSt6G4eccsTMRgIXIleNDRkqJGYpylsx/download?t=1675626013235&t=1675626013235'. This request has been blocked; the content must be served over HTTPS.

I just encountered a 504 error and I’m not sure if it’s related. I wanted to note it down for future reference. Also, I forgot to mention that everything is being proxied through Cloudflare.

504: 

<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en-US"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en-US"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en-US"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en-US"> <!--<![endif]-->
<head>


<title>FQDN_REMOVED | 504: Gateway time-out</title>
<meta charset="UTF-8" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="stylesheet" id="cf_styles-css" href="/cdn-cgi/styles/main.css" />


</head>
<body>
<div id="cf-wrapper">

    

    <div id="cf-error-details" class="p-0">
        <header class="mx-auto pt-10 lg:pt-6 lg:px-8 w-240 lg:w-full mb-8">
            <h1 class="inline-block sm:block sm:mb-2 font-light text-60 lg:text-4xl text-black-dark leading-tight mr-2">
              
              <span class="inline-block">Gateway time-out</span>
              <span class="code-label">Error code 504</span>
            </h1>
            <div>
               Visit <a href="https://www.cloudflare.com/5xx-error-landing?utm_source=errorcode_504&utm_campaign=invoice.kastoreion.gr" target="_blank" rel="noopener noreferrer">cloudflare.com</a> for more information.
            </div>
            <div class="mt-3">2023-02-05 19:35:01 UTC</div>
        </header>
        
        <div class="my-8 bg-gradient-gray">
            <div class="w-240 lg:w-full mx-auto">
                <div class="clearfix md:px-8">
                  
<div id="cf-browser-status" class=" relative w-1/3 md:w-full py-15 md:p-0 md:py-8 md:text-left md:border-solid md:border-0 md:border-b md:border-gray-400 overflow-hidden float-left md:float-none text-center">
  <div class="relative mb-10 md:m-0">
    
    <span class="cf-icon-browser block md:hidden h-20 bg-center bg-no-repeat"></span>
    <span class="cf-icon-ok w-12 h-12 absolute left-1/2 md:left-auto md:right-0 md:top-0 -ml-6 -bottom-4"></span>
    
  </div>
  <span class="md:block w-full truncate">You</span>
  <h3 class="md:inline-block mt-3 md:mt-0 text-2xl text-gray-600 font-light leading-1.3">
    
    Browser
    
  </h3>
  <span class="leading-1.3 text-2xl text-green-success">Working</span>
</div>

<div id="cf-cloudflare-status" class=" relative w-1/3 md:w-full py-15 md:p-0 md:py-8 md:text-left md:border-solid md:border-0 md:border-b md:border-gray-400 overflow-hidden float-left md:float-none text-center">
  <div class="relative mb-10 md:m-0">
    <a href="https://www.cloudflare.com/5xx-error-landing?utm_source=errorcode_504&utm_campaign=FQDN_REMOVED" target="_blank" rel="noopener noreferrer">
    <span class="cf-icon-cloud block md:hidden h-20 bg-center bg-no-repeat"></span>
    <span class="cf-icon-ok w-12 h-12 absolute left-1/2 md:left-auto md:right-0 md:top-0 -ml-6 -bottom-4"></span>
    </a>
  </div>
  <span class="md:block w-full truncate">London</span>
  <h3 class="md:inline-block mt-3 md:mt-0 text-2xl text-gray-600 font-light leading-1.3">
    <a href="https://www.cloudflare.com/5xx-error-landing?utm_source=errorcode_504&utm_campaign=invoice.kastoreion.gr" target="_blank" rel="noopener noreferrer">
    Cloudflare
    </a>
  </h3>
  <span class="leading-1.3 text-2xl text-green-success">Working</span>
</div>

<div id="cf-host-status" class="cf-error-source relative w-1/3 md:w-full py-15 md:p-0 md:py-8 md:text-left md:border-solid md:border-0 md:border-b md:border-gray-400 overflow-hidden float-left md:float-none text-center">
  <div class="relative mb-10 md:m-0">
    
    <span class="cf-icon-server block md:hidden h-20 bg-center bg-no-repeat"></span>
    <span class="cf-icon-error w-12 h-12 absolute left-1/2 md:left-auto md:right-0 md:top-0 -ml-6 -bottom-4"></span>
    
  </div>
  <span class="md:block w-full truncate">invoice.kastoreion.gr</span>
  <h3 class="md:inline-block mt-3 md:mt-0 text-2xl text-gray-600 font-light leading-1.3">
    
    Host
    
  </h3>
  <span class="leading-1.3 text-2xl text-red-error">Error</span>
</div>

                </div>
              
            </div>
        </div>

        <div class="w-240 lg:w-full mx-auto mb-8 lg:px-8">
            <div class="clearfix">
                <div class="w-1/2 md:w-full float-left pr-6 md:pb-10 md:pr-0 leading-relaxed">
                    <h2 class="text-3xl font-normal leading-1.3 mb-4">What happened?</h2>
                    <p>The web server reported a gateway time-out error.</p>
                </div>
              
                <div class="w-1/2 md:w-full float-left leading-relaxed">
                    <h2 class="text-3xl font-normal leading-1.3 mb-4">What can I do?</h2>
                    <p class="mb-6">Please try again in a few minutes.</p>
                </div>
            </div>
              
        </div>

        <div class="cf-error-footer cf-wrapper w-240 lg:w-full py-10 sm:py-4 sm:px-8 mx-auto text-center sm:text-left border-solid border-0 border-t border-gray-300">
  <p class="text-13">
    <span class="cf-footer-item sm:block sm:mb-1">Cloudflare Ray ID: <strong class="font-semibold">794e14c32e58f3e3</strong></span>
    <span class="cf-footer-separator sm:hidden">&bull;</span>
    <span id="cf-footer-item-ip" class="cf-footer-item hidden sm:block sm:mb-1">
      Your IP:
      <button type="button" id="cf-footer-ip-reveal" class="cf-footer-ip-reveal-btn">Click to reveal</button>
      <span class="hidden" id="cf-footer-ip">IP_REMOVED</span>
      <span class="cf-footer-separator sm:hidden">&bull;</span>
    </span>
    <span class="cf-footer-item sm:block sm:mb-1"><span>Performance &amp; security by</span> <a rel="noopener noreferrer" href="https://www.cloudflare.com/5xx-error-landing?utm_source=errorcode_504&utm_campaign=invoice.kastoreion.gr" id="brand_link" target="_blank">Cloudflare</a></span>
    
  </p>
  <script>(function(){function d(){var b=a.getElementById("cf-footer-item-ip"),c=a.getElementById("cf-footer-ip-reveal");b&&"classList"in b&&(b.classList.remove("hidden"),c.addEventListener("click",function(){c.classList.add("hidden");a.getElementById("cf-footer-ip").classList.remove("hidden")}))}var a=document;document.addEventListener&&a.addEventListener("DOMContentLoaded",d)})();</script>
</div><!-- /.error-footer -->


    </div>
</div>
</body>
</html>

I’m surprised to see the http requests, can you check that the APP_URL value in the .env file is using https.

Can confirm APP_URL is set to https in the .env file.

APP_URL=https://invoice.kastoreion.gr
APP_KEY=<REMOVED>
APP_DEBUG=false
REQUIRE_HTTPS=true

Do you see the XMLHttpRequest error in the network tab? There may be more details there.

@david do you have any ideas?

Unfortunately, I am unable to upload .har files. Therefore, I have included the network report here: Crypta

Moreover, I have just realized that I am using HTTP (80) for my nginx-server app while operating behind the proxy. I attempted to expose port 443, but I was unable to connect. Is there something I may be missing?

Thanks for your assistance. As a token of appreciation, would it be possible to send a PayPal link for the project so that I can buy you some beers?

Have you configured in your .env file

TRUSTED_PROXIES=*

and then update the cache with

php artisan optimize

I changed TRUSTED_PROXIES='*' to TRUSTED_PROXIES=* and then purged and rebuilt the containers. Afterwards, I ran php artisan optimize .

Output:

~ $ php artisan optimize

   INFO  Caching the framework bootstrap files.  

  config ................................................................................................................................. 27ms DONE
  routes ................................................................................................................................. 86ms DONE

When I try to access invoice.kastoreion.gr I 'm getting redirected to invoice.kastorieon.gr/setup and encountering a 500 error. I rebooted the container and was able to access the site again, but the issue continues to persist.

Maybe something with my reverse proxy setup?

The mixed content issue certainly does point to some kind of proxy issue, unfortunately I don’t have a lot (any) of expertise with proxies.

The app works well through the snap application, except for the issue of not being able to view invoices through chromium. That’s okay for now. I will keep a watch and update this thread if I manage to resolve the issue. Thanks for taking the time to check it out.

The issue was resolve after I added security headers for NGINX Proxy Manager as per this Gist (Workaround - Security Headers @ NGINX Proxy Manager · GitHub). Although I’m not certain, it’s possible that running php artisan optimize might have also contributed to the fix.

I will continue my investigation in the coming days, but I may have limited time due to university exams. My aim is to determine the cause of the issue.

Hello,

I have the same issue.

  • I use nginx-proxy-manager
  • in the .env APP_URL=my.domain ; TRUSTED_PROXIES=* ; REQUIRE_HTTPS=true

when i use my domain (https://my.domain) with SSL

I have an “XMLHttpRequest error”. In the Devolper-Tools Chrome I see this:

http://internal.ip:port/client/invoice/pQPKCn0s0YLJnLa4cppd4kzNG61XXXXX/download?t=16776745XXXX&t=16776745XXXX

After the workaround then it does this:

https://internal.ip:port/client/invoice/pQPKCn0s0YLJnLa4cppd4kzNG61XXXXX/download?t=16776745XXXX&t=16776745XXXX

But it didnt work

When i copied the URL and substituted the internal.ip to mydomain example like this:

https://my.domain/client/invoice/pQPKCn0s0YLJnLa4cppd4kzNG61XXXXX/download?t=16776745XXXX&t=16776745XXXX

It works.

How can I change in invoiceninja or in nginx-proxy-manager tu use my.domain, when i want to see my
PDF or download the PDF.

Thanks for all ideas
Lordi

Is it possible you have a value set for the domain on Settings > Client Portal, it may explain the problem.

2 Likes

Oh wow, hillel your my men.

This solve the problem.

So easy what should I say

Thank You

1 Like

@hillel

For some time I also see a “XMLHttpRequest error” when I send an invoice. I can edit invoices and see the preview of it just fine, but as soon as I click the “send email”, no matter if I use the three dot menu in the invoices overview or the send email button in the individual invoice edit page, the error appears. If I consirm, I see the email, but the PDF preview pane stays empty. I can send the email without issues anyway, the PDF gets attached to that email as expected and the customer can properly view the attachment as well as following the link in the email. It’s more a nuisance then a real issue. I do in fact have a settings → client portal URL set.