チャットワークのWebhookの署名検証を各言語で実装してみた

@hayasshi_です。Scalaのプロダクトを開発しています。

ついにチャットワークのWebhookがリリースされました！🎉
OAuthとあわせて、様々なサービスがチャットワークと連携しやすくなります。

今日はチャットワークのWebhookの署名検証について少しお話します。

Webhookの署名検証

チャットワークのWebhookは、イベントに応じてチャットワークからHTTPリクエストが行われ、それを連携先のサービスで受け付けていただく必要があります。

万一リクエスト先のURLが漏れてしまった場合、チャットワークになりすましてHTTPリクエストを送ることができてしまいます。

そこでチャットワークのWebhookでは、Webhookの設定毎にトークン(署名検証用の秘密鍵)を発行し、それをつかってHTTPリクエストがチャットワークからであるということを検証していただくことができます。(詳細は公式ドキュメントを参照してください。)

この記事では、各言語での署名検証のサンプルコードをご紹介したいと思います。

準備するもの

• Webhookの設定で発行された署名検証用トークン
  • Webhookの設定編集画面で確認できます
  • 
• WebhookのHTTPリクエストボディ
  • お使いのWebアプリケーションフレームワークなどのAPIをつかって、リクエスト毎に取得してください
  • 注意点として、リクエストされてきたそのままの文字列を取得してください
    • 例えば一度Jsonデシリアライズしたものをもう一度シリアライズするなどすると、フィールドの順番がいれかわったり、スペースがトリムされたりなど、元のリクエストボディの値と差異が出てしまう可能性があります
• WebhookのHTTPリクエストヘッダX-ChatWorkWebhookSignatureの値
  • お使いのWebアプリケーションフレームワークなどのAPIをつかって、リクエスト毎に取得してください

今回は各言語での署名検証のコードのみにフォーカスするため、トークン等は下記にて準備されたものを利用します。 (実際のチャットワークのWebhookで作成された値です)

# 署名検証用のトークン
A9ne+ygvdV0IZBaPFV2zC1e5Bk+IsI14BPwieRoBQNU=

# WebhookのHTTPリクエストボディ
{"webhook_setting_id":"246","webhook_event_type":"message_created","webhook_event_time":1511238729,"webhook_event":{"message_id":"984676321621704704","room_id":36818150,"account_id":1484814,"body":"test","send_time":1511238729,"update_time":0}}

# WebhookのHTTPリクエストヘッダ`X-ChatWorkWebhookSignature`の値
G7Gtrh5Ee6d8erOVXhWPtUrkNJqqIT5vwLU50KhyLQk=

チャットワークのWebhookは、主に下記の2つのことができるAPIが標準ライブラリにあればごく簡単に扱うことができます。

• Base64エンコード・デコード
• HMAC-SHA256でのメッセージダイジェストの作成

それではどんどんいってみましょう。

PHP

弊社ではまだまだPHPのプロダクトが多く、一緒に改善してくれるエンジニアを募集しています。(突然の告知)
そんなPHPでの検証コードです。

環境は以下のバージョンの対話ツールで確認しました。

$ php -v
PHP 7.1.11 (cli) (built: Oct 27 2017 11:00:43) ( NTS )
Copyright (c) 1997-2017 The PHP Group
Zend Engine v3.1.0, Copyright (c) 1998-2017 Zend Technologies

<?php

$token = 'A9ne+ygvdV0IZBaPFV2zC1e5Bk+IsI14BPwieRoBQNU=';

$requestSignature = 'G7Gtrh5Ee6d8erOVXhWPtUrkNJqqIT5vwLU50KhyLQk=';
$requestBody = '{"webhook_setting_id":"246","webhook_event_type":"message_created","webhook_event_time":1511238729,"webhook_event":{"message_id":"984676321621704704","room_id":36818150,"account_id":1484814,"body":"test","send_time":1511238729,"update_time":0}}';

$key = base64_decode($token);
$digest = hash_hmac('sha256', $requestBody, $key, TRUE);
$expectedSignature = base64_encode($digest);

echo $requestSignature == $expectedSignature;
// 1

とくに嵌まるところはありませんでしたが、hash_hmac関数の第四引数にTRUEを指定して生のバイナリデータを取得した上で、Base64エンコードしないと結果が変わってしまうことに注意が必要です。

Java

