Develop テーマとは、フロントエンドの開発環境が整備された a-blog cms の公式テーマです。

Develop テーマは a-blog cms を開発する際によく使うテンプレートをシンプルにしたものが同梱されており、独自のデザイン・レイアウトでテーマ開発する場合に最適なテーマです。

また、テンプレートは a-blog cms Ver. 3.2 から導入された Twig テンプレートを利用して記述されており、より保守性・再利用性に優れたテーマを開発することができます。

ツールについて

Develop テーマでは次のようなツールを導入してしています。

Tailwind CSS （ユーティリティファーストCSSフレームワーク）
Alpine.js （HTMLに直接振る舞いを記述できるようにするJavaScriptフレームワーク）
htmx （HTML の属性だけで Ajax や部分更新、履歴管理といった高度なインタラクションを実現できる軽量な JavaScript ライブラリ）
Vite （高速なフロントエンドビルドツール）

また、これらを快適に使用できるように、 EditorConfig、ESLint、Prettier、Stylelint の設定が組み込まれています。

バンドル環境の使い方

インストール

themes/develop/ に移動して、下記のコマンドを実行します。実行することでビルドに必要なツールなどがインストールされます。

$ npm install

npm コマンド自体が存在しない場合、Node.js をインストールすることで npm コマンドが有効になります。Node.js はこちらのサイトからインストールできます。

ビルドコマンド

本番用ビルド

cssのbuildとjsのbuildを行います。 納品時にはこのコマンドを実行して納品してください。 JavaScriptが productionビルドとなります。

$ npm run build

また、本番ビルドしたCSSとJavaScriptを利用する場合は a-blog cms 設置ディレクトリの .env ファイルで、VITE_ENVIRONMENT に production を指定します。

# Vite
VITE_ENVIRONMENT=production # development | production

開発用ビルド

以下のコマンドを実行すると、cssとjsの変更をwatchしてビルドを行います。余分なコードが入ったり、最適化されないため納品時には必ず npm run build しましょう。

$ npm run dev

また、開発用にビルドしたCSSとJavaScriptを利用する場合は a-blog cms 設置ディレクトリの .env ファイルで、VITE_ENVIRONMENT に development を指定します。

# Vite
VITE_ENVIRONMENT=development # development | production

Vite 連携について詳しくはドキュメントを御覧ください。

組み込みJSの読み込みについて

JavaScriptは、include/head/js.twig で読んでいます。 Develop テーマではパフォーマンス向上のために、Touch_SessionWithContributionを使って、投稿者以上以上の場合だけ読み込むようにしています。

{% if touch('Touch_SessionWithContribution') %}
<script src="{{ JS_LIB_JQUERY_DIR }}jquery-{{JS_LIB_JQUERY_DIR_VERSION}}.min.js" charset="UTF-8"></script>
<script src="{{ ROOT_DIR }}acms.js{{ js.arguments }}" charset="UTF-8" id="acms-js"></script>
{% endif %}

組み込みJSを読まないようにすると、スライダーや、画像ビューワーなどの組み込みJSが動作しなくなりますが、一部のよく利用する組み込みJSをsrc/js/lib/buildIn/に実装し、src/js/main.jsで読み込んでいます。

import {
  // 組み込みJS
} from './lib/buildIn/';

これ以外に必要な機能やライブラリは、自分でインストール、実装する必要があります。バンドル環境が整っていますので、 npm経由でライブラリをもってきて、 importする方式をお勧めします。以下 lazy load を実装する例になります。

$ npm i vanilla-lazyload

import LazyLoad from 'vanilla-lazyload';

domContentLoaded(() => {
  new LazyLoad({elements_selector: '.js-lazy-load'});
});

JVNで報告された脆弱性への対応について

a-blog cms で脆弱性が見つかりました。該当の状況に当てはまる場合は大変お手数ですが以下のご対応をお願いいたします。

JVN識別番号

JVN#48443978

