モンモンブログ

技術的な話など

技術同人誌「ネットワークスクランブル TCP編」がめっちゃ分かりやすい

ネットワーク 技術書

先日の第2回 技術書同人誌博覧会で購入した ネットワークスクランブル TCP編 を読了。

booth.pm

f:id:ymdsmn:20190729173501j:plain

本の発売自体は今年の 5/24 で、ちょっと前だったみたい。

woshidan.hatenablog.com

98ページと手頃な厚さで読みやすく、それでいて TCP について一歩深く掘り下げた内容になっていて、TCP の難しい様々な機能や概念を一気に理解できていい感じ。

自分の場合、スリーウェイハンドシェイクや、そこからの状態遷移くらいは知ってたんですが、

ウィンドウによる送信量制御、遅延ACK、高速再送制御、累積的ACKを改良した Selective ACK (SACK)、パケットロスした場合のリカバリーの方法、NagleアルゴリズムやPUSHフラグの問題点、などなどなど、

よく分かってない概念がいっぱいあったんですよね。知らないことすら知らなかったことも多い。

スリーウェイハンドシェイク知ってた、てさっき書いたけど、そこについても「6章 すこし詳しくハンドシェイク: ソケットAPIとコネクションのステータス遷移」で深堀りしてくれていて、これを読むと俺は何を知っていたというのだ…て気分になりましたよね…

（どうでもいいけど CLOSING ステータスについては一切触れてないのはレアケースだから省いたのかな？ ていうか CLOSING ステータスって両者が同時にFINを送りあった場合にのみ遷移するステータス、で合ってる？ まあどうでもいいけど…）

難解な部分については著者自身の考えも交えつつ、TCP について非常に分かりやすくまとめてくれてると思いました。他の本もこれから読むけど楽しみ。

2019/07/21 gRPC と Golang でブロックチェーンもどきを作って遊んだ

日記

こちらのイベントに参加。

webbench.connpass.com

参加者は主催者含め4人。カフェの一角でもくもく作業していた。もくもく会なので何やっても自由だけど、用意されていた作業内容としては以下のブログ記事の通りにブロックチェーン（もどき）を実装してみよう、というもの。

suga-tech3.hatenablog.com

gRPC は聞いたことあるなあってくらい、Golang も前にちょっと触ったことある、くらいだったので丁度いい機会でした。

gRPC の基礎を公式サイトでざっと学んで、あとはブログ記事を写経。

ブログ記事に間違いが数箇所あって、そのままだと動作しなかったので難儀した。なんとか時間内に動かすところまでたどり着いたのでよかった。間違いの箇所はブログ記事にコメントした。

ブロックチェーンと銘打ってはいるけど、P2P ではないし PoW 等による承認プロセスもないし、ブロックに取り込む物はトランザクションとかではなくただの文字列だし、ブロックチェーンを模した何かに過ぎないなあと思う。まあでもその分短時間でサクッと作って遊べるのはとてもありがたい。Golang や gRPC の勉強になってよかった。

今回作ったものはこちら。

GitHub - monmonmon/pseudo-blockchain-go: ブロックチェーンを模した何か。Golang と gRPCの演習問題として。

Nuxt.js に Materialize を導入＆カスタマイズ

Nuxt.js Materialize CSS Frontend

Nuxt.js ではプロジェクト作成時に Bootstrap などの CSS フレームワークを選択すると簡単に導入できて便利ですが、選択肢にない CSS フレームワークを使おうとするとちょっと手間です。マテリアルデザインの CSS フレームワーク Materialize を使いたかったけど選択肢になかったので導入方法を調べてみました。（マテリアルデザインにしたければ Vuetify を使えよコラっていう開発者の意図も感じますがシカトします。）

主なパッケージのバージョンはこんな感じ。

nuxt@2.6.2
materialize-css@1.0.0-rc.2

導入

プロジェクトを作ります。大体デフォルトのまま。

% yarn create nuxt-app materialize-sample
yarn create v1.15.2
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Installed "create-nuxt-app@2.6.0" with binaries:
      - create-nuxt-app
