Implementar una página de error personalizada en nginx

Buenas a todos, hoy les traigo una forma graciosa de como personalizar la plantilla de error de nginx.

Tener una página de error predeterminada de Apache HTTP o Nginx no se ve bien y revela información de la versión, lo que conduce a una fuga de información. Hoy les muestro como personalizarla.

Si no ha implementado una página de error personalizada para su aplicación web, debe considerar hacerlo por muchas razones, incluidas las siguientes.

• Branding – Muestre mensajes personalizados con su logotipo y algunas líneas de mensajes para que los visitantes tomen conciencia del problema y enlace para contactar al equipo respectivo.
• Vulnerabilidad – Si está trabajando en el entorno de cumplimiento de PCI DSS, debe considerar corregir la vulnerabilidad de fuga de información, que se encuentra en la página de error predeterminada del producto.
• Mejor interfaz de usuario – Se trata de una mejor experiencia de usuario y eso también puede proporcionar en una página de error. Por ejemplo, si el contenido solicitado por un usuario no existe, el servidor web mostrará la página de error 404 predeterminada y el usuario más probable cerrará la sesión. ¿Qué tal tener una página personalizada donde un usuario puede buscar o mostrar elementos relacionados y una navegación adecuada?

¿Suena bien?

Bueno, estoy seguro de que de esta manera está reteniendo visitantes para continuar en un sitio web y mejorar las tasas de rebote.

¿Todavía no está convencido?

Vamos a ver…

Así que esta es la página predeterminada «404 no encontrada» de Nginx

¿Qué harías cuando recibas esta página?

Lo más probable es que lo cierre.

Ahora conoce la ventaja y es hora de implementarlas. Puede tener una página personalizada en varios Código de estado HTTP eventos. Creo que lo siguiente es esencial.

• 404 – No encontrado
• 403 – Prohibido
• 500 – Error interno del servidor
• 503 – Servicio no Disponible
• 504 – Tiempo de espera de la puerta de enlace

Requisito previo

Supongo que ya ha creado una página personalizada. Si necesita algunas imágenes 404, puede obtenerlas de Elementos.

Implementación en Apache HTTP

Hay varias formas de hacer esto. Por ejemplo, puede hacer esto usando la directiva Rewrite o ErrorDocument. Explicaré cómo hacerlo con la directiva ErrorDocument.

• Inicie sesión en el servidor HTTP Apache
• Vaya a la carpeta apache conf donde tiene el archivo httpd.conf
• Realice una copia de seguridad del archivo httpd.conf
• Modifique httpd.conf y agregue ErrorDocument como a continuación

ErrorDocument 404 /path/of/custom/error/file
ErrorDocument 403 /path/of/custom/error/file
ErrorDocument 500 /path/of/custom/error/file
ErrorDocument 503 /path/of/custom/error/file
ErrorDocument 504 /path/of/custom/error/file

Guarde el httpd.conf y reinicia el servidor Apache

Intente acceder a algo que no existe y debería tener una página de error personalizada en lugar de la predeterminada.

Nota:: también puede redirigir a otra URL en caso de estos códigos de retorno de estado HTTP. Para la redirección, puede agregar una URL junto a cada código, como se muestra a continuación.

ErrorDocument 404 http://offline.frcuba.cu/
ErrorDocument 403 http://offline.frcuba.cu/403.html
ErrorDocument 500 http://offline.frcuba.cu/
ErrorDocument 503 http://offline.frcuba.cu/
ErrorDocument 504 http://offline.frcuba.cu/

Implementando en Nginx

• Inicie sesión en el servidor Nginx
• Vaya a la ubicación del archivo nginx.conf
• Como de costumbre, haga una copia de seguridad del archivo conf y agregue lo siguiente en el bloque http

error_page 404 /path/of/custom/error/file;
error_page 403 /path/of/custom/error/file;
error_page 500 /path/of/custom/error/file;
error_page 503 /path/of/custom/error/file;
error_page 504 /path/of/custom/error/file;

En muchas plantillas html traen imagenes que puedes incrustar con base64 si no sabes cómo hacerlo puedes auxiliarte con esta web https://www.base64-image.de/  e incrustar el codigo en el html.

Pueden descargar algunas plantillas ya personalizadas para que puedas editar desde acá

Otra configuracion que puedes hacer es crear un vhosts para las páginas de errores que quieras mostrar:
Ejemplo crearemos un virtualhost para todas las plantillas

mkdir -p /media/webserver/offline

nano /etc/nginx/sites-enabled/offline

server {
 listen 80;
 server_name offline.dominio.cu;
index index.html;
root /media/webserver/offline;

location / {
}
}

En /media/webserver/offline subimos los archivos que personalizamos y reiniciamos el nginx

Cómo podemos probar dicha configuración, pueden limitar una web que solo se vea desde cuba, para ello creamos el archivo cuba.conf

nano /etc/nginx/cuba.conf

allow 10.0.0.0/8;
allow 172.16.0.0/12;
allow 192.168.0.0/16;
allow 169.254.0.0/16;

allow 152.206.0.0/15;
allow 169.158.0.0/16;
allow 181.225.224.0/19;
allow 190.6.64.0/19;
allow 190.15.144.0/20;
allow 190.92.112.0/20;
allow 190.107.0.0/20;
allow 196.1.112.0/24;
allow 196.1.135.0/24;
allow 196.3.152.0/24;
allow 200.0.16.0/24;
allow 200.0.24.0/22;
allow 200.5.12.0/22;
allow 200.13.144.0/21;
allow 200.14.48.0/21;
allow 200.55.128.0/18;
allow 201.220.192.0/19;
deny all;

error_page 404 403 =302 http://offline.frcuba.cu/403.html;

Como notaras en ese fichero pusimos primeramente los bloques de ip internos de las redes y después los bloques púbicos de cuba permitiéndolos, y denegando todo lo demás es decir le mostrara el error 403, también personalizamos que los errores 404 y 403 realice una redireccion temporal a la url que pusimos anteriormente es decir http://offline.frcuba.cu/403.html. Ya una vez comprendido esto, procedemos a hacerle un include en las configuraciones de nuestros virtualhosts, acá le muestro un ejemplo de un FTP con h5a1 limitado solo a que se vea desde cuba.

server {
    listen 80;
    server_name download.dominio.cu;
    access_log /var/log/nginx/download-access.log;
    error_log /var/log/nginx/download-error.log;
    root /media/webserver/download/;
    index index.html index.php /_h5ai/public/index.php;

    location ~ \.php$ {
        fastcgi_pass  unix:/var/run/php/php7.2-fpm.sock;
        fastcgi_index index.php;
        fastcgi_send_timeout 5m;
        fastcgi_read_timeout 5m;
        fastcgi_connect_timeout 5m;
        include /etc/nginx/fastcgi_params;
        fastcgi_param   SCRIPT_FILENAME /media/webserver/download/$fastcgi_script_name;
include /etc/nginx/cuba.conf;
    }

}