nginx custom error page 502 with css and image files

Question

I'm trying to add a custom error page for 503. I added these lines to server conf in nginx.conf file:

error_page 500 502 503 504 /50x.html;
location = /50x.html {
    root  /home/username/sites/myProject/current/errorPages;
    internal;
}

It displays the custom page when uwsgi is down, however this doesn't show any images. I tried many different configurations I can think of, but no luck. How I can display image file and enable css for a custom error page?

I put my custom error page into /home/username/sites/myProject/current/errorPages and the file structure is:

errorPages/50x.html
errorPages/50x_files/50x.css
errorPages/50x_files/50x.js
errorPages/50x_files/image.png

Sloth

How do tou refer to this CSS/images in your 50x.html? – Helms

Answer 1

I just had the same problem, and what did work is setting the nginx conf like this :

error_page 500 502 503 504 /50x.html;
location = /50x.html {
  root  /home/username/sites/myProject/current/errorPages;
}
location = /image.png {
  root /home/username/sites/myProject/current/errorPages/50x_files;
}

And then reference the image simply as src="image.png". The same should apply to your css and js!

Edit : I find a way to make it work for a bunch of file:

error_page 500 502 503 504 /errorPages/50x.html;
location /errorPages/ {
  root  /home/username/sites/myProject/current/;
}

This way all the files in the errorPages folder will be available (e.g. src="/errorPages/image.png"), as nginx will try to match all "/errorPages/...". It is necessary to remove both the "=" after "location" (as it's not an exact match anymore) and the "internal;" in it (as the other resources will be called from the html and not internally by nginx).

Juryman

In your second approach location /errorPages/50x.html { should be location /errorPages {. Otherwise it can't find images under errorPages folder. – Montage

@Montage Thanks! I just checked my conf and indeed it should be /errorPages/ – Juryman

Answer 2

I think the best approach is to do the following things:

• Use inline CSS
• Convert your images to Base64

After doing this, you can embed the generated Base64 string into the background-image CSS rule as follows:

background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEADI.....==)

You can use the string with the <img> tags as well, just pass it to the src attribute as follows:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEADI.....==" />

This way you can keep the internal nginx rule.

Uxorious

Inline styles might be forbidden by CSP headers. – Bayles

Answer 3

The reason that your image/css is not shown/loaded, is because you're using the internal directive. The internal directive specifies that a given location can only be used for internal requests, and is not available or accessible from the outside (i.e. http://mysite/errorPages/500.html). Thus, a 404 error on its turn is given for these files.

A few workarounds are:

1. Remove the internal directive

   error_page 500 502 503 504 /50x.html;
   location = /50x.html {
       root  /home/username/sites/myProject/current/errorPages;
   }
   

2. Use css inline styles for your error pages. This however won't work for your images, or other files that are linked to your page.
3. Place the css and image files outside of the errorPages folder, and refer to them in your html code, with a relative path, starting from the root of your website.

Whitesell

Answer 4

In my HTML file, I have included a stylesheet using the following link tag:

<link type="text/css" rel="stylesheet" href="style.css" />

My folder root structure is configured to be root /var/www/html;. Within this structure, I have a file named 404.html and a stylesheet named style.css.

To configure the 404 error page handling in Nginx, I edited the default site configuration file:

sudo vim /etc/nginx/sites-available/default

Inside this file, I added the following configuration:

root /var/www/html;

error_page 404 /404.html;

location = /404.html {
    root /var/www/html;
    allow all;
    internal;
}

This configuration sets the root directory and specifies that if a 404 error occurs, the server should redirect to the 404.html page located in the /var/www/html directory. The allow all; directive permits access, and internal; ensures that the client cannot request this page directly.

With this setup, the 404 error page functionality works as expected.

Augur

Answer 5

This worked for me:

error_page 500 502 503 504 = @errorz;
location @errorz{
        root /home/username/sites/myProject/current/errorPages;
        try_files $uri /50x.html = 502 503;
}

Portiere