> Generating Nuxt.js project in /Users/monmon/dev/nuxtjs/materialize-sample
? Project name materialize-sample
? Project description Materialize Sample
? Use a custom server framework none
? Choose features to install
? Use a custom UI framework none    ←UIフレームワークなし
? Use a custom test framework none
? Choose rendering mode Universal   ←UniversalでもSPAでもOK
? Author name monmonmon
? Choose a package manager yarn     ←yarnじゃなきゃやーん

  To get started:

        cd materialize-sample
        yarn run dev

  To build & start for production:

        cd materialize-sample
        yarn run build
        yarn start

✨  Done in 195.34s.

必要なパッケージをインストールします。

% cd materialize-sample
% yarn add materialize-css@next

# pug を使いたいのでこれも入れる
% yarn add pug pug-plain-loader

# sass も使いたいのでこれも入れる
% yarn add node-sass sass-loader

assets/style/app.sass を作って以下を記述。

@charset 'UTF-8'

@import '@/node_modules/materialize-css/sass/materialize.scss'

plugins/materialize.js を作って以下を記述。

import '@/node_modules/materialize-css/dist/js/materialize.min.js'

nuxt.config.js を修正。修正するのは3箇所だけです。

import pkg from './package'

export default {
  mode: 'universal',

  /*
  ** Headers of the page
  */
  head: {
    title: pkg.name,
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: pkg.description }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
      // 1. Materialize のアイコンを有効化するcssを読み込み（optional）。
      // `<i class="material-icons">add</i>` のようにアイコンが使えるようになります。
      { rel: 'stylesheet', href: 'https://fonts.googleapis.com/icon?family=Material+Icons' }
    ]
  },

  /*
  ** Customize the progress-bar color
  */
  loading: { color: '#fff' },

  /*
  ** Global CSS
  */
  css: [
    // 3. 先ほど作った sass を追加。
    'assets/style/app.sass'
  ],

  /*
  ** Plugins to load before mounting the App
  */
  plugins: [
    // 3. 先ほど作った plugin を追加。
    { src: '~/plugins/materialize', ssr: false }
  ],

  /*
  ** Nuxt.js modules
  */
  modules: [
  ],

  /*
  ** Build configuration
  */
  build: {
    /*
    ** You can extend webpack config here
    */
    extend(config, ctx) {
    }
  }
}

これだけで導入完了。簡単なページ (pages/test.vue) を作って確認してみます。

<template lang="pug">
div
  nav.row
    .nav-wrapper.col.s12
      a.brand-logo(href="/") Navbar
  .container
    .row.section
      .col.s12
        p
          button.btn Button
        p
          a(href="#") Link
</template>

開発サーバを起動。

% yarn dev

http://localhost:3000/test にアクセスしてこんな感じに表示されればOK。

f:id:ymdsmn:20190422003243p:plain

色をカスタマイズ

デフォルトの色のままだと少々個性が強いですね。カスタマイズしましょう。

色は node_modules/materialize-css/sass/components/_variables.scss で sass 変数として定義されてるので、これをオーバーライドしてやればいいです。

主なsass変数 デフォルト値 用途
$primary-color .materialize-red.lighten-2 Navbar, Breadcrumb, Pagination などの色
$secondary-color .teal.lighten-1 Button などの色
$success-color .green フォームフィールド(Email や URL など)の Validation 成功時の色
$error-color .red フォームフィールドの Validation 失敗時の色
$link-color .light-blue.darken-1 リンクの色

ほとんどのコンポーネントの色は $primary-color, $secondary-color を元に生成されます（黒やグレー系の色を除く。一部例外あり）。今回はこの2つに加え $link-color も変更してみましょう。

先ほど作った assets/style/app.sass を以下のように修正します。

@charset 'UTF-8'

// Materialize の red, lighten-1, darken-2 などの色指定を使えるようにするためインポート
@import '@/node_modules/materialize-css/sass/components/_color-variables.scss'

