Home

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

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

JVN識別番号

JVN#48966481

今回は見つかった脆弱性は「URL偽装の脆弱性」になります。

URL偽装の脆弱性

内容

Ver. 3.1.0 で追加された「CMS-6194 登録ドメイン以外でもサイトが表示できるように仕様変更」機能により、 URLを偽装した状態でのアクセスログが監査ログに残り、ログ確認画面では該当URLがリンクになっているため、管理者が偽装されたURLのリンクを踏む危険性があります。

攻撃条件

config.system.yaml の「allow_unregistered_domain」が「on」であること（デフォルト値）

影響を受けるバージョン

a-blog cms Ver. 3.1.0 〜 Ver. 3.1.8（Ver.3.1.x系）

対応方法

「private/config.system.yaml」に以下行を追加ください。これにより、登録ドメイン以外でのアクセスは404となり、CMSが動作せずログも残らないようになります。

allow_unregistered_domain: off

またこちらの設定値は、Ver. 3.1.9 よりデフォルトで「off」になっております。

最後に

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

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

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

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

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

サブカテゴリーを利用して複数のカテゴリーをエントリーに設定する

サブカテゴリーとは

a-blog cms は１エントリーにつき１カテゴリーというシングルカテゴリー方式でしたが、 Ver. 2.10 ではこの仕様を拡張し、メインカテゴリーの他に、複数のサブカテゴリーをエントリーに設定できるようになりました。サブカテゴリーを使うと一つのエントリーを複数のカテゴリーページで表示することができます。

例えば以下のエントリーがあったとします。

エントリーコード	entry-123.html
メインカテゴリー	記事（カテゴリーコード: article）
サブカテゴリー	お知らせ（カテゴリーコード: news）製品（カテゴリーコード: products）

この場合、このエントリーを以下の一覧ページで表示させることができるようになります。

https://example.com/article/
https://example.com/news/
https://example.com/products/

ただし詳細ページでは、メインカテゴリーのみを使ったURLで表示されます。

https://example.com/article/entry-123.html

使い方

機能の有効化

サブカテゴリー機能を有効化するには 管理ページ > コンフィグ > 編集設定 に移動し、「エントリー項目設定」の「サブカテゴリー」にチェックをつけます。

エントリー編集画面

さっそく、エントリーの編集画面をみてみましょう。機能を有効化することでカテゴリーの下に「サブカテゴリー」入力欄が増えています。タグ入力のように複数のカテゴリーを同時に登録できるUIになっています。

サブカテゴリー選択画面

Ver. 2.10.58 をダウンロード

ユニットグループで写真をまとめてタイル状のレイアウトにする PhotoCollage.js の実装

Facebook の複数枚写真をアップロードした際に、Facebook のような写真をレイアウトしてくれる JavaScriptライブラリ「PhotoCollage.js」を利用できるように実装する方法をご紹介します。

PhotoCollage.js の特徴

いろいろな HTML に対応しています。
表示している画像とリンク先は別で扱うようにしています。
smartPhoto.js の利用も考慮して設計されています。
画像のパスは src なのか data-src なのか指定も可能です。
生成されるHTMLソースの各所に Class や attribute の設定が可能です。

オプション

以下のようなオプションを設定できるようになっています。

variable	description	default
gap	Spacing between images	5px
srcAttribute	Image source	src
margin	Album spacing	0px 0px 10px 0px
imgClass	img tag class	none
aClass	a tag class	none
aAttribute	a tag attribute	none

ダウンロード

GitHub に公開されていますので、そちらからダウンロードしてご利用ください。

https://github.com/appleple/PhotoCollage

a-blog cms のブログテーマで利用するには

CSS と JavaScript のファイルをご自身の blog テーマディレクトリに入れてください。

/css/photocollage.css
/js/photo-collage.bundle.js

_entry.html に追加

@section("head-link")
@parent
<link rel="stylesheet" href="/css/photocollage.css" />
@endsection
 
@section("head-js")
@parent
  <script src="/js/photo-collage.bundle.js"></script>
  <script>
    document.addEventListener("DOMContentLoaded", function () {
      const elements = document.getElementsByClassName('js-photocollage');
      Array.from(elements).forEach((element, index) => {
        element.classList.add('js-photoCollage-' + index)
        new PhotoCollage(".js-photoCollage-" + index, {
          srcAttribute: "data-src",
          gap: "5px",
          margin: "0px 0px 35px 10px",
          imgClass: "js-lazy-load",
          aAttribute: {
            "data-group": "group-" + index,
            "data-rel": "SmartPhoto",
          }
        });
      });
    });
  </script>
@endsection

17行目の margin を margin: "0px 0px 35px 10px" と設定をしました。
21行目の "data-rel": "SmartPhoto" に変更することで、a-blog cms の SmartPhoto が動作させることができます。

css/photocollage.css を修正

a-blog cms のユニットの仕様の関係で左右に 10px 狭くしないといけない関係で、width : 100% のところを -20px 減らすように /css/photocollage.css の .photocollage を修正しています。

.photocollage {
  position: relative;
  /* width: 100%; */
  width:calc(100% - 20px);
  height:100%;
}

@media screen and (max-width: 1024px) {
  .photocollage {
    width: calc(100% - 20px);
    height:100%;
  }
}

a-blog cms の管理画面の設定

編集画面設定のユニットグループにクラスは js-photocollage とし、ラベルは自由ですが photocollage としておきます。

投稿画面の指定として

ユニットグループ設定で、photocollage を選択します。解除するには、1カラムを選択することで以下のユニットは JavaScript のライブラリの対象外になります。

たくさんの写真を撮って、それをブログの記事に、まとめて貼っておきたい。全部みたい時には SmartPhoto の機能でスライドして見ることも可能です。

https://github.com/appleple/PhotoCollage

メディアに登録された画像を利用するメディアバナーモジュール

メディアバナーモジュールとは

Ver.2.10のメディア機能のアップデートに伴い、登録したメディアを有効活用できるようにバナーモジュールの後継としてメディアバナーモジュールをあらたに追加しました。このモジュールを使うとメディアに登録した画像の中から画像を選択して、バナーモジュールのように利用することができます。バナーモジュールよりも画像を登録する際の使い勝手が大きく向上しており、エントリー編集ページのようなユニット形式で画像を登録することができます。モジュール側で利用できる変数はバナーモジュールと同じです。

バナーモジュールよりも優れている点

バナーモジュールでは同じ画像を別のバナーモジュールでも利用したい場合、そのモジュールのためにわざわざ画像をアップロードする必要がありました。メディアバナーモジュールではすでにアップロードされた画像をメディアから選択できるので、同じ画像をわざわざモジュールごとにアップロードする手間が省けます。また複数の画像をドラッグ&ドロップで一度に登録することができます。