Красивая ошибка 403

И так, вы все же заинтересовались как заменить стандартные страницы ошибок в Nginx на свои. Тогда приступим.

Создание собственных страниц ошибок в Nginx

Приступим к созданию собственных страниц ошибок в Nginx. HTML код страниц описанных ниже будет как пример, на своем боевом сервере вы с легкостью сможете кастомизировать и брендировать их как вам необходимо.

Создание страницы ошибки 404

Для начала создадим файл /usr/share/nginx/html/my_404_error.html и откроем его для ввода HTML кода страницы, для этого выполним 2 команды:

touch /usr/share/nginx/html/my_404_error.html
nano -w /usr/share/nginx/html/my_404_error.html

Вводим HTML код страницы 404 и сохраняем файл, пример:

<h1>Ой, ошибка 404</h1>
<p>На своей последней ссылке вы повернули налево, а не направо?</p>
<p>Нет проблем. Вот несколько советов, которые вернут вас на верную дорогу:</p>
<ul>
    <li>Если вы набрали адрес вручную, проверьте его корректность. Возможно, это просто опечатка.</li>
    <li>Если вы нашли проблему с одним из наших веб-сайтов, мы будем признательны, если вы могли бы сообщить о проблеме по почте: mail@domain.com</li>
    <li>Если вы проследовали по ссылке, то, вероятно, она сломана. Сообщите нам об этом по почте: mail@domain.com</li>
    <li>Если вы не уверены, что вы ищете, начните на с главной страницы domain.com.</li>
</ul>

Создание страницы ошибки 403

Как и в случае со страницей 404, нужно создать файл /usr/share/nginx/html/my_403_error.html, открыть его на редактирование, добавить HTML код для страницы ошибки 403 и сохранить файл, для этого выполняем 2 команды:

touch /usr/share/nginx/html/my_403_error.html
nano -w /usr/share/nginx/html/my_403_error.html

Вводим HTML код страницы 403 и сохраняем файл, пример:

<h1>Ой, ошибка 403. Доступ запрещен.</h1>
<p>У вас нет разрешения для доступа к странице, давайте попробуем решить эту проблему вместе:</p>
<ul>
<li>Может быть вы забыли авторизоваться?</li>
<li>Вы авторизированны под своей учетной записью?</li>
<li>...</li>
<li>Сообщите нам по почте: mail@domain.com и мы попробуем решить проблему вместе.</li>
</ul>

Создание страницы ошибки 500

Повторяем шаги описанные выше (файл: /usr/share/nginx/html/my_500_error.html):

touch /usr/share/nginx/html/my_500_error.html
nano -w /usr/share/nginx/html/my_500_error.html

Вводим HTML код страницы 500 и сохраняем файл, пример:

<h1>Ой, ошибка 500.</h1>
<p>Попробуйте обратится к странице чуть позже или сообщите нам о проблеме по почте: mail@domain.com</p>
<p>Спасибо, что вы с нами.</p>

И так с созданием страниц ошибок закончили. Еще раз повторюсь, вы можете внедрить CSS стили и картинки на эти страницы, что сделает страницы ошибок более привлекательными, здесь все зависит от вас.

Подключение собственных страниц ошибок в Nginx

Настройка Nginx

Для того, чтобы созданные страницы ошибок заработали, нужно отредактировать конфигурацию Nginx, открываем файл конфигурации для редактирования:

nano -w /etc/nginx/nginx.conf

В конфигурации нужно добавить блок подключения страниц ошибок в блок server {}, пример блока настройки для страницы 404:

error_page 404 /my_404_error.html;
location = /my_404_error.html {
    root /usr/share/nginx/html;
    internal;
}

Примечание. В файле nginx.conf уже может быть блок настройки страниц ошибок, его нужно закомментировать, удалить или изменить на свой. В любом случае перед редактированием файла конфигураций nginx сделайте резервную копию для возможности восстановить текущую рабочую версию настроек.

Пример добавления всех страниц ошибок в конфигурацию nginx:

http {
    #...

    server {
        #...

        error_page 404 /my_404_error.html;
        location = /my_404_error.html {
            root /usr/share/nginx/html;
            internal;
        }

        error_page 403 /my_403_error.html;
        location = /my_403_error.html {
            root /usr/share/nginx/html;
            internal;
        }

        error_page 500 /my_500_error.html;
        location = /my_500_error.html {
            root /usr/share/nginx/html;
            internal;
        }

    #...

    }
}