// sass 変数をオーバーライド。color 関数でこのように指定します
$primary-color: color('blue', 'base')           // .blue
$secondary-color: color('green', 'lighten-1')   // .green.lighten-1
$link-color: color('red', 'darken-2')           // .red.darken-2

@import '@/node_modules/materialize-css/sass/materialize.scss'

red やら lighten-1 やら使わねえぜって場合はもっとシンプルに書けます。

@charset 'UTF-8'

// sass 変数をオーバーライド
$primary-color: #42A5F5
$secondary-color: #66BB6A
$link-color: #D32F2F

@import '@/node_modules/materialize-css/sass/materialize.scss'

こんな風にカスタマイズできました。やったね。

f:id:ymdsmn:20190422003225p:plain

コンポーネントごとに色を細かく指定したい場合は、各コンポーネント専用の sass 変数を node_modules/materialize-css/sass/components/_variables.scss から探して、同様にオーバーライドすればOK。例えば Badge の背景色は名前からして $badge-bg-color で設定できるっぽいですね。

以上です。

技術書典6に一般参加してきました

技術書典6に一般参加してきました！

今回から11時～13時の入場は有料（1000円）となったにもかかわらず凄まじい行列でした。

僕は友人たちと、朝10時のチケット販売開始時刻の頃（入場開始の1時間前）に着くように行ったのにすでに長蛇の列。建物の外の、陸橋を渡った向こう側に並びました。（その後にょろにょろ〜っと移動させられたのでずっとそこにいたわけではない）

ちなみに僕のチケットは1500番代。必ずしも並んだ順に配られたわけではないっぽいから僕の前に1500人並んでたかどうか分からないけど。

f:id:ymdsmn:20190416010947j:plain
建物の外で行列待ち中

ツイッターで4600番代くらいのチケットを持ってる方を確認出来たので、課金勢だけで5000人くらいはいたってこと？（参加費だけで500万円以上のアガリってことになるのかな。運営さんが健全に儲かるのだとしたらいいことだけど、金銭面でモメたり金の匂いにつられて変なのに寄って来られたりしたら大変だなあとか余計な心配。しらんけど。それとも次回以降の運営費に回すのかな。しらんけど。）

所感あれこれ。

  • サークルリストの見づらさ使いづらさは何とかならんのですかね！？ 検索も出来ないし、情報の粒度もサークルによってバラバラだし、「ソフトウェア全般」とかってカテゴリざっくり過ぎる。せめて本のタイトルをテキストで載せてブラウザ検索出来るようにして欲しい…。「JavaScript」みたいな技術名でタグ検索出来たりしたら最高なんですが。
  • チェックしたサークルがサークル配置図でオレンジ色にマークされるのは頑張ってる感ある。ただ、どれがどのサークルなのか分からないので結局あまり役に立たない…＞＜
  • 参加費も後払い決済で払いたかった。「技術」書典なのよこれは！
  • 参加費払ったのに開始時間まで自由行動出来るわけでもなく、寒空の下（4月は寒いから！）デスマーチの如く歩かされたり立ちっぱで待たされたりは辛かった。寒いようおなかすいたよう。まあ仕方ないかなあとは思うけど。
  • それでも文句一つ言わずにおとなしく待ってるエンジニアたち。君たちそういうとこやぞ！（僕もやね！）
  • 待たされた分、入場の瞬間分泌されるアドレナリンの量よ。ああ財布の紐がゆるむ音がする。
  • サークルさんとの交流楽しい！声かけてもらえるとなんだかんだ嬉しい。そんでうっかり買っちゃう。それ以上いけない！
  • 後払い決済に未対応のサークルさんが少数（全体の5%〜10%？）いて、僕が手持ちの現金がないために買えないってことが何度かありました。対応しといて頂けると非常に助かります！「技術」書典なのよこれは！＞＜ 支払いが楽なだけでなく、購入履歴が後から確認出来るのが何気にすごい便利なんですよね。
  • 文句多くてごめんなさいだけどm(_ _)mそれでもこういうイベントは楽しいね！楽しい！ウキャー！(∩´∀｀)∩
  • 懲りずにまた次回も参加したいです！
  • 運営の皆様、本書いてくれた皆様、楽しいイベントをありがとうございました！！！！

