hetemlを利用でCode Snippets利用時に403エラーが出た場合の対処方法

WordPressをhetemlで利用していて、function.phpを簡単にいじることができるプラグインの「Code Snippets」を入れて利用した場合、更新ボタンや保存ボタンを押すと403エラーが出るケースがあります。

私も同じ症状がでてしまい、解決策が無いのかとかなり悩んでいろいろ調べてみたところ、原因は、hetemlのサーバーで設定できるWAF(ウェブアプリケーションファイアウォール)の問題でした。今後同じ症状が出た場合の対処方法としての備忘録として残しておきます。

この記事を書いた人

NORI( ブロガー/ドローンオペレーター )

Apple製品の他、カメラやドローンが好きです。趣味で2021年から登山やキャンプもはじめました。国交省全国包括許可承認取得済 三陸特/アマ無線4級/DJI CAMPスペシャリストを取得。運営者の詳しい情報はこちら

heteml（ヘテムル）のWAFとは

WAF（ウェブアプリケーションファイアウォール）とは簡単にいうと、コントロールパネルからワンクリックで簡単に設定できるセキュリティー対策です。これまでのファイアウォールなどでは防御できなかった攻撃（不正なアクセス）を検知しサイトを守ってくれる機能となってます。

しかし、WordPress等のPHPを使ったのサイトの場合には、このWAFをONにすることで、PHP等のプログラムの動作に影響が出る可能性があると公式HPに記載があります。私の場合も、セキュリティー対策の為に、特定ドメインのWAFをONにしており、今回の場合はまさにこれに該当しておりました。

403エラーが起きた事象

起きた事象は、function.phpに追加のコードを記載する為に、「Code Snippets」に追加したコードを保存しようと、以下の画像のとおりボタンを押したところ。。。403エラー(Forbidden)の発動！！

結構ビビります。思わず声が出てしまいます。

function.phpを直接いじるのはかなり怖いです。調子に乗って直接いじってサーバーにアップして、サイトが真っ白くなるパターンがよくあります。（私も昔よく経験してました）

なので、手軽にfunction.phpを追加して、ON、OFFできるプラグインである「Code Snippets」を利用するメリットは非常に大きいのですが、403エラーが出るため動かない！！

403エラー(Forbidden)になる場合の回避方法

このエラーを回避する方法は、hetemlのコントロールパネルにログインして、「各種設定」の中にある、「WAF設定」をクリック。該当の事象が起きているドメインの「詳細を見る」ボタンをクリックすると、WAFのログを確認することができます。

ここで、さきほどCode Snippetsで保存を押した時間がわかれば、その時間と同時刻のエラーを確認します。もしくは別ブラウザで立ち上げて同じようにボタンを押してみて、どのようなエラーが吐き出されるのか、以下の画像を参考に確認してみてください。

エラー出力参考例

WAFの検知ログで表示されている除外記述を.htaccessファイルに追記することで、Code Snippetsで保存ボタンを押したときに、403エラー(Forbidden)になること防ぐことが可能になります。

Code Snippetsはfunction.phpを直接触らないまでも、近いことをしているので、WAFが動作して拒否するのは理にかなっていると言えばかなってますが、WordPressのカスタマイズをする際には、必要ないところまでセキュリティー対策がされてしまうのが難点です。

あとは以下のリンクを参考に、.htaccessによる除外記述を追記してあげればOKです。

Macを利用して .htaccessなどの隠しファイルや隠しフォルダを一瞬で表示させる方法

.htaccessによる除外記述の方法 – heteml

参考記述例

私の場合は、全部で4つ記述することでCode Snippetsの保存ボタンが機能して正常に保存されるようになりました。必ずしもひとつは限らないので、ボタンを押してWAFに記述されるログを見ながら、それを.htaccessに追記していくことをおすすめします。

WordPressをサカスタマイズする上での注意点

WordPressのカスタマイズをするにあたり、functions.phpの編集が必要となる時は必ずファイルをバックアップしておいてください。バックアップファイルがあれば、万が一コードのミスで画面が表示されなくなったり、真っ白くなったりした場合でも、バックアップファイルで元に戻すことができます。

最悪、自分が今まで頑張って作り上げてきたサイトが元に戻せなる可能性もあります。私も過去何度か経験しました（汗）

Code Snippetsを使って403エラーが出た場合の対処方法のまとめ

本記事は、Code Snippetsを使って403エラーが出た場合の対処方法についての回避策をまとめた解説記事です。

デザインの仕事をしていると、プログラマーやエンジニアとは違うので、サーバー周りには非常に弱いのですが、調べていくうちにいろいろと勉強になりました。

hetemlを利用していて、WordPressに入れたプラグインを使った場合に403エラーを返す場合、まずはWAFの検知ログを確認してみてください。もしかすると、ここで引っかかってるケースが大半かと思います。その場合は.htaccessに除外記述を追記することで解決するはずです。

同じような症状が出てる方がおりましたら是非参考にしてみてください。

以上、NORI（@norilog4）でした。

WordPress プラグインの解説記事

WordPressの functions.php を安全に管理・追加できるプライグイン「Code Snippets」