В примере указан путь к странице ошибки, установлена корневая папка и установлен доступ к файлам «internal» чтобы обеспечить доступ к старницам только через внутреннее перенаправление nginx (таким образом пользователь не будет иметь прямой доступ к файлам).

Применение изменений

Для того чтобы изменения вступили в силу нужно перезапустить Nginx:

service nginx reload

Все, собственные страницы ошибок в Nginx готовы к работе. Можете проверить и наслаждаться проделанной работой.

Спасибо за внимание.

Многие ресурсы имеют оформленные страницы ошибок, если происходит сбой в обработке запроса от клиента.

Для начала на сайте была сделана кастомизация наиболее часто возникающих ошибок, другие при отладке пока не попадались, но всё впереди.

Как объявлено в заголовке статьи, кастомизированы был следующие ошибки:

1. 403 — Ошибка авторизации, доступ запрещён.
2. 404 — Страница не найдена;
3. 500 — Внутренняя ошибка сервера;

Кастомизация ошибок 404, 500

Для кастомизации ошибок 404 и 500 необходимо написать обработчики запросов, и достаточно написать их представления в виде метода.

В шаблоны добавляем свои кастомизированные html файлы, то есть:

• error404.html
• error500.html

Модуль, в котором реализованы представления для данного сайта — это

home.

В шаблонах этого же модуля помещены сами шаблоны кастомизированных ошибок.

В файле

urls.py

главного модуля сайта переопределяем обработчики по умолчанию:

• handler404
• handler500

В коде это выглядит так:

from home.views import e_handler404, e_handler500

handler404 = e_handler404
handler500 = e_handler500


  Опишем представления в файле

  

   views.py

  

  модуля

  

   home:

  
from django.shortcuts import render_to_response
from django.template import RequestContext


def e_handler404(request):
    context = RequestContext(request)
    response = render_to_response('error404.html', context)
    response.status_code = 404
    return response


def e_handler500(request):
    context = RequestContext(request)
    response = render_to_response('error500.html', context)
    response.status_code = 500
    return response


  Кастомизация ошибки 403

 

  Ошибка 403 возникает в том случае, когда не авторизованный пользователь пытается получить доступ к той части сайта, в которую доступ разрешён только авторизованным пользователям.
 

  В Django это достигается за счёт проверки статуса пользователя и добавления на страницы защитного токена, механизм

  

   CSRF.

  

  Данная ошибка может возникнуть и в том случае, если пользователь авторизован, но совершает действия, при которых требуется проверка токена CSRF, а сам токен был потерян или не верен. Дело в том, что для корректности работы токена, необходимо добавлять в шаблоне в формах специальный тег:
 
{% csrf_token %}


  В него и будет подставляться токен, но просто добавить в шаблон, его не достаточно. Прежде, чем начать рендер шаблон, необходимо добавить токен в контекст, который будет передан в шаблон. То есть,
 



  


                       
  







  


                       
  




from django.template.context_processors import csrf
from django.shortcuts import render_to_response


def any_request(request):
    context = {}
    context.update(csrf(request))

    ...
    return render_to_response('any_request.html', context=context)


  Ну а теперь ближе к непосредственно кастомизации. Для работы csrf необходимо, чтобы в файле

  

   settings.py

  

  добавлен модуль csrf и указано представление, которое будет заниматься обработкой данной ошибки:
 
MIDDLEWARE = [
    ...
    'django.middleware.csrf.CsrfViewMiddleware',
    ...
]

CSRF_FAILURE_VIEW = 'home.views.csrf_failure'


  В шаблонах добавим

  

   error403.html,

  

  а в файле

  

   views.py

  

  пропишем обработчик представления.
 
def csrf_failure(request, reason=""):
    context = RequestContext(request)
    response = render_to_response('error403.html', context)
    response.status_code = 403
    return response


  Для

  

   Django

  

  рекомендую
   VDS-сервера хостера Timeweb
  .
 

Web designers have gotten used to turning errors into opportunities. It’s no secret that the common, most widely occurring (and surprisingly recognizable) HTTP status code 404, aka “Not Found,” was forced by developers to bring benefits to the project. In the past it scared away users, destroyed the overall impression and was a nightmare for developers. Everyone wanted it to disappear once and for all.

Today, it is an essential detail of a website. WordPress even has a specifically assigned template for it. The “404 page” is an integral element of user experience. In the majority of cases, it has not only a beautiful design but also a theme that is aimed to contribute to the entire aesthetic of a website.