今回は見つかった脆弱性は「Ping送信機能のディレクトリトラバーサル」になります。

Ping機能の脆弱性

内容

編集者以上で利用できるPing送信機能を使用する事で、任意のファイル情報を閲覧することが可能。

攻撃条件

攻撃者が編集者以上の権限でログイン可能なこと

影響を受けるバージョン

a-blog cms Ver. 3.1.9 以下のバージョン (Ver.3.1.x系)
a-blog cms Ver. 3.0.30 以下のバージョン (Ver.3.0.x系)
a-blog cms Ver. 2.11.59 以下のバージョン (Ver.2.11.x系)
a-blog cms Ver. 2.10.51 以下のバージョン (Ver.2.10.x系)
a-blog cms Ver. 2.9.x 以下のバージョン（フィックスバージョンはありません）

ワークアラウンド（回避方法）

以下ファイルを削除することで、Ping送信機能を無効にでき、今回の脆弱性を回避できます。

php/ACMS/POST/PingWeblogUpdate.php

CMSバージョンアップによる対応

Ping送信機能を利用したい場合は、CMSのアップデートをご検討ください。

各マイナーバージョン毎にフィックスバージョンがリリースしております。「影響を受けるバージョン」よりも新しいフィックスバージョンにアップデートを行なってください。

最後に

この度はご迷惑をおかけしてしまい大変申し訳ございません。
該当する問題がありましたら、お早めにバージョンアップのご検討をお願いいたします。また、迅速にご報告いただいたユーザーの皆さま、誠にありがとうございました。

今後もご報告いただいた内容に対して真摯に受け止め修正と改善を行ってまいります。よろしくお願いいたします。

本件に関するお問い合わせ先

本件についてご不明点などありましたら以下のお問い合わせよりご連絡ください。

有限会社アップルップル
メールアドレス：info@a-blogcms.jp
お問い合わせフォーム：https://www.a-blogcms.jp/contact/

リッチエディターユニット

リッチエディターユニットは Ver. 3.2 より非推奨になりました。今後はブロックエディターユニットをご利用ください。

リッチエディターユニットとはVer.2.11から追加された、ブロックでHTMLを記述できるエディター（SmartBlock）を搭載したユニットです。

ブロックにカーソルを合わせると以下のような見た目になります。

リッチエディター（SmartBlock）の特徴

余分なタグが入らない

あらかじめ設定したタグ以外の情報が一切入りません。そのため、一般的なエディターでよくあるような、意図しないタグが知らない間に挿入されているといったことが起こりません。また他のページの内容をコピー、ペーストした際もあらかじめ設定したタグ以上の情報は入りません。

ブロックベースの考え方

また、ブロックベースの考え方でできているため、見出しと本文を入れ替えたり画像と本文を入れ替えたり、順番の制御が容易に行えます。

カスタマイズ性

SmartBlockはカスタマイズ性にもすぐれ、JavaScriptにそれほど精通していない人でも独自のブロックを作成することができます。

導入方法

デフォルトでは追加ユニットのボタン群にリッチエディターボタンが追加されていないので、追加しましょう。 管理画面 > コンフィグ > 編集設定 の順にページを移動し、ユニット追加ボタンより以下のようにリッチエディターを追加してください。

その後、エントリー編集画面に行くと以下のようにボタンが追加されているのが確認できます。

ボタンをクリック後、下図のような見た目でユニットが表示されます。

リッチエディターで利用できるデフォルトのブロック

デフォルトでは、本文ブロック、見出し2ブロック、見出し3ブロック、リストブロック、番号付きリストブロック、引用ブロック、メディアブロックが利用できます。

本文ブロック

見出し2ブロック

見出し3ブロック

リストブロック

番号付きリストブロック

引用ブロック

メディアブロック

リッチエディターにブロックを追加する

また、デフォルトで使えるブロック以外にも、テーブルブロック、ハイライトブロック、カスタムブロックが利用できます。