f:id:ymdsmn:20190416011124j:plain
13:30ごろの会場内。わちゃわちゃ。

最後に、僕が買った本こちらです。買った順です。見せびらかしたいだけです。（ほとんど後払いで買ったのでサークル名も値段も買った時刻さえも分かるの便利(∩´∀｀)∩）

タイトル サークル名 値段
Practical TypeScript in bitbank ビットバンク株式会社 ¥500
まんがではじめるKubernetes おとうふ工房 ¥1000
Try PWA neko-note ¥1000
実践で学ぶ！Electron+Vue.jsでデスクトップアプリ開発 N4+ ¥300
現場で使える Django REST Framework の＼薄い／本 あきよこブログ ¥1000
Kaggleのチュートリアル第３版 データリファインメント ¥1000
ちぇい子と学ぶChainer入門 [chug] Chainer User Group ¥500
Nuxt.jsとPythonでつくる『ぬるさくAIアプリ開発入門』 ノルウェイのギーク ¥1000
高校数学からはじめる量子コンピュータ あいらぶ量子コンピュータ ¥1000
JuliaではじめるWebアプリ開発〜WebアプリフレームワークGenie入門〜 418 I'm a teapot ¥1000
PHPで学ぶはじめてのGraphQL くろもワークス ¥200
Nuxt.js + serverless + PWA を本番投入して得たノウハウ本 SpaceAgent ¥500
nuxtとvuesaxとDjangoで作るモダンなサービスの作り方。tipsもあるよ！ ω3 ¥500
Radare2で学ぶバイナリ解析入門 味噌とんトロ定食 ¥500
セキュア旅団お得パック（セキュリティ本4冊セット） Secure旅団 ¥2000
/STUDIOでカンタンにつくる！ 6Q.design ¥500
趣味の製麺 第５号 趣味の製麺 ¥1000
作ろう！10分ラーメン 趣味の製麺 ¥1000
若手Webディレクターとペンギン先輩のマンガ vol.2 パルヒコさん ¥500
旅するエンジニア2 旅するエンジニア ¥1000
量子計算機科学序論 量子計算機と量子プログラミング ーQASM + Qiskit でIBMQを触るー 慶應義塾大学宇宙科学総合研究会LYNCS ¥1000
ファミリーコンピュータ技術　ープレゼンファミコンの作り方ー engineer.hanzomon ¥1000
Chrome デベロッパーツールを使いこなそう Network 編 Tech The Toaster ¥1000
動的バイナリ解析の基礎 with Intel Pin 電子版 バイナリイーター ¥250
たのしいBAPの歩き方 電子版 バイナリイーター ¥250
コンピュータ言語神経衰弱（基本セット＋拡張パックx2） 揚げピーナッツ ¥2000
合計 ¥21500

f:id:ymdsmn:20190414163548j:plain
このうち何冊積ん読になることでしょう（白目）

すでにBOOTHでオンライン販売してるサークルさんもあるので、行けなかった人も物色してみような！ワイも追加で買うと思います！イ、イベントはまだ終わってへんのやでエー

「セキュリティコンテストチャレンジブック」はクラッキングの基本を広く＆結構深く学べる良本

セキュリティコンテストチャレンジブック　CTFで学ぼう！情報を守るための戦い方 を読みました。

セキュリティコンテストチャレンジブック -CTFで学ぼう! 情報を守るための戦い方-

セキュリティコンテストチャレンジブック -CTFで学ぼう! 情報を守るための戦い方-

  • 作者: 碓井利宣,竹迫良範,廣田一貴,保要隆明,前田優人,美濃圭佑,三村聡志,八木橋優,SECCON実行委員会
  • 出版社/メーカー: マイナビ出版
  • 発売日: 2015/09/30
  • メディア: 単行本（ソフトカバー）
  • この商品を含むブログ (4件) を見る

