freo設置ディレクトリをルートURLで表示させる

以下の内容は2012年に書いたものをサルベージしそのまま転記しています。

例えば、サイト URL が http://example.com/ の時に、freo スクリプト一式を「freo」というディレクトリにアップしたとします。

そのままだと freo で作ったトップページには「http://example.com/freo/」でないと表示できませんが、これを「http://example.com/」で表示させるようにする方法の説明です。

準備

まずは「URLの簡略化(mod_rewrite)について」に従って設定をしてください(コメントでのご指摘ありがとうございました)。

使うものは .htaccess

すでに「/freo/」ディレクトリでのセットアップが完了した後の作業になります。

RewriteEngine on
RewriteBase /
RewriteRule ^$ freo/ [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.+)$ freo/$1 [L]

最後改行しておいてください(必要かどうか未確認ですが一応)。これを「http://example.com/」直下に置きます。

「http://example.com/」にアクセスして freo で構築したトップページが表示できることを確認したら(この時表示が崩れているかもしれません)、「/freo/config.php」の29・30行目を、

//設置URL
define('FREO_HTTP_URL', 'http://example.com/');

のようにルート URL に修正し上書きアップしてください。

freo(tinymce)でシンタックスハイライト

特定層以外に需要のなさそうなカスタマイズ話。ソースコードをきれいに色分けして見やすく表示(シンタックスハイライト)したい!というカスタマイズです。以前の当サイトでは

なんかを利用していました。ただ前者は使っていた当時、体感的に少し重いような気がしたのと現在は更新停止して数年経過しており、後者は使うときに割と煩雑な手順が必要だったイメージもあり(今調べてみると「google-code-prettify」のほうは今も更新が続けられていて導入もかなり簡単になっているようです)、ほかに何か新しいものはないかなぁと調べてみました。

そこで見つけたのが「prism.js」です。

超軽量でシンプルなprism.js

特徴やメリットデメリット、導入方法は「ほんっとにはじめてのHTML5とCSS3:(ちょっとメモ)Prism の使い方(SyntaxHighlighterから乗り換えた)」に詳しく説明されています。私も参考にさせていただきました。

私がPrismがいいなと思ったのは以下の2点です。

  • 軽量であること
  • ソースコードの記述がW3C推奨の形であること

というわけで早速導入してみました。

Prism導入方法

詳しくは上記で紹介したページをご覧ください。簡潔に言うとPrismからダウンロードしたJSファイルとCSSファイルをアップロードしてfreoのテンプレートファイルに読み込ませるだけです。

「template > header.html」の</head>直前辺り
<link href="{$freo.core.http_url}{$smarty.const.FREO_CSS_DIR}prism.css" rel="stylesheet">​
「template > footer.html」の</body>直前辺り
<script src="{$freo.core.http_url}{$smarty.const.FREO_JS_DIR}prism.js"></script>

上記のコード例はprism.cssとprism.jsをそれぞれfreoのcssフォルダとjsフォルダに設置した場合の記述です。ファイルを置く場所によって適宜書き換えてください。

実際にソースコードをシンタックスハイライトさせて表示するには<pre>要素の中に <code>要素を入れて、<code>要素に「class属性」で「language-xxxx」という記述で「言語」を指定します。

<pre><code class="language-markup">HTML</code></pre>
<pre><code class="language-css">CSS</code></pre>
<pre><code class="language-js">JavaScript</code></pre>

で、ものぐさな私はこの記述を簡単にできる方法はないもんかと思いました。ありました。

tinymceでソースコードの記述を手軽に

このprism.js、tinymceのプラグインがあるんですね。しかもfreo1.20.0装備のtinymce4にはデフォでついている…(それ以前のものにもあったのかもですが気づいてなかったため解りません)!

「js > admin.js」の//TinyMCEより下

	plugins: [
		'advlist autolink lists link image charmap print preview anchor',
		'searchreplace visualblocks code fullscreen',
		'insertdatetime media table contextmenu paste code'
	],​

codeの後に半角スペース開けてcodesampleと書きます。さらにその下の

	toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',

の末尾にも半角スペース開けてcodesampleと追加します。編集済みのadmin.jsを上書きアップロード。ソースコード記述用のボタンが表示されます。

以下にそのボタンを使ってソースコードを記述してる様子の動画を置いておきます(ツールバーに他にも自分でボタンを追加してるので、freoデフォルトの投稿画面と表示が異なるかもしれません)。

