自前でデザインする403ページ

ヘッダ画像

オリジナルの403ページを表示しよう

403とはウェブページに対するリクエストへのサーバからのレスポンスコードです。
おもな原因は権限のないアクセスですが、WordPressでのプログラム的なエラーでも403でページにアクセスできなくなるケースが発生します。

WordPressサイト真っ白を復旧
WordPressサイト真っ白を復旧

WordPressのテーマカスタマイズ中に画面が真っ白になってしまった... これは502や503エラー... 焦りますねぇ!! このような場合はまずダッシュボード=管理画面にアクセスできるか確認します。 なんとかダッシュボードにアクセスできるようであれば、テ […]

403ページとは不吉なもの(笑
かならずしもそうでもないのですが、この記事はその解消方法ではなく、その際に表示するエラーページについての解説です。

WordPressで構築したサイトのほとんどはページが見つからない場合の404ページ(Page Not Found)が用意されています。
テンプレートに404.phpを用意することで任意のエラーページを表示させることができますが、許可されていないアクセスに対する403(Forbidden)はサーバのデフォルト表示になります。
どうせなら、403エラーもオリジナルページを表示させたいものですよね。

デフォルトの403ページ

レンタルサーバなどホスティングサービスであらかじめ用意されている403ページはやはり味気ないです。
たとえば、ロリポップだとこんな感じです。
コーポレートやECサイト系ではいただけませんよね。

ロリポップの403ページ

オリジナルの403ページを表示

ということで、403エラー時にオリジナルページを表示させてみましょう。
htaccessを使える場合は手順としてはそれほど難しくなく、基本は下記の2工程のみです。

  1. ページを用意
  2. エラー発生時にこのファイルを表示させる

403.hmtlを静的HTMLファイルとして作成してルート直下にアップロードします。
シンプルに文字コードとviewportの指定のみで書くと、このような感じでしょうか。

<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1"> </head>
<body>
  <div>
    <h1>HTTP 403 Error</h1>
    <h2>Forbidden</h2>
  </div>
</body>
</html>

この場合のhtaccessへの追記は以下です。

ErrorDocument 403 /403.html

WordPressの場合は404のようにテーマ内に403テンプレートを用意する方法もあります。

ErrorDocument 403 /wp-content/themes/themes-name/403.php

念のためにステータスコードが転送の301ではなく、きちんと403が返ることを確認ください。
ステータスコードチェッカー
ダンプ出力してステータスコードを確認することもできます。

<?php var_dump(http_response_code());?>
※Xserverのように、エラーページはコントロールパネル上で設定を行う必要があるケースもあるようです。
htaccessでの指定でうまくいかない場合は各サービスに確認ください。

意図的に403を発生させる

検証のために403発生させる必要がありますね。
基本的に閲覧権限のないファイルへのアクセスは403となりますので、test.htmlなど適当なファイルをサーバ内に設置して、パーミッションを660や640にします。
このファイルにアクセスすることで意図的に403を発生させることができます。

403ページの例

サンプルとしてこのサイトのルート直下にjsという一般のアクセスを許可していないフォルダを作成していますので、アクセスしてみてください。
オリジナルの403ページが表示されます。
https://seous.info/js/

ちなみにこちらはこのサイトのダッシュボードへの通常のログインURLです。
https://seous.info/wp-login.php

わたしは乗っ取り被害の多いWordPressのログインURLは自前の仕組みで変更しており、wp-login.phpへのアクセスにも403を返しています。

この403はシンプルなページですが、ベースにされたい方はご自由にお使いください。
画像もBase64でエンコードしてHTMLに埋め込んでおり、1ファイルで完結します。
テーマに追加、かつ、PHPで何らかの制御を行う場合は403.phpとして、必要な追記を行います。
403ページサンプルダウンロード

エラーページにもオリジナリティが必要!?

実際のところ、意図的に403にアクセスしてくるユーザーは微妙です。
ただ、404などのエラーページはアクセスしたユーザーが困らないように案内するというのはもちろんのこと、せっかく拾ったアクセスを有効につなげるという意識は大切でみなさん工夫されているようです。

ちなみにこのサイトの404ページはこのような感じです。
カスタムフィールドでアクセスをカウントして、サイドバーに自前の人気記事を表示していますが、これを404ページにも表示しています。
https://seous.info/404

リコメンドを意識して、人気記事をリスト表示する・ショップ系だと売れ筋商品を掲載するなど、その先を見てみようという工夫がエラーページにも必要ですね。
魅力的なエラーページのサイトを探してみてもおもしろいかもしれませんね!

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です


The reCAPTCHA verification period has expired. Please reload the page.



関連記事