追加するにはJavaScriptを記述する必要があり、acms.jsの読み込み以降に ACMS.Ready関数を記述してください。以下はhead要素内の記述例です。

<script src="%{JS_LIB_JQUERY_DIR}jquery-%{JS_LIB_JQUERY_DIR_VERSION}.min.js"></script>
<!-- BEGIN_MODULE Js -->
<script src="%{ROOT_DIR}acms.js{arguments}" id="acms-js"></script><!-- END_MODULE Js -->
<!-- BEGIN_MODULE Touch_Unlogin --><!-- BEGIN_MODULE Blog_Field -->{google_analytics}[raw]<!-- END_MODULE Blog_Field --><!-- END_MODULE Touch_Unlogin -->
<script>
ACMS.Ready(function() {
  // ここに処理を書いていく
});
</script>

テーブルブロックを追加する

以下のJavaScriptを記述することでテーブルブロックを追加できます。

ACMS.Config.SmartBlockAdds = function(Extensions) {
    return [new Extensions.Table()];
};

以下のような見た目のブロックが出現し、行の追加・削除、列の追加・削除などテーブルを編集できるようになります。

テーブルブロック

セルを複数選択することで、セルの結合解除なども可能です。

テーブルブロック

コードブロックを追加する

またエンジニアには嬉しいコードブロックもあります。こちらは入力するたびに書いたソースコードがハイライトされるブロックです。以下のJavaScriptを記述することでコードブロックを追加できます。

ACMS.Config.SmartBlockAdds = function(Extensions) {
    return [new Extensions.Code()];
};

コードブロック

カスタムブロックを追加する

また独自にブロックを定義して追加することも可能です。

ACMS.Config.SmartBlockAdds = function(Extensions) {
  return [
  new Extensions.CustomBlock({
     tagName: 'div',
     className: 'acms-alert',
     customName: 'alert',
     icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 1792 1792"><title>アラート</title><path d="M1777.67,1567.49,960.05,49.07c-35.23-65.43-92.87-65.43-128.1,0L14.33,1567.49c-35.22,65.43-3.25,119,71.06,119H1706.61C1780.92,1686.45,1812.89,1632.92,1777.67,1567.49ZM1024,1536H768V1280h256Zm0-384H768L704,576h384Z"/></svg>'
  })
  ]
};

オリジナルブロック

カスタムブロックには以下のようなオプションが指定できます。

プロパティ名	説明	記述例
tagName	HTML要素を指定	例）p
className	クラス名を指定	例）acms-text-error
customName	ユニークな名前を記述	例）error-text
icon	アイコンを挿入するときはHTMLタグを記述	例）'<i class="fa fa-user"></i>'

リッチエディターで利用できるデフォルトの装飾

また、リッチエディターでは以下の画像のように、インライン装飾をするための仕組みがあります。デフォルトでは、強調、アンダーライン、打ち消し線、リンクの装飾を施すことができます。

装飾を追加する

また存在しない装飾はブロックと同じように独自に定義して追加することができます。以下のソースコードは、redというclass属性が適用されたspan要素を追加するサンプルコードになります。

ACMS.Config.SmartBlockAdds = function(Extensions) {
  return [
   new Extensions.CustomMark({
	tagName: 'span',
	className: 'red', // 任意の項目です。class属性を指定する際はこの項目を記述してください
	customName: 'red-text',
	icon: '<svg>...</svg>' // SVGまたはimg要素が指定可能です
   })
  ]
};

複数の設定を追加する

複数の設定を追加するときは、「,（カンマ）」区切りで記述します。

ACMS.Config.SmartBlockAdds = function(Extensions) {
  return [
   new Extensions.CustomMark({
	tagName: 'span',
	className: 'red',
	customName: 'red-text',
	icon: '<svg>...</svg>' // SVGまたはimg要素が指定可能です
   }),
   new Extensions.CustomMark({
	tagName: 'span',
	className: 'blue',
	customName: 'blue-text',
	icon: '<svg>...</svg>' // SVGまたはimg要素が指定可能です
   })
  ]
};

