403とはウェブページに対するリクエストへのサーバからのレスポンスコードです。
おもな原因は権限のないアクセスですが、WordPressでのプログラム的なエラーでも403でページにアクセスできなくなるケースが発生します。
403ページとは不吉なもの(笑
かならずしもそうでもないのですが、この記事はその解消方法ではなく、その際に表示するエラーページについての解説です。
WordPressで構築したサイトのほとんどはページが見つからない場合の404ページ(Page Not Found)が用意されています。
テンプレートに404.php
を用意することで任意のエラーページを表示させることができますが、許可されていないアクセスに対する403(Forbidden)はサーバのデフォルト表示になります。
どうせなら、403エラーもオリジナルページを表示させたいものですよね。
デフォルトの403ページ
レンタルサーバなどホスティングサービスであらかじめ用意されている403ページはやはり味気ないです。
たとえば、ロリポップだとこんな感じです。
コーポレートやECサイト系ではいただけませんよね。
オリジナルの403ページを表示
ということで、403エラー時にオリジナルページを表示させてみましょう。
htaccessを使える場合は手順としてはそれほど難しくなく、基本は下記の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());?>
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などのエラーページはアクセスしたユーザーが困らないように案内するというのはもちろんのこと、せっかく拾ったアクセスを有効につなげるという意識は大切でみなさん工夫されているようです。
リコメンドを意識して人気記事をリスト表示する、ショップ系だと売れ筋商品を掲載するなど、その先を見てみようという工夫がエラーページにも必要ですね。
魅力的なエラーページのサイトを探してみてもおもしろいかもしれませんね!