サブタイトルの CTF とは Catch The Flag の略で、 用意されたシステムの脆弱性を突いたりデータを解析したりして Flag と呼ばれるキーワードを盗み出すセキュリティコンテストのことです。 オンラインやオフラインであちこちで開催されてます。（例：ksnctf）

自分はプログラミングの世界にはC言語から入ったためか昔から低レイヤーが好きで、 学生時代はバイナリ解析やらパケット解析やらの真似事をしてキャッキャ遊んでたわけですが、 最近になってまた低レイヤーいじりたさが再燃し、 よし CTF というものに挑戦してみようと思い立ち、この本を手に取ったわけです。

内容紹介

5章からなります。

  • Part 0: イントロダクション
  • Part 1: バイナリ解析
  • Part 2: pwn （これのステップ1〜3 だけ無料で読めます）
  • Part 3: ネットワーク
  • Part 4: Web問題
  • Part 5: SQLインジェクション

以下、各章それぞれ内容を軽く紹介。

Part 0: イントロダクション

そもそもCTFって何？ どうやって参加するの？

Part 1: バイナリ解析

主に ELF 形式のバイナリ解析のためのあれこれを解説。

  • file, strings, strace, ltrace, objdump といったLinuxコマンドの紹介
  • OllyDbg, IDA といったツールの紹介
  • gdb による動的解析の基礎
  • レジスタ、スタック構造、バイトオーダ etc の解説
  • x86アセンブリの基本的な読み方

Part 2: pwn

pwn とは英単語 own の typo で、システム権限を奪取するって意味のスラングです。Part 1 の応用編のような内容。 スタックオーバーフロー攻撃や書式文字列攻撃について、実例を挙げながら丁寧に解説してくれているのが嬉しい。 これらの攻撃手法をここまで詳細に説明してくれてるドキュメントってあまりないかも。

  • checksec.sh, gdb-peda などのツールの紹介
  • RELRO, SSP, NX bit, ASLR, PIE といった pwn にあたって必要となる知識の解説
  • スタックオーバーフロー攻撃の解説。ローカル変数の書き換え、リターンアドレスの書き換え、Return to PLT, Return to libc, Return Oriented Programming, etc
  • 書式文字列攻撃の解説。スタックの値の読み出し、任意のアドレスからの値の読み出し、任意のアドレスへの書き込み、GOT Overwrite, etc
  • ASLRの回避方法

Part 3: ネットワーク

主に Wireshark (パケットキャプチャツール) や Python の Scapy ライブラリを用いたパケット解析について解説してくれてる。 あと Netcat（ncコマンド）便利。

Part 4: Web問題

ブラックボックスであるWebサービスに様々な入力（単純なGETアクセスを含む）を与えて脆弱性を探っていくのがWeb問題。

  • PHP の system 関数や Perl の open 関数を利用したOSコマンドインジェクション
  • アップロードファイルの権限不備をついた攻撃

Part 5: SQLインジェクション

Web問題同様、Webサービスに様々な入力を与えてエラーメッセージやHTTPステータスコードから判断する。

  • MySQL か PostgreSQL か SQLite か？
  • SELECT文へのインジェクションの解説。シングルクォート (') などを入力して探っていく。UNION による任意のデータの窃取。information_schema.columns を読んでデータベース構造を調査。
  • INSERT, UPDATE文へのインジェクションの解説。パスワードなどの秘密情報を username などに書き出させたりとか。

感想

広く浅くCTFが概観できる本だと思って軽い気持ちで読み始めたんですが、初心者にとっては決して浅くなく、各テーマごとに結構詳しく掘り下げてくれていてかなり骨太な内容でした。

これをネット上の記事で勉強しようとすると、前提知識が必要だったり、内容が古すぎたり紹介されてるツールが開発終了してたり、システム構成が違うために動かなかったり、英語の記事しかなかったりと、ただでさえ初学者には難しい内容なのにトラップが多くて途方に暮れちゃうことが多かったです。

本書は使うべきツールや基本的な概念を示した上で、実例を通して詳細に解説してくれているので、いやそれでもまだ難しくて全部は理解出来てないですけども、今後勉強を進めていくための道しるべとなってくれる良本だと思いました。