JVNで報告された脆弱性への対応について

a-blog cms で複数の脆弱性が見つかりました。該当の状況に当てはまる場合は大変お手数ですが以下のご対応をお願いいたします。

JVN識別番号

JVN#70977403

今回は見つかった脆弱性は以下になります。

エントリー編集ページのクロスサイトスクリプティング（XSS）
Webhook機能のサーバーサイドリクエストフォージェリ（SSRF）
Webhook機能のコードインジェクション
スケジュールのラベル設定画面のクロスサイトスクリプティング（XSS）
フォーム機能（テンプレート指定）のディレクトリ・トラバーサル

エントリー編集ページのクロスサイトスクリプティング

内容

攻撃者が投稿者以上でログインし、エントリーに不正なコードを入力して保存して公開することにより、クロスサイトスクリプティングが発生します。

攻撃条件

攻撃者が 投稿者以上の権限でログイン可能なこと（＊不正ログインされる脆弱性はありません）
攻撃者が記事を公開できること

影響を受けるバージョン

a-blog cms Ver. 3.1.11 以下のバージョン (Ver.3.1.x系)
a-blog cms Ver. 3.0.31 以下のバージョン (Ver.3.0.x系)
a-blog cms Ver. 2.11.60 以下のバージョン (Ver.2.11.x系)
a-blog cms Ver. 2.10.52 以下のバージョン (Ver.2.10.x系)
a-blog cms Ver. 2.9.x 以下のバージョン（フィックスバージョンはありません）

ワークアラウンド（応急処置）

応急処置として、信頼されないユーザーにログインされるリスクを下げるため、コンフィグ > アクセス設定かIPアドレスによるログイン制限をかけたり、ユーザーのパスワードを複雑なものに変更ください。

CMSバージョンアップによる対応

対応バージョンの仕様変更

今回の対応で意図的に危険なタグを許可する校正オプション「」の仕様が変更されました。

今までの仕様

変数は「allow_dangerous_tag」校正オプションを付与しないと、全ての変数で危険なタグの削除を行う
上記より管理画面の変数も「allow_dangerous_tag」校正オプションを付与する必要がありました

新しい仕様

「allow_dangerous_tag」校正オプションを付与しなくても「raw」校正オプションが付与されていなければ、特にエスケープ処理のみで、危険なタグを削除したいしないように変更
基本管理画面は「raw」校正オプションはついていないので、管理画面の変数に「allow_dangerous_tag」校正オプションを付与する必要がなくなりました。

まとめると、新しい仕様では「raw」校正オプションが付与されている場合のみ、危険なタグを削除するかを「allow_dangerous_tag」校正オプションのあり・なしで設定するということになります。

詳しくはこちらをご覧くささい。【重要なお知らせ】変数の仕様変更について

Webhook機能のサーバーサイドリクエストフォージェリ

内容

攻撃者が管理者権限でログインして、Webhookの設定を不正に変更することで、サーバーサイドリクエストファージュリが発生します。

攻撃条件

攻撃者が 管理者権限でログイン可能なこと（＊不正ログインされる脆弱性はありません）
Hook機能が有効なこと（config.server.php「HOOK_ENABLE」デフォルトは無効です）

影響を受けるバージョン

a-blog cms Ver. 3.1.11 以下のバージョン (Ver.3.1.x系)
a-blog cms Ver. 3.0.31 以下のバージョン (Ver.3.0.x系)

ワークアラウンド（応急処置）

config.server.php を修正することで、Webhook機能を無効（デフォルト無効）にできます。もしWebhook機能を使用したい場合は、CMSのアップデートをご検討ください。

define('HOOK_ENABLE', 0); // 0 で無効

CMSバージョンアップによる対応

対応バージョンの仕様変更

セキュリティを高めるため、今回の脆弱性に対応したバージョンでは、Webhookの仕様変更がされています。

