エラーページはなぜ重要？ —UXとセキュリティ観点—

2023/10/09

エラーページは、ウェブサイトや Web アプリケーションで何らかのエラーが発生した際に、ユーザーに表示される特別なページです。適切に設計されたエラーページには、エラーの原因や解決策、ユーザーが次に取るべきアクションなどが表示されます。

このレクチャーでは、Web アプリケーションのエラーページがユーザーエクスペリエンスとセキュリティにおいて、なぜ重要なのかを解説します。また、Spring でエラーページをカスタマイズする方法を紹介します。

エラーページとはなにか？

エラーページは、ユーザーが存在しないページを訪れたり、アプリケーション内で何らかのエラーが発生した際に表示されるものです。
404 Not Found エラーが最も一般的な例であり、このエラーは特定のURLが見つからない時に表示されます。

エラーページが必要な理由

エラーページは、

ユーザーエクスペリエンス
セキュリティ

の両方の観点から重要です。

理由 #1 ユーザーエクスペリエンスの向上

エラーページは、ユーザーエクスペリエンスに大きな影響を与えます。
ユーザーが次にどのようなアクションを取ればいいのかを示すエラーメッセージを表示することで、ユーザーは迷わず次のステップに進むことができます。
例えば、404エラーの場合、エラーページに「トップページへ戻る」リンクを設置することで、ユーザーはサイト内を引き続き回遊できます。

理由 #2 セキュリティの向上

エラーページは、セキュリティの観点からも重要です。
エラーページを設定していない場合、エラーが発生した際に stacktrace などのアプリケーションの詳細な情報がユーザーに公開される場合があります。アプリケーション内部の情報をユーザーに表示してしまうと攻撃者に攻撃のヒントを与えてしまいます。たとえば、以下のような stacktrace を取得した攻撃者は、表示された情報からアプリケーションで使っているライブラリのバージョンを調べ、そのバージョンに対する脆弱性を突いてアプリケーションを攻撃することができます。

エラーページの実装方法

それでは、エラーページの実装方法を実際のコードを交えて見ていきましょう。 Spring では、エラーページを実装するための便利な仕組みが提供されています。

実装例 #1: エラー発生時に表示するページをカスタマイズする

Spring では

src/main/resources/templates/ ディレクトリに
error.html というテンプレートを用意する

ことで、エラー発生時に表示するエラーページをカスタマイズできます。

アプリケーションの他のページとエラーページのデザインを揃えるために、error.html を作成することが多いです。エラーページには、ユーザーのネクストアクションを示すためにトップページのボタンを設置するなどの工夫をしましょう。

<!-- src/main/resources/templates/error.html -->
<!DOCTYPE html>
<html lang="ja"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layout/layout}"
>
<head>
    <title>申し訳ございません。ページを表示できませんでした</title>
</head>
<body>
<section layout:fragment="content">
    <div class="text-center">
        <h1 class="display-1" th:text="${status} + ' ' + ${error}"></h1>
        <p>申し訳ございません。ページを表示できませんでした</p>
        <a th:href="@{/}" class="btn btn-primary mt-3">トップページに戻る</a>
    </div>
</section>
</body>
</html>

実装例 #2: 特定のステータスコードに対応するエラーページを実装する

特定のステータスコードに対応するエラーページを個別に実装することもできます。この場合は、

src/main/resources/templates/error ディレクトリに
ステータスコードに対応するエラーページを用意

します。たとえば、404エラーの場合は src/main/resources/templates/error/404.html を用意します。

<!-- src/main/resources/templates/error/404.html -->
<!DOCTYPE html>
<html lang="ja"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layout/layout}"
>
<head>
    <title>お探しのページは見つかりません</title>
</head>
<body>
<section layout:fragment="content">
    <div class="text-center">
        <h1 class="display-1">404 Not Found</h1>
        <p>お探しのページは見つかりません</p>
        <a th:href="@{/}" class="btn btn-primary mt-3">トップページに戻る</a>
    </div>
</section>
</body>
</html>

実装例 #1 の error.html を実装しつつ、個別にメッセージを変えたいステータスコードがある場合は、実装例 #2 のように個別にエラーページを実装すると良いでしょう。

まとめ：忘れがちなエラーページもアプリケーションの重要な要素

エラーページは、ユーザーエクスペリエンスの向上とアプリケーションのセキュリティを保つ上で欠かせません。正常系のことに注意が向きがちですが、エラーページもアプリケーションの重要な要素であることを忘れないようにしましょう。

エラーメッセージは、ユーザーが次のアクションを迷わず取れるようにガイドする役割を果たします
セキュリティの観点から、エラーページは悪意のあるユーザーに対してアプリケーションの詳細情報を漏らさないバリアとなります

適切なエラーページの設計と実装により、サイトを安全かつ使いやすく保つようにしましょう。