昨日、チェックボックスのカスタムフィールドの実装について質問されたことをまとめてみました。 チェックボックスの4つの実装方法を考えて、実際に実装してみた方法をご紹介してみます。

1. カスタムフィールドの値を表示するだけ
2. フィールド毎にラベルのカラーを変更する（通常版）
3. フィールド毎にラベルのカラーを変更する（オリジナル校正オプション版）
4. チェックの無い項目も表示させたい場合

markdown の記法で p の中で改行をしたいときには、行末に（半角スペース）＋（半角スペース）＋（改行）という半角スペースを2つ入れる必要があります。これを知らない人って多いんじゃないのではないかと思います。

Ver.2.11から、セキュリティ対策としてXSS（クロスサイトスクリプティング）を防止するため校正オプションを指定していた時もエスケープ処理が自動で行われるようになりました。これにより、一部のカスタムフィールドなどの変数の表示に不具合が出る可能性があります。

概要

以前まではお問い合わせフォームに エスケープ処理を忘れてしまうこと が理由となり、カスタマイズする際に脆弱性を作り込んでしまう問題 が多く見られました。同じような問題が発生しないようにするため、対策としてすでに校正オプションが適用されていた場合もエスケープ処理をする仕様に変更となりました。

これにより校正オプションが1つでも提供されている変数にHTMLの記述があった場合、HTMLの記述が文字列として表示されます。カスタマイズされている一部のサイトにはお手数をおかけいたしますが、ご理解のほどよろしくお願いいたします。

例：校正オプションnl2brを適用した変数に起こる現象

具体的な問題の解説

Ver.2.10以前までの記述

以前から変数に対して自動でエスケープ処理が行われていましたが、お問い合わせフォームなどで1つ以上校正オプションを適用している場合は、XSS（クロスサイトスクリプティング）対策をするためパイプで繋げて別途エスケープ処理をする必要がありました。ですが、実際にはエスケープ処理をする校正オプションを適用し忘れているサイトもあり、問題になることがありました。

エスケープ処理をした記述例：

<p>{text}[escape|nl2br]</p> <!-- nl2brと合わせて使用するときの記述 -->
<div>{text}[escape|markdown]</div> <!-- markdownと合わせて使用するときの記述 -->

Ver.2.11以降の変更

そこで、Ver.2.11からは1つ以上の校正オプションが適用されていても、自動でエスケープ処理が行われるようになりました。お問い合わせフォームで利用する際は、下記の記述例のように1つの校正オプションで済むようになります。

<p>{text}[nl2br]</p> <!-- nl2brと合わせて使用するときの記述 -->
<div>{text}[markdown]</div> <!-- markdownと合わせて使用するときの記述 -->

問題が起こるケース

一方でVer.2.11以降では、カスタムフィールドにHTMLなどのソースコードが記述されていると、ソースコードが展開できないように特定の文字が実体参照に変換されてしまいます。（例：「<」、「>」、「&」、「"」など）

以下の箇所で影響が出る場合があります。

• カスタムフィールド
• カスタムユニット
• 拡張ユニット
• そのほか変数を利用している箇所

防止するためには、アップデートをする前に、校正オプションを適用していてHTMLの記述を要する変数には[raw]校正オプションを適用してください。

記述例：

<p>{text}[raw|nl2br]</p> <!-- nl2brと合わせて使用するときの記述 -->
<div>{text}[raw|markdown]</div> <!-- markdownと合わせて使用するときの記述 -->

校正オプションの記述方法についてはリファレンスをご覧ください。

• 校正オプション | リファレンス | ドキュメント | a-blog cms developer

ご不明な点があったときは

この件についてなにかご不明な点がございましたら、お問い合わせフォームまでご連絡ください。

日々使いやすいシステムとなるよう改善を勤めておりますので、皆様からの貴重なフィードバック、お待ちしております。

この記事では、先日メールサポートで質問をいただいたメディアに登録したPDFのサムネイル画像にresizeImgの校正オプションを適用する方法についてご紹介します。

PDFのサムネイル画像をカスタムフィールドで表示するためには、{hoge@thumbnail}のような変数を使いますが、resizeImgの校正オプションは/media/001/xxxx.jpgではなく、/001/xxxx.jpgのように/media/を含まないパスでしか扱えない仕組みとなっております。

そこで、PDFのサムネイル画像を表示する{hoge@thumbnail}（出力結果：/media/001/xxxx.jpg）でもresizeImgを使用する方法を本記事でご紹介します。

substring 校正オプションを新しく追加して、適用する

「/media」を削除する校正オプションを追加する校正オプションを追加し、適用しましょう。

まず、config.server.phpのHOOK_ENABLEの項目を1にします。

そして、 /extension/acms/Corrector.php を開き、class Corrector { ... } の部分に以下を記述してください。

public function substring($txt, $args = array())
{
    $start = isset($args[0]) ? $args[0] : 0;
    $length = isset($args[1]) ? $args[1] : false;
    if ($length === false) {
        return substr($txt, $start);
    }
    return substr($txt, $start, $length);
}

校正オプションの拡張についての詳しい説明は下記のドキュメントをご覧ください。

• 校正オプションの拡張について

{hoge@thumbnail}を表示したいHTMLのテンプレートを開き、 以下のように記述します。

<img src="%{MEDIA_ARCHIVES_DIR}{hoge@thumbnail}[substring(6)|resizeImg(300)]" alt="{hoge@alt}" />

[substring(6)]という校正オプションは、冒頭から6文字目までを削除します。今回の場合は、校正オプション適用前は「/media/001/xxxx.jpg」と出力されてしまうので、適用後は「/001/xxxx.jpg」のみを表示できるようになります。

さらにパイプ（|）でresizeImgを繋げることで、{hoge@thumbnail}に2つの校正オプションを適用しています。

最後に

splitの校正オプションもとても便利ではありますが、たとえば、「3つ目の/から4つめの/までの値を取り除く」という指定になってしまうので、今回のような問題の場合は記述が冗長になってしまいます。冒頭の何文字目かを削除したいという場合は今回のsubstring校正オプションを追加し、ご使用いただくのがHTMLファイルの記述ががシンプルになり、便利かと思います。

今回はPDFのサムネイル画像にresizeImgを適用する方法を一例としてご紹介しましたが、他の手段においてもご活用いただけると幸いです。