変更点１

WebhookのリクエストURLは、「.env」で許可したホストのみ保存・実装できるようになっております。 Webhookを利用する場合は「.env」で以下のように許可ホストを設定ください。

WEBHOOK_WHITE_LIST=hooks.slack.com,xxxxx.com # Webhookでリクエスト可能なホストをカンマ区切りで指定ください。

変更点２

ログのレスポンス表示は、デフォルトで表示できないようになっております。

レスポンスのログを表示するには、「.env」で「WEBHOOK_RESPONSE_VIEW」を「enable」に変更ください。

WEBHOOK_RESPONSE_VIEW=enable # (disabled|enable) WebhookのログにHTTPレスポンス情報を表示するかどうか設定します。セキュリティのため、確認する時のみ「enable」に設定ください。

Webhook機能のコードインジェクション

内容

攻撃者が管理者権限でログインして、Webhookのペイロード設定を不正に変更することで、コードインジェクションが発生します。

攻撃条件

攻撃者が 管理者権限でログイン可能なこと（＊不正ログインされる脆弱性はありません）
Hook機能が有効なこと（config.server.php「HOOK_ENABLE」デフォルトは無効です）

影響を受けるバージョン

a-blog cms Ver. 3.1.11 以下のバージョン (Ver.3.1.x系)
a-blog cms Ver. 3.0.31 以下のバージョン (Ver.3.0.x系)

ワークアラウンド（応急処置）

define('HOOK_ENABLE', 0); // 0 で無効

CMSバージョンアップによる対応

対応バージョンの仕様変更

今回の問題に対応するため、ペイロードのカスタマイズで利用するテンプレートエンジンをTwigに変更しました。 新しいテンプレートは Twig を使ったテンプレート表記に変更ください。

スケジュールのラベル設定画面のクロスサイトスクリプティング

内容

攻撃者が編集者でログインし、スケジュール機能の「ラベル設定」画面で、不正な値を設定することにより、クロスサイトスクリプティングが発生します。

攻撃条件

攻撃者が 編集者以上の権限でログイン可能なこと（＊不正ログインされる脆弱性はありません）
スケジュールを編集できること
別の編集者・管理者がスケジュールのラベル設定画面を閲覧すること

影響を受けるバージョン

a-blog cms Ver. 3.1.11 以下のバージョン (Ver.3.1.x系)
a-blog cms Ver. 3.0.31 以下のバージョン (Ver.3.0.x系)
a-blog cms Ver. 2.11.60 以下のバージョン (Ver.2.11.x系)
a-blog cms Ver. 2.10.52 以下のバージョン (Ver.2.10.x系)
a-blog cms Ver. 2.9.x 以下のバージョン（フィックスバージョンはありません）

ワークアラウンド（応急処置）

以下ファイルの修正をしてください。

php/ACMS/GET/Admin/Schedule/Labels.php: 36行目付近

修正前

$Tpl->add('label:loop', array(
    'sort'  => $sort,
    'name'  => isset($_label[0]) ? $_label[0] : '',
    'key'   => isset($_label[1]) ? $_label[1] : '',
    'class' => isset($_label[2]) ? $_label[2] : '',
    )
);

修正後

$Tpl->add('label:loop', array(
    'sort'  => $sort,
    'name'  => isset($_label[0]) ? $_label[0] : '',
    'key'   => isset($_label[1]) ? $_label[1] : '',
    'classStr' => isset($_label[2]) ? $_label[2] : '', // この行を修正 class => classStr
    )
);

ablogcms/themes/system/admin/schedule/edit-label.html: 74行目付近

修正前

<input type="text" name="schedule_label_class[]" value="{class}" class="acms-admin-form-width-full" />

修正後

<input type="text" name="schedule_label_class[]" value="{classStr}" class="acms-admin-form-width-full" /> <!-- class => classStr に変更 -->

CMSバージョンアップによる対応