簡単簡単~。ただこの方法で生成されるコード、

<pre class="language-markup">
<code>example</code>
</pre>

てなっちゃってるんですよね。W3Cでは<code>にclass属性つけろってなってるんですけど…そこはちょっと気になる。

WAF有効でも403エラーを回避する

レンタルサーバーにfreoを設置して管理画面でファイルの書き換えをしようとすると、403エラーになってしまい書き換えができなかったりします。これは、freoに限らずwordpressなどのCMSでも起こる現象のようです。原因の一つとして「WAFが有効であること」が挙げられます。対処法をググると「WAFを無効にする」が沢山ヒットし、そうか…と思って私も無効にしていたんですが。

WAFとは

そもそもWAFとはウェブアプリケーションファイアウォールの略であり、Webアプリケーションのやり取りを把握・管理することによって不正侵入を防御することのできるファイアウォール…つまりサイトのセキュリティを守るシステムなのです。そんなほいほいと無効にしてもいいのか?とふと思ったんですね。そこで初めて自分のサイトの状況を確認してみました。

WAFのログを確認

以下はロリポップ!のユーザーページですが他のレンタルサーバでもそんなに変わらないと思います。

20180115-1.jpg

  • ①をクリックしWAF設定ページへ
  • 対象サイトURL横の②で有効無効を切り替え

なのですが今回は③の「ログ参照」をクリック。当然ですが「無効」になってる間はログの記録はありません。

不正侵入未遂の痕跡

20180115-2.jpg

すると驚いたことに(?)自分がfreoの操作をして403エラーを食らった以外に弾かれていたアクセスの痕跡があったのでした…。これはやはり有効にしておいたほうが安心なのでは…?と。

そこでなんとかWAF有効のままCMSの操作でエラーが出ない方法はないかと調べてみました。ありました。

WAFで特定シグネチャを除外

まず、WAFを無効にしている場合は有効に切り替えます。サーバーによってはこの切り替えが反映されるまで少し時間がかかる場合がありますので待ちましょう。反映されたかな…?というタイミングでおもむろにfreoの「メディア管理」「ファイル管理」などでファイルの書き換えを行います。403エラーを食らいます。サーバーのユーザーページのWAFのログを確認します。

20180115-3.jpg

この下段に表示される文字列が「シグネチャ名」になります。ここでは例として「example-1」とします。この文字列を、freo設置ディレクトリ直下の.htaccessに以下のように記述します。

<IfModule siteguard_module>
SiteGuard_User_ExcludeSig example-1
</IfModule>

すでに何か記述されている場合、末尾に上記を追加すればOKです。あとはWAF有効のままでもfreoでファイルの書き換えができるかどうか試してみてください。

以下追記です。

上記の記述だと、ほかの操作が引っ掛かった場合にはまた「シグネチャ名」を追加せねばなりません。また、この設定をした場合、その検出ルール全体がオフになってしまいますので、セキュリティが低下する恐れもあります。そこで

WAFで特定IPを除外

という方法もあります。(※ロリポップ!では有効な記述ではないようです…ションボリ)

<IfModule mod_siteguard.c>
  SiteGuard_User_ExcludeSig ip(xxx.xxx.xx.x)
</IfModule>

お久しぶりです

Photo by ガーリードロップ

当サイトが閲覧不可状態になって早数年、皆さんお元気でしたでしょうか。長い間実質閉鎖状態となっておりましたが去年久々にfreoがアップデートしたことをきっかけにようやっとこちらも復旧させようと動き出しました。

と言ってもお休みしていた間に自PCの不調によるクリーンインストール・とうとう完全にダメになって買い替えなどを経て元のサイトデータを誤って吹っ飛ばしてしまい…外部メディアに保存していたような気もしますがそれ自体もどこにあるかわからずというどーしよもないことになってます。つらい。webアーカイブで拾えてかつ今も有用そうなコンテンツはそこから、あとは一から出直しになります。よろしければ気長にお付き合いください。

<!doctype html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	
</body>
</html>

サイト動作環境

Recent Entries

2018-01-18
freo設置ディレクトリをルートURLで表示させる
2018-01-16
freo(tinymce)でシンタックスハイライト
2018-01-15
WAF有効でも403エラーを回避する
2018-01-13
お久しぶりです

Categories

Tags

Archives

2018年
01月

Recent Images

  • WAF有効でも403エラーを回避する
  • Photo by ガーリードロップ

Utility Link

Page Top