弊社ではScalaエンジニアも(ry

Javaの標準ライブラリを利用しているので、JVM系の言語であれば同じように記載が可能と思われます。 Javaのバージョンは、オラクルのjdk1.8.0の環境で確認しました。

import java.util.Base64;

import javax.crypto.Mac;
import javax.crypto.spec.SecretKeySpec;

import java.nio.charset.StandardCharsets;

public class Main {
    public static void main(String[] args) throws Exception {
        String token = "A9ne+ygvdV0IZBaPFV2zC1e5Bk+IsI14BPwieRoBQNU=";

        String requestSignature = "G7Gtrh5Ee6d8erOVXhWPtUrkNJqqIT5vwLU50KhyLQk=";
        String requestBody = "{\"webhook_setting_id\":\"246\",\"webhook_event_type\":\"message_created\",\"webhook_event_time\":1511238729,\"webhook_event\":{\"message_id\":\"984676321621704704\",\"room_id\":36818150,\"account_id\":1484814,\"body\":\"test\",\"send_time\":1511238729,\"update_time\":0}}";

        String algo = "HmacSHA256";
        byte[] key = Base64.getDecoder().decode(token);

        SecretKeySpec keySpec = new SecretKeySpec(key, algo);
        Mac mac = Mac.getInstance(algo);
        mac.init(keySpec);
        byte[] digest = mac.doFinal(requestBody.getBytes(StandardCharsets.UTF_8));
        String expectedSignature = Base64.getEncoder(). encodeToString(digest);

        System.out.println(requestSignature.equals(expectedSignature));
        // true
    }
}

java.util.Base64がJDK1.8から導入されたので楽に実装できました。

JavaScript (Node.js)

弊社(ry

最近はNode.jsを用いたWebサービスも増えてきました。弊社でもツール等で利用することがあります。

環境は以下のバージョンの対話ツールで確認しました。

$ node -v
v8.9.1

const token = 'A9ne+ygvdV0IZBaPFV2zC1e5Bk+IsI14BPwieRoBQNU=';

const requestSignature = 'G7Gtrh5Ee6d8erOVXhWPtUrkNJqqIT5vwLU50KhyLQk=';
const requestBody = '{"webhook_setting_id":"246","webhook_event_type":"message_created","webhook_event_time":1511238729,"webhook_event":{"message_id":"984676321621704704","room_id":36818150,"account_id":1484814,"body":"test","send_time":1511238729,"update_time":0}}';

const crypto = require('crypto');
const hmac = crypto.createHmac('sha256', new Buffer(token, 'base64'));
const expectedSignature = hmac.update(requestBody).digest('base64');

process.stdout.write((requestSignature == expectedSignature).toString());
// true

普段JavaScript(Node.js)を書くことが少ないので、Base64のデコード方法にまよったりしましたが、なんとかかけました。 メッセージダイジェストの作成は下記のドキュメントが分かりやすかったです。

Crypto | Node.js v9.3.0 Documentation

JavaScript (Google Apps Script)

Google Apps ScriptではNode.jsと環境が異なるため、以下の記事を参照ください。

Google Apps ScriptでChatWorkのWebhook署名を検証する方法 - ChatWork Creator's Note

Ruby

環境は以下のバージョンの対話ツール(irb)で確認しました。

$ ruby -v
ruby 2.4.2p198 (2017-09-14 revision 59899) [x86_64-darwin16]

require 'base64'
require 'openssl'

token = 'A9ne+ygvdV0IZBaPFV2zC1e5Bk+IsI14BPwieRoBQNU='

requestSignature = 'G7Gtrh5Ee6d8erOVXhWPtUrkNJqqIT5vwLU50KhyLQk='
requestBody = '{"webhook_setting_id":"246","webhook_event_type":"message_created","webhook_event_time":1511238729,"webhook_event":{"message_id":"984676321621704704","room_id":36818150,"account_id":1484814,"body":"test","send_time":1511238729,"update_time":0}}'

key = Base64.strict_decode64(token)
digest = OpenSSL::HMAC.digest('sha256', key, requestBody)
expectedSignature = Base64.strict_encode64(digest)

puts requestSignature == expectedSignature
# true

最初、Base64.encode64, Base64.decode64を利用していたため、最後の比較で失敗していました。 Base64.strict_encode64, Base64.strict_decode64を利用しないと、改行が挿入されてしまうようです。

Go

私事ですが、この署名検証のコードが私のGo入門でした。

2017-11-21 時点のThe Go Playgroundで確認しました。(なのでバージョンは1.9.2?)

package main

import (
    "encoding/base64"
    "crypto/sha256"
    "crypto/hmac"
    "fmt"
)

func main(){
    token := "A9ne+ygvdV0IZBaPFV2zC1e5Bk+IsI14BPwieRoBQNU="

    requestSignature := "G7Gtrh5Ee6d8erOVXhWPtUrkNJqqIT5vwLU50KhyLQk="
    requestBody := "{\"webhook_setting_id\":\"246\",\"webhook_event_type\":\"message_created\",\"webhook_event_time\":1511238729,\"webhook_event\":{\"message_id\":\"984676321621704704\",\"room_id\":36818150,\"account_id\":1484814,\"body\":\"test\",\"send_time\":1511238729,\"update_time\":0}}"

    key, err := base64.StdEncoding.DecodeString(token)
    if err != nil {
        fmt.Println("token decode error:", err)
    }

    mac := hmac.New(sha256.New, key)
    mac.Write([]byte(requestBody))
    expectedSignature := base64.StdEncoding.EncodeToString(mac.Sum(nil))

    fmt.Println(requestSignature == expectedSignature)
    // true
}

こちらも特に問題なく、公式のAPIリファレンスを参考に書くことができました。

まとめ

どの言語も標準ライブラリをつかってごく簡単に検証することが可能でした。

みなさんも好きな言語をつかってチャットワークのWebhookをつかったサービスを作ってみてください！

React.Componentで外部要素のevent bind,unbindを正しく行う

正しくevent unbindできてますか？@kyo_agoです。

React.Componentの紹介を行っている記事でComponentの外にある要素のevent bind,unbindを正しく行えていない例がいくつかあったので記事にしてみました。

UnitTestと対象コードを同じディレクトリに置いたらよかった話

@kyo_agoです。

最近UnitTestと対象コードを同じディレクトリに置いたらよかったので共有したいと思います。
（ちなみにJestでは標準的に採用されている形式ではあります）

入院中の勉強方法とインクルーシブデザイン

こんにちは。プロダクト開発部の火村(id:eiel)です。

プロダクト開発部では、定期的に定例ミーティングが行われていて、技術的な内容のライトニングトークする時間があります。 発表者はプロダクト開発部のメンバーがローテーションしていて、一度のミーティングで発表するのは一人といった感じです。

先日、私の当番がやってきてしまいました。 いろいろ話したいことはあるのですが、時間がなかったため、今回は入院中にどうやって勉強していたという軽い話をしました。 内容が特に公開して問題のあるものではないので、ブログに書いてみることにしたのが今回の記事です。

「ChatWorkとPHPと私」というタイトルで登壇しました @PHPカンファレンス2017

こんにちは。田中といいます。 PHPカンファレンス2017 - #phpcon2017に参加し登壇をしてきました。

発表内容

「ChatWorkとPHPと私」というタイトルで登壇しました。 ふざけたタイトルですが、ChatWork株式会社の失敗や成功の歴史を紹介しました。

speakerdeck.com

発表の詳細は主に

• ChatWorkが生まれた背景
• レガシーとの戦い
• Scala化Projectの失敗と成功
• PHP7 ? HHVM ?

みたいな話が含まれていますので、興味ありましたらスライドをご参考ください。

発表にあたり、本当にここまで話してよかったものかと思い悩んでいた時期もありましたが下記記事にも感化され公開するにいたりました。

www.yasuhisa.com

また、ここまでのぶっちゃけトークを許可していただいたChatWorkもなかなか懐深いところがあるんだなとあらためて感じました。

PHPカンファレンス2017について

実はPHPカンファレンスは初めての参加だったのですが、その規模に圧倒されました。 7並列で発表が行われていたり、参加枠が2000人だったりと、今まで私が参加してきたカンファレンスで一番大きなものでした。 このような場で1時間も枠をいただいて登壇できたことは、私にとってとても貴重な体験でした。

来年も12月頃に開催するらしいので、来年もまた参加したいと考えています。（登壇するかどうかは不明）

ChatWorkではエンジニアを募集中です

ということで、ChatWorkではPHPエンジニアもScalaエンジニアも募集中です。 私達と一緒に、日本発のビジネスチャットを世界に広めていきましょう！

• Scalaエンジニア募集要項
• PHPエンジニア募集要項

Flowを使ってGoogle Apps Scriptのコードをチェックしよう

こんにちは。 Creator’s Noteには、初登場になるプロダクト開発部の火村(ひむら) a.k.a @eielh です。

弊社では業務効率化やBOT作成のためにGoogle Apps Scriptが使われています。 私はまったく携わっていないので、実はよく知りません。 最近までGoogle Apps Script自体も使ったことありませんでした。 社内でよく使われているものを知らないのはもったいないです。 プライベートでも使い道がたくさんありそうです。 そんなわけで勉強してみることにしました。

しかし、普通に始めるのも面白くありません。 せっかくなので、Flowを導入しながら、始めることにしました。 ということで、今回はFlowを使ってGoogle Apps Scriptのコードをチェックする方法を紹介します。

新しいブログ始めます

新しいブログ、「ChatWork Creator's Note」を始めます。

ChatWork Creator's Noteには旧ブログがありますが、これは更新をストップして、今のままの形で残します。

ChatWork Creator's Note について

このブログは、ビジネスチャット「チャットワーク」の開発者ブログです。
私たちの働き方や持っている技術を知ってもらうために、ChatWorkのエンジニアとデザイナーが情報発信をおこなっていきます。

これからもChatWork Creator’s Noteをよろしくお願いします！