フォーム機能（テンプレート指定）のディレクトリ・トラバーサル

内容

攻撃者が編集者以上でログインし、フォーム設定を不正な値に設定し、実際にフォームで送信することで、フォームのログ表示に任意のファイルの情報が表示されるディレクトリ・トラバーサルの脆弱性が発生します。

攻撃条件

攻撃者が 編集者以上の権限でログイン可能なこと（＊不正ログインされる脆弱性はありません）
テンプレートにフォーム機能が設置されていること . 攻撃者がフォームのログを確認できること

影響を受けるバージョン

a-blog cms Ver. 3.1.11 以下のバージョン (Ver.3.1.x系)
a-blog cms Ver. 3.0.31 以下のバージョン (Ver.3.0.x系)
a-blog cms Ver. 2.11.60 以下のバージョン (Ver.2.11.x系)
a-blog cms Ver. 2.10.52 以下のバージョン (Ver.2.10.x系)
a-blog cms Ver. 2.9.x 以下のバージョン（フィックスバージョンはありません）

ワークアラウンド（応急処置）

フォームの設定を変更されないように以下３つのファイル変更を行います。

php/ACMS/POST/Form/Update.php
php/ACMS/POST/Form/Insert.php
php/ACMS/POST/Form/Duplicate.php

各３つのファイルの「postメソッド」の先頭に「die();」を挿入してフォームを作成・更新・複製できないようにします。

public function post()
{
    die();
    ...

CMSバージョンアップによる対応

最後に

今後もご報告いただいた内容に対して真摯に受け止め修正と改善を行ってまいります。よろしくお願いいたします。

本件に関するお問い合わせ先

本件についてご不明点などありましたら以下のお問い合わせよりご連絡ください。

有限会社アップルップル
メールアドレス：info@a-blogcms.jp
お問い合わせフォーム：https://www.a-blogcms.jp/contact/

ツールについて

バンドル環境の使い方

インストール

ビルドコマンド

本番用ビルド

開発用ビルド

組み込みJSの読み込みについて

JVN識別番号

Ping機能の脆弱性

内容

攻撃条件

影響を受けるバージョン

ワークアラウンド（回避方法）

CMSバージョンアップによる対応

最後に

本件に関するお問い合わせ先

リッチエディター（SmartBlock）の特徴

余分なタグが入らない

ブロックベースの考え方

カスタマイズ性

導入方法

リッチエディターで利用できるデフォルトのブロック

リッチエディターにブロックを追加する

テーブルブロックを追加する

コードブロックを追加する

カスタムブロックを追加する

リッチエディターで利用できるデフォルトの装飾

装飾を追加する

複数の設定を追加する

JVN識別番号

エントリー編集ページのクロスサイトスクリプティング

内容

攻撃条件

影響を受けるバージョン

ワークアラウンド（応急処置）

CMSバージョンアップによる対応

対応バージョンの仕様変更

今までの仕様

新しい仕様

Webhook機能のサーバーサイドリクエストフォージェリ

内容

攻撃条件

影響を受けるバージョン

ワークアラウンド（応急処置）

CMSバージョンアップによる対応

対応バージョンの仕様変更

変更点１

変更点２

Webhook機能のコードインジェクション

内容

攻撃条件

影響を受けるバージョン

ワークアラウンド（応急処置）

CMSバージョンアップによる対応

対応バージョンの仕様変更

スケジュールのラベル設定画面のクロスサイトスクリプティング

内容

攻撃条件

影響を受けるバージョン

ワークアラウンド（応急処置）

修正前

修正後

修正前

修正後

CMSバージョンアップによる対応

フォーム機能（テンプレート指定）のディレクトリ・トラバーサル

内容

攻撃条件

影響を受けるバージョン

ワークアラウンド（応急処置）

CMSバージョンアップによる対応

最後に

本件に関するお問い合わせ先

イントロダクション

入門

コア概念

フロントエンド開発

機能ガイド

リファレンス

アップデート