UTSUWA Ver. 2.1.0 - 2.1.3 リリースのお知らせ

a-blog cms の公式テーマである UTSUWA をアップデートいたしました。UTSUWA の最新バージョンは GitHub からダウンロード可能です。

Ver. 2.1.3

変更点

  • よくあるご質問カテゴリーのエントリーをアコーディオンで表示
  • メインビジュアルにスライダー設定・表示設定・コンテンツ設定を追加

Ver. 2.1.2

修正点

  • ハンバーガーメニューに下線がついていたのを修正

Ver. 2.1.1

修正点

  • トップページの管理ボックスの位置調整
  • インポートデータを最新に更新

Ver. 2.1.0

変更点

  • メインビジュアルに画像を複数設定可能に変更
  • メインビジュアルに画像が複数枚設定された場合は背景をフェードインスライドに変更
  • 画像が1枚の場合はメインビジュアルの高さが画面いっぱいになるよう変更
  • トップページ スタッフブログをスマホ表示時にカルーセル対応

修正点

  • scriptタグのカスタムフィールドでいくつか出力場所が存在しないフィールドがあったので見直し
  • README.mdから開発環境についての記述をwikiに移行
  • カテゴリー未選択時・Top以外の表示を修正
  • 子ブログトップでページタイトルが表示されない問題を修正
  • twitterアイコンを X アイコンに変更
  • カスタムフィールドのogp画像のラベルを調整
  • ユーザー切り替え機能で元に戻るボタンをテーマに設置

主なリリースノート内容

トップページメインビジュアル

メインビジュアルにおいて複数の画像（PC／SP）を設定することが可能になりました。また、画像上のコンテンツの配置や背景色も設定可能です。 スライダーには「フェード／スライド」の切り替えや表示時間、移動時間の設定が可能です。

よくあるご質問コンテンツ

よくあるご質問というカテゴリーが追加され、そのカテゴリー内のエントリーはカテゴリートップにアコーディオンで表示されるようになりました。

最後に

UTSUWAをはじめ、各公式テーマをより使いやすいものにするため、今後もアップデートを重ねてまいります。公式テーマに関するご意見ご要望をお待ちしております。

管理メニューのカスタマイズ機能

Ver.2.10以前のカスタマイズ

いままで管理画面のサイドバーのメニューをカスタマイズするには直接テンプレートを編集する必要がありました。項目数が多いので権限ごとに表示するメニューを分けたい場合は記述量がとても多くなってしまい大変でした。

Ver.2.10以降のカスタマイズ

テンプレートを編集しなくてもTrelloなどで採用されているカンバンボード形式でDrag and Dropでメニューを管理できるようになりました。カードを直接編集すれば、メニューのアイコンやURL、表示内容などを簡単に書き換えられます。 表示させたくないデフォルトのメニュー内容などは「表示させない」と表示されているエリアにDrag and Dropしましょう。コンフィグに設定されているないようなので、コンフィグセットやルールを利用することによって権限やブログごとに表示するメニューの内容を変更することが可能です。

使い方

管理画面のバーティカルメニューから?アイコンをクリックしドロップダウンメニューから「メニュー管理」を選択します。

メニュー管理ページに移動

いらないメニューを非表示にする

管理画面で普段使っていない項目などは非表示にすることが可能です。非表示にしたい項目をドラッグして、「表示させない」と書かれているエリアまでドラッグアンドドロップしましょう。

この時点ではまだ保存されませんので、必ず変更を反映させる場合は上にある「保存」ボタンを押して変更を保存してください。

保存すると、このように「投稿管理」から「承認通知」メニューが消えていることが確認できます。

カスタムメニューを追加する

また、この機能ではオリジナルメニューを追加することもできます。以下の「項目追加」をクリックします。

そうすると新規メニュー用の入力項目が表示されるのでそこにアイコンやタイトル、URLを設定します。グローバル変数をURLに使用することができます。

登録後は以下のようにメニュー一覧に他のメニューと同じように表示されます。これも保存ボタンを押すまではメニューに実際に反映されないので注意してください。

また自分で新たに追加したメニューに関しては編集より削除できる仕様になっています。

メニューグループの操作

また、「投稿管理」や「サイト管理」などのメニューグループのラベル名を変更したりメニューグループ同士の並び替えも可能です。

メニューグループのラベル名を変更

変更したいラベル名をクリックします。

変更したいラベル名に打ち替えて「完了」ボタンをクリックします。

メニューグループの並び替え

並び替えたいメニューグループの「ハンバーガーメニュー」をつかみドラッグ&ドロップで並び替えたいメニューグループの位置まで移動させます。

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