Along with the well-thought-out design, interactions and even animations, it includes useful links and getaways that help lost users to get back on track. However, the “404” error in web design is like Hipsters in real-world: They still catch our eye with their dorky glasses, “vintage” shirts and beards but they are nothing new to us. As for the “403” error, that’s a different story. It’s not as popular as its next of kin, but still, it occurs and not once in a blue moon.

Just for background, HTTP status code 403, aka “403 Forbidden”, means that you do not have permission to access the page. Reasons can vary, starting with inappropriate folder permissions and ending with a banal requirement of login credentials. Nevertheless, the rule of thumb dictates that any error is an opportunity to effect improvements. So why not turn the dummy “403 page” into a place that will serve the same duty as the “404 page”?

Let’s consider a dozen splendid takes on this type of error. They not only serve as a source of inspiration but also a source of ready-to-use solutions.

You Shall Not Pass

“You shall not pass” – was said once by one of the most powerful white-bearded wizards in the fictional world (I hope all the fans of Dumbledore forgive me for this). The final phrase of Gandalf the Grey (note Grey, not White) perfectly fits into the context here. And Noah Rodenbeek, A van Hagen and Jhey show this in practice. Their code snippets are impregnated with a spirit and charm of “The Hobbit” novel. While the first two artists re-created Gandalf with his staff, the latter just hinted at the scene, yet quite successfully.

HODOR 403

If the motifs from fictional novels featured above are not enough for you, then you should set your eyes on this code snippet from Yasio. Surprise-surprise, he got his inspiration from George R. R. Martin’s series of fantasy novels. He has come up with a work called HODOR 403. I believe for the majority out there this solution is self-explanatory. For the rest, I recommend switching to HBO and seeing for yourself why this fictional character goes perfectly well with this type of an error.

Use of Illustration and Animation

Other solutions in our list were guided by the notion that “403” symbolizes a forbidden area so that animated and static CSS illustrations were recreated namely with this idea in mind.

Error 403 – Forbidden by Aimie depicts a classic scene from the fairy tale. The animated bats, witch’s house, bare trees and creepy typography that are featured in the hours of darkness certainly do the trick here.

403 Forbidden by Dylan and 403 Forbidden by Visual Composer have some unique medieval allure. “Close the Gates”: The projects evoke namely these associations. The first one features the classic wooden guard gate door that closes before your very eyes; the second one also goes for a guard gate topic and depicts a mechanism with cogs and chains that reveals the forbidden sign.

Arturo Wibawa’s vision of the forbidden area is presented via marvelous, highly-detailed and even partially animated CSS illustration of the famous Chinese ‘The Purple Forbidden City,’ aka Palace Museum nowadays.

It’s Watching You

403 Forbidden Page by Mariana is marked by a whimsical monster-like character that, thanks to direction-aware effect, follows your mouse cursor everywhere. It recreates a feeling of being watched all the time. It also imitates a fancy fairy guard that does not allow moving forward. The project feels fun in spite of the “menacing” look of the mascot.

Be Persistent

Gabriele Corti also offers a vision of a “403” error page. His “Persistence is a key” project depicts an entire process of initially denying access and granting it after the right user action. The right actions imply inserting a key into a keyhole Nevertheless, you can always use this concept as a base for some advanced actions like inputting login and password.

Keeping it Simple

403 by lsgrrd is an oversimplified take on a “403 Page” that certainly has a right to exist. It is minimal but straight to the point. It has a certain digital quality that oozes techno vibe inherent to the computer sphere. The blinking cursor at the end in tandem with the digital typography produces a fantastic effect. The solution is clean, elegant and straightforward.

Are You on the List?

We are going to end our collection with the project made by Cassidy Williams. Unlike the majority featured here, this solution is a metaphor from the real world that illustrates the typical situation in any popular nightclub. The bouncer is the heart and soul of this code snippet. The character was even partially animated to make everything look lifelike.

Another Opportunity to Engage Users

Truth be told, “403 Error” is not as widespread as “404 Error”, nor is it as popular and recognizable. Nevertheless, it still exists and occurs time after time. That creates a hole in a website that can break the entire user experience. So, seize the opportunity and turn it into a valid part of the project. It will undoubtedly win over some new visitors and will prevent you from losing the old ones.

This page may contain affiliate links. At no extra cost to you, we may earn a commission from any purchase via the links on our site. You can read our Disclosure Policy at any time.