投稿日:

Log4jの脆弱性について

「Log4j」とは、Javaベースでシステムやアプリを開発する際によく使われる「API」の一つです。

Log4jはJavaアプリケーションの標準的なロギングライブラリであり、処理スピードの速さや、
その多機能性から、多くの人たちから利用されいます。

機能一部
・Java開発では欠かせないデバック情報、エラー情報を出力できる機能。
・出力先が、コンソール、指定したファイル、ログサーバ等、幅広い。

Log4jの脆弱性
といった風にとても便利なLog4jですが、2021年にとある事件が起こりました。
Log4jに発見された脆弱性「Log4Shell」というものであり。
この脆弱性を利用すれば、任意のコードをリモートで実行する、
RCE（Remote Code Execution：リモートコード実行）が可能です。
原因としては、Log4jの「JNDI Lookup」という機能が問題で、攻撃者が送信した文字列を、
Log4jがログとして記録してしまうと、その文字列に記述された通信先やサーバー内部のファイルからjava classファイルを読み込んでしまい、
実行してしまうというものです。
この「Log4jShell」は容易に悪用できる点や。様々なコードをリモートで実行できる点から、
危険度の高い脆弱性といえ、Apacheソフトウェア財団からも、CVSSレートを最高段階の「10」に指定しています。

CVSSはCommon Vulnerability Scoring Systemの略で、共通脆弱性評価システムと訳されています。
脆弱性の深刻度を0から10までの数値でレーティングしています。数値が大きくなるほど深刻度が高くなり、10は深刻な脆弱性であることを示しています。

回避方法
・Log4jのバージョンをApache Log4j 2.15.0よりあとのバージョンにすることで回避可能です。
　　色々な事情によりバージョンアップが難しい場合は、JndiLookupクラスをクラスパスから削除をしてください。

まとめ
便利なソフトやシステムを使っていても、バージョンが古かったりすると、
システムのセキュリティは大幅に落ちてしまいます。
こまめなバージョン確認や、使うシステムの脆弱性について調べることが、とても大切だと思います。

投稿日:

CSSグリッドレイアウトについて

前提知識

・ブロックレベル要素
・インライン要素

グリッドレイアウトを理解するためには、上記２つの理解が必須です。

CSSグリッドとは

CSSグリッドについて説明します。
CSSグリッドとは、CSSでレイアウトを組む際によく使用される方法の１つで
縦横の格子状に分割してレイアウトを構成する手法です。


縦(赤線)がcolumn(列)、横(青線)がrow(行)です。
コーディングの際にこの「column」と「row」が出てきます。

今回はグリッドを使用して、２枚目の画像のようにレイアウトを整えていきます。

HTMLのみの状態

CSSでレイアウトを整えた状態
レイアウト調整後

コーディングにあたり、今回はCodePenというサイトを使用します。
グリッドレイアウトの仕組みを理解することが目的なので、環境構築などは行わずブラウザ上で動作させます。

CodePenにてコーディングを行なっていきましょう。
試しに以下ソースをCodePenのHTMLエディタに入力してみてください。
レイアウト調整前の背景色のみが装飾された結果が出力されます。

HTML

<div id="container"> <!-- コンテナ -->
  <div id="boxA">boxA</div> <!-- アイテム -->
  <div id="boxB">boxB</div> <!-- アイテム -->
  <div id="boxC">boxC</div> <!-- アイテム -->
  <div id="boxD">boxD</div> <!-- アイテム -->
</div>

CSS

#boxA {
  background-color: #ff7f7f;
}
#boxB {
  background-color: #7fbfff;
}
#boxC {
  background-color: #7fff7f;
}
#boxD {
  background-color: #ffff7f;
}

恐らくこちらの画像のような表示になったかと思います。

レイアウトを整える

早速今回の本題であるグリッドレイアウトでレイアウトを整えていきます。
CSSを以下ソースに置き換えてください。

#container {
  display: grid;
  grid-template-columns: 400px 1fr;
  grid-template-rows: 100px 100px 100px;
  grid-template-areas:
    "boxA boxB boxB"
    "boxA boxC boxC"
    "boxA boxD boxD";
}

#boxA {
  background-color: #ff7f7f;
  grid-area: boxA;
}
#boxB {
  background-color: #7fbfff;
  grid-area: boxB;
}
#boxC {
  background-color: #7fff7f;
  grid-area: boxC;
}
#boxD {
  background-color: #ffff7f;
  grid-area: boxD;
}

以下画像のような表示になりましたか？

では一つずつ説明していきます。
グリッドレイアウトで使用するプロパティは全部で6つ。

親要素（コンテナ）で指定するプロパティ

  • display
  • grid-template-columns
  • grid-template-rows
  • grid-template-areas

子要素（アイテム）で指定するプロパティ

  • grid-area

各プロパティの説明

display

要素の表示形式を指定します。
今回の場合グリッドレイアウトなので「grid」を指定します。

display: grid;

他にもブロックレベル要素と指定する「block」や
フレックスボックスを指定する「flex」が存在します。

grid-template-columns

グリッドレイアウトの横幅を指定します。

grid-template-columns: 400px 1fr;

値400pxはboxAの横幅を指定しています。
値1frは閲覧しているPCの横幅を自動的に算出し指定しています。
今回は先に400pxを指定しているため、画面最大幅-400pxで算出された横幅が指定されます。

grid-template-rows

グリッドレイアウトの縦幅を指定します。
今回は３行あるため値を３つ指定しています。

grid-template-rows: 100px 100px 100px;

100pxを各行の縦幅として指定しています。

grid-template-areas

各アイテムの配置を行うプロパティです。
「”」で囲うことで、画面に表示させたいレイアウトを簡単に可視化できます。
以下で指定している「boxA」や「boxB」は後ほど紹介するgrid-areaを使用して指定します。

“boxA boxB boxB”

例えばこちらのソースを書くと

　　　　　grid-template-areas:
    "boxA boxB boxB"
    "boxA boxC boxC"
    "boxA boxD boxD";

1列目は全てboxA
1行目の２列目〜３列目はboxB
2行目の２列目〜３列目はboxC
3行目の２列目〜３列目はboxD
という感じでこちらの結果が表示されます。

同じく、こちらを入力すると

　　　　grid-template-areas:
    "boxA boxB boxB"
    "boxC boxC boxC"
    "boxD boxD boxD";

こちらの結果が表示されます。

このように、列（行)単位で「”」で囲い、その中にgrid-areaで指定した名前を
スペース区切りで入力することで簡単にレイアウトを整えることが可能です。

grid-area

grid-template-areasで指定する際の名前をつけるプロパティです。
このプロパティで指定した名前とgrid-template-areasで指定した名前が一致していれば任意の名前をつけることが可能です。
cssで各要素に対して指定してあげます。

#boxA {
  grid-area: boxA;
}
#boxB {
  grid-area: boxB;
}
#boxC {
  grid-area: boxC;
}
#boxD {
  grid-area: boxD;
}

おわり

CSSグリッドに関する説明は以上です。
floatプロパティを勉強した人はとても簡単に感じませんでしたか？
私がこのグリッドレイアウトの存在を知った時はもう衝撃すぎて体が震えました…（floatは難しすぎる)
ぜひこちらの記事で少しでもCSSレイアウトに対する興味が湧いていただけると嬉しいです！