a-blog cms で複数の脆弱性が見つかりました。 すでに問題に対応したバージョンはリリースしておりますので、該当のバージョン・状況に当てはまる場合は大変お手数ですが以下のご対応をお願いいたします。

JVN識別番号

  • JVN#34565930

今回は見つかった脆弱性は以下の3つです。

  • メディア機能の不適切な入力検証・クロスサイトスクリプティング
  • メディア機能のパストラバーサル・ディレクトリトラバーサル
  • フォームログのクロスサイトスクリプティング
  • エントリ編集のクロスサイトスクリプティング

メディア機能の不適切な入力検証・クロスサイトスクリプティング

内容

  • 攻撃者がCMSに投稿者以上でログイン。
  • メディア機能を使って不適切なSVGファイルをアップロード。
  • アップロードされたSVGのURLを踏むことにより、クロスサイトスクリプティングが発生。

攻撃条件

  • 攻撃者が、投稿者以上の権限でCMSにログインできること
  • メディア機能が利用できること
  • アップロードされた不適切なSVGファイルのURLを直接開くこと

影響を受けるバージョン

  • a-blog cms Ver. 3.1.6 以下のバージョン (Ver.3.1.x系)
  • a-blog cms Ver. 3.0.28 以下のバージョン (Ver.3.0.x系)
  • a-blog cms Ver. 2.11.57 以下のバージョン (Ver.2.11.x系)
  • a-blog cms Ver. 2.10.49 以下のバージョン (Ver.2.10.x系)
  • a-blog cms Ver. 2.9.0 以下のバージョン（フィックスバージョンはありません）

対応方法

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

メディア機能のパストラバーサル・ディレクトリトラバーサル

内容

  • 攻撃者がCMSに投稿者以上でログイン。
  • メディア機能のリクエストを改ざんすることで、任意のファイルを削除することが可能。

攻撃条件

  • 攻撃者が、投稿者以上の権限でCMSにログインできること
  • メディア機能が利用できること

影響を受けるバージョン

  • a-blog cms Ver. 3.1.6 以下のバージョン (Ver.3.1.x系)
  • a-blog cms Ver. 3.0.28 以下のバージョン (Ver.3.0.x系)
  • a-blog cms Ver. 2.11.57 以下のバージョン (Ver.2.11.x系)
  • a-blog cms Ver. 2.10.49 以下のバージョン (Ver.2.10.x系)
  • a-blog cms Ver. 2.9.0 以下のバージョン（フィックスバージョンはありません）

対応方法

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

フォームログのクロスサイトスクリプティング

内容

  • 攻撃者がサイトのフォームを使用して不適切なリクエストを行う。
  • 管理者がCMSにログインして、フォームのログ確認画面に移動すると、クロスサイトスクリプティングが発生。

攻撃条件

  • フォームが設置されていること
  • フォームログを残す設定にしていること
  • 管理者が管理画面からフォームログを確認する

影響を受けるバージョン

  • a-blog cms Ver. 3.1.6 以下のバージョン (Ver.3.1.x系)
  • a-blog cms Ver. 3.0.28 以下のバージョン (Ver.3.0.x系)
  • a-blog cms Ver. 2.11.57 以下のバージョン (Ver.2.11.x系)
  • a-blog cms Ver. 2.10.49 以下のバージョン (Ver.2.10.x系)
  • a-blog cms Ver. 2.9.0 以下のバージョン（フィックスバージョンはありません）

対応方法

以下テンプレートの[raw]校正オプションを削除して修正ください。

themes/system/admin/form/log.html: 148行目

修正前

<td><p><a href="mailto:{mail_to}[raw]">{mail_to}</a></p></td>

修正後

<td><p><a href="mailto:{mail_to}">{mail_to}</a></p></td>

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

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

内容

  • 攻撃者が投稿者以上でログインし、エントリーの編集を行う。
  • テキストユニットで「ソース」や「マークダウン」に切り替え攻撃スクリプトを保存
  • エントリーを公開することで、クロスサイトスクリプティングが発生

攻撃条件

  • 攻撃者が、投稿者以上の権限でCMSにログインできること
  • 攻撃者が、エントリーを編集して公開できること

影響を受けるバージョン

  • a-blog cms Ver. 3.1.6 以下のバージョン (Ver.3.1.x系)
  • a-blog cms Ver. 3.0.28 以下のバージョン (Ver.3.0.x系)
  • a-blog cms Ver. 2.11.57 以下のバージョン (Ver.2.11.x系)
  • a-blog cms Ver. 2.10.49 以下のバージョン (Ver.2.10.x系)
  • a-blog cms Ver. 2.9.0 以下のバージョン（フィックスバージョンはありません）

対応方法

「影響を受けるバージョン」 よりも新しいフィックスバージョンにアップデートを行った後、以下対応を行います。

詳しくは以下記事をご参照ください。
https://developer.a-blogcms.jp/blog/news/specifications-change-vars.html

オプションの有効化

private/config.system.yaml に以下行を追記ください。

strip_dangerous_tag: on # on | off 変数から標準で危険なタグ（dangerous_tagsで指定）を削除するか指定

注意事項

上記のオプションを有効にすることで、エントリー編集でscriptタグやiframeタグを保存できなくなります。 サイトの運用上、編集画面にJavaScriptを書いている場合もあると思いますので、サイトの運用方法を確認した上で有効にしてください。

また、意図してscriptタグやiframeタグを保存したい場合もあると思います。（例えばアナリティクスのスクリプトなど） この場合は、該当の変数に [allow_dangerous_tag] オプションを付与ください。

■ 表示側の変数

{hoge}[raw|allow_dangerous_tag]

■ 編集画面の変数

<textarea name="hoge">{hoge}[allow_dangerous_tag]</textarea>

最後に

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

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

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

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

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

メディアに登録されている画像の編集機能

ここでは、メディアに登録された画像の編集に関する機能について紹介します。

メディアを編集する場所

管理画面 > メディア管理 よりメディアに登録した画像やファイルを編集することができます。

編集ボタンをクリックすると以下の画像のように編集用のモーダルウィンドウが出現します。

メディアが画像ファイルの場合、「編集ボタン」からさらに画像のトリミングなどの機能を利用可能です。「編集ボタン」をクリックすると以下のように画像編集用のモーダルウィンドウが表示されます。

画像のトリミング機能

今までCMSの中で直接画像をトリミングすることができなかったので画像編集ソフトなどで一回画像を加工してからCMSに登録するケースが多々ありました。 そこで今回は以下の画像のように画像をアップロードしてその場でトリミングできるような機能を追加しました。画像は、「カスタム、1:1、4:3、16:9」の中から選択してトリミングできます。 下の画像は、「切り抜き」から「1:1」を選択した際のトリミングの様子です。

焦点座標の指定機能

また焦点座標を決めることで、縦長の画像の特定の部分に焦点を合わせて画像をプログラムからトリミングすることも可能です。 たとえば以下のトリミングの例では、人物に焦点が設定されているため、人物を中心に画像をトリミングできます。

js-focused-image

先ほど画像に対して設定した焦点座標は新しく追加された組み込みJS「js-focused-image」を利用することによって効力を発揮します。 以下はエントリーサマリーを表示しているのですが、全く同じ二つの画像をテスト的に用意しました。 一つは焦点座標が設定されていない画像、もう一つは焦点座標が設定された画像です。焦点座標が設定された画像は綺麗に人物が中央に表示されているのがわかります。

Entry_Summaryモジュールでの表示場合 entry:loopブロック内で以下のようなHTMLをかくことで簡単に実装することができます。

<div style="width: {x}px; height: {y}px;">
    <img class="js-focused-image"
      data-focus-x="{focalX}"
      data-focus-y="{focalY}"
      src="%{ROOT_DIR}{path}" alt="{alt}">
</div>

画像の反転や回転処理

また、画像編集モーダル上では画像を反転させたり回転させたりすることが可能です。以下の画像の赤枠で囲われたエリアのボタンをクリックしてみましょう。

例えば一番上の「反転（水平）」をクリックすると以下のように画像が反転しているのがわかります。

編集前の画像に戻す

また、「元画像を使用」と書かれたボタンをクリックすると加工前の元々の画像に戻すことができます。先ほど反転させた画像も、「元画像を使用」ボタンをクリックすることで最初の状態に戻すことができます。

編集結果を保存

画像を編集しても保存するまでは編集結果が保存されません。「適用する」ボタンをクリックした後、「新しいメディアとして作成」か「上書き保存」をクリックして変更を反映させましょう。

「適用する」ボタンをクリック

「上書き保存」と「新しいメディアとして作成」の違い

「上書き保存」は、すでに登録されているメディアを上書きする形で保存します。「新しいメディアとして作成」は今編集しているメディアの情報は変更せず、変更内容を元に新しいメディアとして保存します。ですので、「新しいメディアとして作成」したばあいは、変更前の画像と変更後の画像が両方ともメディアに登録されるかたちになります。