技術情報 の記事一覧

こんにちは。GMOインターネット セキュリティエンジニアの羽田です。セキュリティに興味はあるけど、 -具体的にどのような学習を行えば良いかわからない -環境の準備が大変と感じる方は少なくないのではないでしょうか。この記事では、TryHackMeという学習コンテンツを紹介し、誰でも簡単にセキュリティを学習する方法をご紹介します。読んでいただくことで、セキュリティを学習するうえで必要な「基礎知識とそれらを用いた実用の反復方法」がわかります。TryHackMeを用いることでセキュリティを楽しみながら学習することができるようになりますよ。 1.セキュリティとは何か 定義 まずこの記事での”セキュリティ”の定義はサイバーセキュリティとします。セキュリティと一言で言っても様々なとらえ方がありますが、下記のように定義します。 セキュリティ　サイバーセキュリティ：データなどの電子資産を保護することに焦点を当てた考え方・手段　情報セキュリティ：電子資産だけではなく紙やハードウェアのような物理的な資産も対象にそれら資産の保護することに焦点を当てた考え方・手段 分解してみる サイバーセキュリティの内訳は下記の通りです。内訳とは言ったものの、理解するうえで必要な要素を並べたものになります。 -ネットワーク -プログラミング(アプリケーション) -各種OS -暗号や認証 -データベース これらの要素をそれぞれ理解することがまずは大事になってきます。なぜならセキュリティに関して起きる問題や課題というのはこれらが組み合わさったものであることがほとんどだからです。 上に挙げた各要素についての理解ができたら、それに関する何かしらの実例にあたることでより理解を深めることができます。最初はそれぞれ程度の低いものからはじめて、各要素の理解と事例を反復することで段々と難易度の高いことも理解・解決できる力がついてきます。 2.TryHackMeの紹介 「1. セキュリティとは何か」を踏まえ、セキュリティの各要素の理解と事例の反復方法ができる方法を1つご紹介します。 TryHackMeとは何か TryHackMeというセキュリティ学習コンテンツがあります。公式サイトにも書かれていますが、初心者から熟練者まで利用できるほどコンテンツが充実していることがわかります。 TryHackMe is an online platform that teaches cyber security through short, gamified real-world labs. We have content for both complete beginners and seasoned hackers, incorporation guides and challenges to cater for different learning styles.（TryHackMeは、ゲーム化された短い実世界のラボを通じてセキュリティを教えるオンラインプラットフォームです。完全な初心者と熟練したハッカーの両方のためのコンテンツ、組み込みガイド、さまざまな学習スタイルに対応するための課題があります。） 引用元：https://tryhackme.com/about 環境準備 最低限必要になるものを挙げます。 ブラウザOpenVPN（こちらに公式の案内があります。） 必須ではありませんが、KaliLinuxを用意できる方はそちらもあると楽です。 room TryHackMeの各ラボはroomと呼ばれる部屋に用意されています。それぞれ基本的なものからツールを扱った部屋まで様々なものがあります。 また学習の目的に合わせていくつかのroomを段階的に組み合わたものを提示もしてくれます。 1つのroomは次の図のようになっています。 Taskとよばれる問題が出題されており、1つずつ回答していきます。このroomが段階を踏んでいて、そのroomにおける必要な前提知識などを抑える内容のTaskから用意されています。そのため基本的には楽しく進められて、気が付けば基本が理解できているといった具合になります。 またラボと呼ばれる作業場所となる環境がTryHackMe側で用意されており、ブラウザ内で起動・操作することができます。画像の右側に見えるのが遠隔で起動したLinux環境です。 実際にやってみる 試しにこの部屋（Linux Fundamentals Part 3）を解いてみましょう。最初はこのroomの問題を解くにあたって必要な知識のレクチャーとなっていますね。 問題を進めていくと、Task8でこれまでと違い、知識を使って解く問題がでてきました。 （途中の内容省略） Look for the apache2 logs on the deployable Linux machine 最初の設問は問題という問題では無いようですが、Linuxマシーンのapache2のログを確認するよう指示されていますので移動してみます。 どうやらアクセスログとエラーログがありますね。 What is the IP address of the user who visited the site?What file did they access? 続いてはIPアドレスの確認とアクセス先のページを尋ねられています。そのためアクセスログを確認。 それぞれ確認できたので、回答欄に入力してSubmitボタンを押します。 確認した内容で正解だったようですね。 また次のLog4jのような話題になった脆弱性についても用意されていて、基本的なことから実際のツールや脆弱性に関して扱ったroomまでカバーされています。 3.おわりに 今回は、セキュリティの学習方法とその具体的な手段としてTryHackMeについて紹介してきました。TryHackMeについては軽い紹介程度にとどまりましたが、執筆時点でroomの総数は500以上あるので、皆さんも興味があるroomを見つけたらぜひ試し見てください。

はじめに みなさん、こんにちは。GMOインターネット株式会社の斉藤です。今回はMetamaskを使ったWebページ作成の第2回です。第1回も併せてご覧ください。前回はWebページとMetamaskを接続するところまで実装を行いました。今回は暗号資産ウォレットらしく、残高照会や送金の実装を行っていきたいと思います。引き続きMetamaskの開発者ガイドは必読です。Getting Started | MetaMask Docs https://developers.gmo.jp/15489/ メインネットとテストネット Metamaskは基本的にイーサリアムネットワーク用のウォレットです。暗号資産であるEther(ETH)を扱うネットワークですね。これはメインネットと呼ばれています。 一方で、イーサリアムプロトコルのテストなどを目的としたネットワークも存在しています。これらはテストネットと呼ばれています。今回のようにアプリのテストを行ったり、スマートコントラクトのテストなどに使います。 前回の記事でMetamaskの設定を変更してテストネットワークを有効にしたので、Metamask上でいくつかのテストネットを確認することができます。 Rinkeby Ropsten Kavan どれを使っても良いですが、今回はRopsten Test Networkを利用していきます。 それぞれのテストネットには、そのテストネット上で使うEtherを取得するための方法が用意されています。これはFaucetと呼ばれています。日本語では蛇口という意味です。ひねると水が出てくるイメージですね。 RopstenのFaucetはこちらです。Metamaskから自分のRopstenネットワークのウォレットアドレスを確認して、それを入力しましょう。0.2ETHが付与されます。 ウォレットの残高を取得する 無事にRepstenネットワークのETHが取得できたら、さっそく残高を取得する実装をしていきましょう。 前回の記事で説明したwindow.ethereum オブジェクトを使います。requestメソッドでeth_getBalanceを呼び出します。またaccountはウォレットアドレスで、取得方法は前回の記事にあります。 const wei = 0.000000000000000001; const amount = await window.ethereum.request({ method: "eth_getBalance", params: [ account, "latest", ], }); // wei -> ether const balance = parseInt(amount) * wei; setBalance(balance) 返り値のamountが残高で、単位はWeiです。weiはイーサリアムの最小単位で、 1 Wei == 0.000000000000000001 ETH です。 送金する 次に送金を実装してみましょう。ウォレットアプリっぽくなってきました。 まず一番最初に大事なことです。前回の ネットワークを取得する を利用してメインネットに接続しているときは送金を実行しないようにしておきます。 一応ですが、実際に送金を実行してもMetamaskが確認を求めてきますので、そこで気づくこともできます。ただ今回作っているのはテストアプリですので、実装上メインネットでは送金不可にしておくのが良いでしょう。 // メインネットでは実行しない const chainId = await getChainID(); if (chainId == 1 || chainId == 61) { console.warn("Do not send any transactions to the mainnet"); return; } 次に送金部分を実装していきます。Metamaskのドキュメントも併せて見ておきましょう。 const weiSendAmount = sendAmount * wei; const hexSendAmount = "0x" + weiSendAmount.toString(16); const transactionParameters = { nonce: '0x00', // ignored by MetaMask gasPrice: '', // customizable by user during MetaMask confirmation. gas: '', // customizable by user during MetaMask confirmation. to: sendTo, // Required except during contract publications. from: window.ethereum.selectedAddress, // must match user's active address. value: hexSendAmount, // Only required to send ether to the recipient from the initiating external account. data: '', // Optional, but used for defining smart contract creation and interaction. chainId: '', // Used to prevent transaction reuse across blockchains. Auto-filled by MetaMask. }; sendAmountが送金する額(ETH)です。それをweiにして16進変換します。 transactionParametersのsendToが送信先ウォレットアドレス、valueが送信額です。その他の項目はMetamaskが自動で埋めてくれます。 // txHash is a hex string // As with any RPC call, it may throw an error const txHash = await window.ethereum.request({ method: 'eth_sendTransaction', params: [transactionParameters], }); 送金は eth_sendTransaction を呼びます。返り値は送金トランザクションのハッシュ値です。 実際に送金を実行するとブロックチェーン上に反映されます。Etherscanで自分のトランザクションを確認してみましょう。 おわりに 完成したデモページはこちらです。実際に送金もできますので試してみてください。 2回にわたってMetamaskと連携したWebページを実装してきました。HTMLとJavaScriptの知識があれば実装できるので、非常に手軽です。これでWeb 3.0できますね！笑 それではまた次回お目にかかりましょう。 [PR] 私が働いているGMOインターネット株式会社ではエンジニアを含め採用を強化しています。 募集職種 | GMOインターネット株式会社採用 「いきなり応募するもなぁ」と言う方は、Twitter DMで私に直接ご相談いただいても構いません。社内の雰囲気、開発現場の雰囲気、人間関係、待遇など、社内の人物からリアルな情報を知りたいという方はお気軽にどうぞ。

　普段はインフラエンジニアをやっている柳です。今回は顔認証ウェブサーバーの構築に挑戦しました。顔認証を提供する為にはバックエンドで機械学習による画像の解析処理が必要となります。この解析処理は日々研究され様々な手法が発表されています。今回はインターネット上で公開されているものを流用し構築します。言語はフロントにhtml, javascript、バックエンドにpythonを用います。これらの言語の知識があれば構築可能ですのでぜひ挑戦してください。 1.完成イメージ 　ブラウザ上でリアルタイムに顔認証結果を表示させることをゴールとします。 2.H/W構成 　リアルタイム画像解析処理はGPUによる高速な演算処理が必要となります。サーバーはGPUボード（Nvidia製、GPUメモリー4GB以上推奨）を搭載したPC、クライアントはカメラ付ノートパソコン、タブレット、スマホです。サーバー＆クライアント間の通信はHTTPSとなります。 3.サーバー構成 　フロント（HTML, API） のウェブアプリケーションフレームワークはFastAPI、バックエンドの機械学習フレームワークにはPyTorchを利用します。その他ミドルウェアとしてnginx（リバプロ、SSL証明書管理）, gunicorn（HTTPサーバー）, Faiss（近似最近傍探索比較）を用います。またクライアント側のカメラ起動にWebRTCのAPIを用います。 上記設計に至った比較結果です。 PyTorch vs TensorflowTensorflowはPyTorchと比較し動作が遅く感じられました。kerasのライブラリで比較を行ったことが起因していると思います。*keras: TensorFlowやTheano上で動くニューラルネットワークライブラリ、TensorFlow上の高レベルAPIFastAPI vs FlaskFastAPIがFlaskよりレスポンスが早いという情報があった為です。実際2通り開発しFastAPIの方が機械学習と相性が良いと感じました。共にWebSocket通信可能なため好みで良いと思います。Faiss vs 他特微比較アルゴリズム（近似最近傍探索比較）はこちらのページのデータを参考にしました。 FaissのみがGPU対応しています。FaissにはIndexFlatL2とIndexIVFFlat（ボロノイ領域を用いた比較）があり共に実装を行いました。画像データが少ない場合はIndexFlat2による総当り比較で十分高速です。 4.顔認証論理図 　顔認証システムの論理図です。画像入力から結果出力まで3ステップあります。 （1）顔検出 　画像から人の顔を検出する工程です。画像から顔のみを切り抜き次の工程に渡します。顔検出のアルゴリズムは下記ページを参考にさせて頂きMTCNN（マルチタスク畳込みニューラルネットワーク）を採用しました。今回の顔認証システムで演算処理が一番長いステップです。＞参考ページ （2）特徴量抽出 　顔画像から顔の特徴量を抽出（数値化）するステップです。今回はInceptionResnetV1を採用しました。最終的には512次元(個)の数値をもつ特徴量ファイル（NumPy形式）とします。　*NumPy: 数値計算のためのライブラリで、ベクトルや行列の演算といった数値処理を得意にしている （3）特徴量比較 　顔の特徴量を比較し一番特徴量が近いファイル名と値を返します。比較結果が0に近い程、顔の特徴量が近く同一人物と判定できます。ただ、この特徴量は同一人物でも写真が同じでない限り同じ数値にはなりません。顔の色相、彩度、明度が異れば違う数値となります。この比較結果の閾値のチューニングも顔認証では重要なポイントです。 0.1以下：ほぼ同一人物0.5以上：似た人1以上：全く別人0以下（マイナスの場合）：比較しているファイルにエラーが含まれている 処理速度 　ModelCore i5 2.11GHzGTX 1080 Ti(1)顔検出MTCNN（540x960）158 msec60 sec(2)顔特徴量抽出InceptionResnetV176 msec19 sec(3)顔特徴量比較Faiss（1000名）1 msec0 msec 5.ブラウザ動作設計 　画像取得から認証結果表示まで全て1画面で完了するようjavascriptで実装しています。クライアント側でリアルタイムに表示されるカメラ映像の上に、サーバーからの解析結果を表示させます。こちらのページを参考にさせて頂きました。 WebRTC API（getUserMedia）にてカメラを起動カメラデータをリアルタイムでImage canvas（HTMLで定義）にレンダリングImage Canvasから画像として取得しblob化blobデータをサーバーへpost画像から顔を検知し特微量抽出、近似検索し解析解析結果をWSGIに返すjson形式でクライアントへ解析結果送付（x,y,height,width,probability,userid,groupid,…）結果をDraw Canvas（HTMLで定義, Image Canvas上にレイヤリング）へレンダリング 6.顔認証システムのThread Safe化 　顔認証システムのスレッドセーフ化について解説します。顔認証のアプリケーションはgunicornのワーカー数に応じてメインメモリ領域とGPUメモリ領域にデプロイされます。GPUメモリには①顔認識（MTCNN）、②特徴量抽出（InceptionResnetV1）、③特徴量ファイル（IndexFlatL2）がロードされます。　今回の実装では1ワーカーあたりGPUメモリを1.5G消費していました。2ワーカーなら3G消費することとなります。　MTCNNやInceptionResnetV1のモデルはGPUメモリにロードされた後、データが変化することはありません。しかしFaissは画像の「登録＆削除」によりデータが変化します。GPUメモリにロードされたデータの変化はワーカー間では共有されない為、ワーカー間で全てのイベントを共有する（全てのワーカーに対して同じイベントを発生させる）仕組みが必要となります。この問題を解決するためにFaiss Event Managerを定義し全てのイベントを共有メモリ（テキストファイル・Redis）経由で管理するよう実装します。またFaiss Event Managerは親プロセスから分離し子プロセス化しイベントを適時検知＆実行できるようにします。 7.開発環境準備 　開発はWindows 10がインストールされたカメラ付ノートPC1台で進めます。全てを1台で完結させるため若干CPUパワーを必要としますが高速にデバッグ可能です。Intel Core i5で4FPS（4秒に1回認証結果表示）程の速度です。（モデルの学習やファインチューニングを行う場合は、Google ColaboratoryのGPUで行うと高速です。）*ファインチューニング: 既存の学習済モデル（出力層以外の部分）を、重みデータを一部再学習して特徴量抽出機として利用する 　まずAnacondaをインストールし必要なライブラリをconda/pipでインストールします。最後に今回のアプリケーションをgithubからダウンロードしコンフィグしuvicornで立ち上げます。 （1）Anacondaインストール こちらのページが参考になるかと思います。 （2）パッケージインストール Anaconda Promptを開き開発に必要なpkgをインストールしていきます。 # pytorch, torchvision ※CPUモード conda install pytorch torchvision cpuonly -c pytorch # facenet-pytorch pip install facenet-pytorch # webサーバー関連 conda install -c conda-forge fastapi python-multipart nest-asyncio conda install -c conda-forge uvicorn[standard] conda install -c conda-forge websockets conda install aiofiles jinja2 # faiss conda install -c conda-forge faiss # redis関連 conda install -c anaconda redis-py （3）仮想環境作成 base環境をコピーし開発用のpoc環境を作成します。 conda create -n poc --clone base conda activate poc （4）git clone アプリケーションをダウンロードします。 #gitインストール conda install -c anaconda git # clone git clone https://github.com/masayay/maiface.git （5）Config編集 # maifaceへ移動リネーム mv conf_sample.py conf.py # フォルダ作成＆必要に応じてconf修正 C:\maiface C:\maiface\embeddings C:\maiface\cache （6）Uvicornでアプリケーション起動 # アプリケーションディレクトリへ移動 cd maiface # アプリケーション起動 uvicorn face_api:app 下記メッセージが表示されれば起動成功です。 FaceDetector started on device: cpu Faiss index initialized. People: 1 Faces: 2 Faiss event manager started: Text Started server process Waiting for application startup. Application startup complete. Uvicorn running on [http://127.0.0.1:8000 (Press CTRL+C to quit)] （7）接続テスト ブラウザで 「顔認証画面」を開きます。 　→グループ選択、ID入力、キャプチャ取得し登録します。　 ※手順（1）～（6）実行後上記URLへアクセス可能です。 次に「顔認証画面」を開きます。　→先程のIDとグループが画面に表示されれば成功です。　※手順 （1）～（6） 実行後上記URLへアクセス可能です。 以上で顔認証ウェブサーバーの開発環境の構築は完了です。本番用(Linux)構築手順はgithubに記載していますので参照ください。 顔認証もオープンソースを駆使し構築できることがわかりました。顔認証等のAI分野もオープンソースとしてもっと開発が進みAIが相互連携するようになれば面白いと感じます。 関連記事はこちら https://developers.gmo.jp/18245/

2022年4月9日（土）〜4月11日（月） にオフライン・オンラインで開催されたPHPerKaigi 2022にGMOインターネットグループはダイヤモンドスポンサーとして協賛いたしました。本エントリーでは、「スポンサーセッションの概要」と「当日のブース出展」を主にレポートいたします。 イベント概要 PHPerKaigiとは PHPerKaigi（ペチパーカイギ）は、PHPer、つまり、現在PHPを使用している方、過去にPHPを使用していた方、これからPHPを使いたいと思っている方、そしてPHPが大好きな方たちが、技術的なノウハウとPHP愛を共有するためのイベントです。今年はPHPerKaigi初のオフラインとオンラインのハイブリッド開催！ みなさんのご都合に合う参加方法をお選び頂けました。 概要 開　催　日　程：2022年4月9日（土）〜4月11日（月）オンライン会場：ニコニコ生放送オフライン会場： 練馬区立区民・産業プラザ Coconeriホール　対 　　 象　 ： PHPエンジニアおよびWeb技術のエンジニア　主 　　 催　 ： PHPerKaigi 2022 実行委員会 （実行委員長 長谷川智希（@tomzoh）公　式　H　 P ：https://phperkaigi.jp/2022/ スポンサーセッション 今年はGMOインターネットグループとして協賛し、スポンサーセッション枠でGMOインターネット、cfpセッションでGMOペパボの計2社が登壇いたしました。 スポンサーセッション（GMOインターネット）：マイクラでスクラムワークショップ 本セッションではマインクラフトを使ってスクラムワークショップをする様子をお届けします。 ソフトウェア開発におけるスクラムはチームが価値を生み出すためのフレームワークです。不確実性がつきもののソフトウェア開発において、その有効性が認められ、現在では多くの成功事例が存在します。そのため、スクラムを採用したいと検討しているチームもあることでしょう。しかしながら、スクラムはただ聞いただけでは実践するのが難しいという問題があります。 そこで活用できるのがワークショップです。短い期間に集中して体験すれば、スクラムのフレームワークに対する理解が深まり、スクラムの実践に役立つことでしょう。今回はそんなスクラムワークショップをご紹介いたします。ワークショップで取り扱う題材はマインクラフトです。 https://www.youtube.com/watch?v=XI_nIlqCxO4 cfpセッション（GMOペパボ）：GitHub Actions Deep Dive using PHP 2018年のGitHub UniverseでGitHub Actionsが発表されてから約3年、今ではGitHubを代表するなくてはならない機能の1つになっています。 発表者もv2（not HCL）から使い始めており、作成したOSSのCI/CD環境として活用するだけでなく、独自に作成したActionもいくつかGitHub Marketplaceに公開しています。本発表では、GitHub Actionsを使いこなすに当たって、私の知る知見を時間の許す限り紹介します。 細かすぎて全く必要のなさそうな情報ばかりかもしれません。しかし、あなたがGitHub Actionsを使いつづけていくといつか必要になる情報かもしれません。 そして本発表では最終的に「PHPで独自Actionを作成する」ところまでいきたいと思います。 https://speakerdeck.com/k1low/phperkaigi-2022 ノベルティBOX 本年度もオンライン参加者に向けて主催側からノベルティボックスが自宅まで届けられました。大きな箱いっぱいにノベルティが梱包されています。 ノベルティボックス ノベルティボックスの全容（運営様から引用） 弊社からは「クリアファイル」と「スポンサーセッション特製ステッカー」を封入しております！ 「クリアファイル」（左）と「スポンサーセッション特製ステッカー」（右） ブース企画＼マイクラでスクラムワークショップ／マイクラ世界につくったGMO kitaQオフィスを体験しよう！ 体験ブース企画パネル 4/10（日）4/11（月）の2日間ブースへ出展いたしました。ブースではスポンサーセッションで登場したConoHa上のマインクラフトに構築した「GMO kitaQオフィス」を自由に探索できる体験コーナーをご用意し、さらにアンケート回答で「特製マイクラこのはアクリルスマホスタンド」プレゼント企画を実施いたしました！ アンケート回答者限定配布のアクリルスマホスタンド 当日のブース風景 一部の時間ではテックリード成瀬、村上の2人がマインクラフト内にオンラインで登場！ここでしか聞けない「セッション裏話」を聞けたり、「リアルタイムにマインクラフト内で会える」というブースならではの楽しみ方をご用意しました。2人の登場時間は一時ブースが混雑状態になることも…！ また、ブーススタッフには弊社現役（アプリ開発、インフラ）エンジニアも参加しており、来場者の皆様とコミュニケーションをとる良い機会となりました。 モニター内 成瀬（左上）、村上（下）から「撮影秘話」をお話し中 本記事上部にスポンサーセッションのアーカイブを掲載しております。まだ見ていない方は是非是非ご覧ください。 さいごに 最後までお読みいただきありがとうございました。久しぶりのオフライン開催に運営もドキドキでしたが、結果多くの方とのコミュニケーションをとれて大変良い刺激となりました。 また来年のPHPerKaigiでお会いできることを楽しみにしております！

4/21（木）にGMO Developers Night#34 「ペンテスターから見た最近のセキュリティ状況」をオンラインにて開催しました！今回は、GMOインターネットグループにジョインした「GMOサイバーセキュリティ byイエラエ株式会社（旧称：イエラエセキュリティ）」のホワイトハッカーたちが、幅広いトピックを対談式でディープに語りあかしました。イベント告知：https://developers.gmo.jp/15344/本記事はこちらのイベントの書き起こしとなりますので、ぜひご覧ください。 登壇者（敬称略） GMOサイバーセキュリティbyイエラエ株式会社代表取締役CEO　牧田 誠オフェンシブセキュリティ部部長　ルスラン・サイフィエフ株式会社川口設計代表取締役　川口 洋 会社説明 牧田当社のミッションは、「日本のセキュリティを守る」ということです。誰もが犠牲にならない、安全なインターネット社会を創っていきたいと思っております。逆に言うと、現在はあまりセキュアではないということになるんです。我々、ペンテスター、ホワイトハッカーから見ている世界、日本の最近のセキュリティの状況と、一般の方々が見ている世界では、少し違いがあると感じています。我々はあまりセキュアではない世界を見ているんですけど、恐らく今日参加されている500名の皆様も、そこに気付いているからこそ参加されているのではと考えています。今までの侵入テストの案件をすべて集計して統計をとったところ、90％以上の案件で侵入に成功しているという結果が出ました。我々ペンテスターは、90％以上の会社やシステムに対して侵入できる、脆弱であるという景色を見ていて、この景色を、このあとの対談の中で少しでも参加者の皆様と共有できたらと思っています。そして、GMOインターネットグループに4月にジョインし、新しい社名で活動していますが、その理由は、我々が掲げている「日本のセキュリティを守る」というミッションを最短で実現できるからです。イエラエのホワイトハッカーが持つノウハウをプロダクトに落とし込んで、プロダクトをGMOインターネットグループのお客様、ドメインでいうと日本の90％、レンタルサーバーだと日本の60％のシェアを持っているわけですけど、我々のサービスでそれらのお客様を守るというのが、グループジョインの理由です。 対談 テーマ：ペンテスターから見た最近のセキュリティ問題 川口最近のセキュリティ状況をペンテストで見てきて、話題はありますか。 最近のテーマは「監視」です。ルスラン 川口ペンテストで、お客様のシステムの監視はどのようにできているのでしょうか？監視をくぐり抜けてゴールを達成しているケースが多いように思いますが。 監視に検知されずにゴールを達成することもあるし、あとはゼロトラスト環境で端末が監視されていても不足していることが多い。基本的に多くのお客様はセキュリティ製品を導入、運用している。しかし、そのような製品は今まで出ている攻撃やばらまき攻撃に対してはすごく有効だけど、そうでない攻撃を使えば、技術のある攻撃者なら監視をすり抜けることは可能です。ルスラン 川口依頼されるお客さんは、それなりにやってるからペンテストやろうといるのに、セキュリティの監視をやっているにも関わらずここは監視されてるだろうからこうやって抜ければいいよねとルスランさんはかいくぐってやっているということ？ それもあるし、案件やお客様の要望に応じることもあります。例えば、お客様の中で我々のセキュリティ製品が本当に稼働しているか確認するために、Emotetのような攻撃を実行してみましょう、ということでテストして評価という感じですかね。ゼロトラスト環境を作ったので評価してあげるという感じですね。例えばAzureのグローバル管理者を奪取することが最終ゴールの案件であればそこまでたどり着いたけど、監視チームに検知されなかったというのはあり得る話ですね。ルスラン 川口Azureグローバル管理者を取られたたら、為す術がない、アドミンとしては聞きたくない報告だ。「ゼロトラスト」というキーワードは、マーケティングや営業のキーワードとしてよく使われていて、うちもそろそろゼロトラストを考えなければ、と導入する動きがここ2～3年進んできているけど、広くゼロトラストだと言っている環境においても、ペンテストで抜けていって、権限が取れたというケースがあるんですね。 あります。ゼロトラスト自体の考え方はモデルとしてはいいんですけど、実現しているベンダーさんや、導入している会社での実装状況によって変わっていったりします。最近ですと、ゼロトラストといいつつVPNの代わりにVPNっぽいものを入れた製品もある。あとは、SaaS化されたとか、SSOが実装されたとか、IdP（Identify Provider）としてはAzureやOktaを使っているという例も多い。一つの例で言うと、セキュリティ製品がいろいろ導入されている端末、仮にEDRとかアンチウイルスとか全部あるという端末に感染ができた場合、外部遠隔操作ができた場合、かつEDRとかも検知されていない場合、通信も判別されていないという状態であれば、攻撃者としては全部SaaSなので、オンプレミス環境がない環境を考えてみると、すべてクラウドになると、すべての業務がクラウドになります、一番守りたい資産、社員の守りたい資産といえばブラウザになるんですね。ブラウザの中のCookie、多要素認証がいろいろ付けてあっても、人は対象のサイトに認証してあるんだったら、多要素認証を通しての形で、そのセッションを我々が取得できたら、外部からもどこからでもアクセスできる。EDRは、そこの端末にあるからこそ動作するが、我々がVPNのセッションを修復できるのであれば我々の端末から内部に入れるとか、モニターできるツールをすり抜けるいうことも実現します。ゼロトラストは端末がすべてだから、端末から来るものを全部監視するけど、通信がどう監視されるかは基本的に会社によるというということになります。ルスラン 牧田今の話はエッセンスが2つあると思います。最初の「監視が大事」ということ、これはペンテスターの視点。我々のような一般の人は、防御の方へ行きたいじゃないですか、ファイアウォール、ゼロトラストやEDRといった防御の方に行きたい。監視が大事って話は、EDRやファイアウォールはバイパスできる前提で考えないといけないよ、というペンテスターの目線なんです。2つ目は、ゼロトラストで全部クラウドになって、セッション1つでシングルサインオンで全部いける点、みんなにとっては便利だけど、攻撃者、ペンテスターにとっても便利であること。オンプレミス環境だと、セッションが分かれていて、全部セッションをとらないといけなかったけど、シングルサインオンで、マルウェアに感染して、ブラウザのセッションをダンプすれば、そのあとは全部のセッションに行けてしまう。ゼロトラストは、ペンテスターにとっても便利だし、完全にセキュアではないという点。 川口Cookieをとるとか、聞きたくない話ですね。攻撃者に入られて、Cookieを持っていかれましたとなると、そりゃそうだよね…となるけど、運用や設定でなんとかなるものなんですか？Cookieを取られないようになんとかしようなのか、それともCookieを取られてもいい策をとるのか、どっちがよいでしょうか。 対策といえば、セキュリティ製品にすべて頼るというのは、現時点では見たことないです。多少カスタムなものを作って、仮にChromeを使っている場合はChrome以外から使うことがないので、Cookieに触れた瞬間に監視してアラートを出すといったものを作るとか、現時点では有効な感じ。そのあとの話となると、不審アクセスのような感じでCookieが取られて、攻撃者であればあちこちにアクセスするとか、例えばAzureEDのようなIdPに外部からアクセスしてしまったとか、感染した端末を踏み台にすればIPアドレスも変わらないけど、外部からいきなりアクセスした場合はIPアドレスが変わる、といったような、細かいログを解析して不審だなといったのを見ていくしかないと思う。こうなってくると、SaaS側ですべてのログを収集しながらやるという必要があるし、boxなどのクラウドストレージの場合は、いきなりいろんなファイルにアクセスしてダウンロードし始めたということならある程度見られるぐらい。ルスラン 川口守りにくいと思いますがどうですか？ 牧田そうです。開発者は守りたいじゃないですか。Cookieを取られないための対策もしますし、万が一取られても大丈夫なように、暗号化したり、端末のホスト名やユーザー名、macアドレスなど全部マッチしない限りセッションを有効にしないように工夫する。でもペンテスターの目線だと、ならばそこを解析すればいい、と考えるんですね。この暗号化方式で鍵はこれね、じゃあ復号して、macアドレス変えて、再暗号化すればいいよね、と。 対策が大変なのは、SSOみたいな感じで各サイトに認証するじゃないですか、SSO自体の対策としては、例えば各サイトにアクセスするにはまたIdPとか多要素認証、一番よければYubiKeyみたいなFIDOがあってさらに認証しなければいけないという導入ができるのであればよいが、ただし認証済みのセッションが取れるということは、基本的には、各サイトのCookieの有効期間がサービスによって異なるので、例えばAzureのSSOのCookieの有効期間を1時間とすればそれは1時間で切れるが、BOXやDropboxなどのほかのサービスでは1か月とか無限とか異なるので、そのあたりのコントロールは、ユーザー側、システム管理者側にはないので、そこがちょっと大変。ルスラン テーマ：開発者が使っているサービスで気になるもの 川口開発者が使っているサービス、代表的にはGitHub回りだけど、ここになんか情報が入っているとなると、そこのアカウント権限が取れちゃうというところからスタートするというのがあって、日常のオペレーションでGitやGitHubを使わざるを得ないところにペンテスターが差し込んでくると、ここも攻略の糸口になっているケースが多いと思いますが。 我々のゴールはいろいろあるけど、やり方もいろいろあって、例えば感染済みの端末からスタートするとか、外部公開されている情報を探してそこからエントリーポイントを探しに行きます。両方とも外部の情報を集めるので、Gitから始めることはあります。会社名を入れるとかいろいろ検索して、何も見つからない案件はほぼなく、そもそも企業の中に開発者がいない案件ぐらいかもしれないですね。あっちこっちに認証情報がどこでもあるというわけではありませんが、情報収集という意味ではかなり役に立つものがあります。昔の事例でいうと、Gitってなにが悪いかというと、何か間違えてアップロードした後に消しても、コミットが消されていない状態であれば、誰でも履歴から過去のコミットを見て情報が得られるので、ある案件では、鍵が取れて、鍵から外部のサービスにAPIキーで入れて、そこから内部情報が取れたというケースがあります。ルスラン 川口ついうっかりコミットしたという例があると思う。認証情報とかをignoreに入れずについ入れてしまって、消したからいいだろうと思ったらコミットの方にあるみたいな。見えるよね、探れるよね、というところから、あとになって悲鳴が聞こえるパターンですよね。 牧田一番びっくりしたのは、あるセキュリティ製品で、ソースコードが公開されたというもの。 あれは、開発者というよりは開発者のインターンが会社に入ってDropboxのリンクをメモの中に入れていて、Dropboxのリンクに入ると、機密情報が誰でもダウンロードできる状態だったのでかなり大変でしたね。ルスラン 川口Dropboxのリンクとか1回リンク作ってしまって期限なしになるから、それがどこかで漏れると、フォルダ以下だったらざくざく見れてしまいますね。 そうですね。プレミアムサービスに加入しなければ、基本的にアクセス経歴とかも取れない。ルスラン 牧田無料版で使っている場合は確かに。会社アカウントだけじゃなくて、個人のプライベートのアカウントで会社の情報まで間違ってコミットしちゃったというのがあって、ペンテスターってすごいですよね、すぐに人を特定して、この人がこのTwitterアカウントを持っていて、と紐付けて、そこで鍵が取れてしまって、とかいうのがあったりするので、プライベートで使う時は気を付けないといけないですよね。 川口会社が創業期だったりすると、そのあたりが割と緩く管理されたりするじゃないですか、個人の能力に依存してシステムが開発されてたりしてとか、もしくは中途で結構できるエンジニアが入ってきたりすると、ちょっと境界線が甘い時期があって、そういうところが突かれると厄介。会社が大きくなると結構きっちり分けて管理するようになると思うけど、会社のステージによっては割とケアされてなくて、ペンテスト受けてみて気付くパターン。 牧田僕が面白いと思ったのは、自分たちの会社で使うソースコードの中で、固有の言葉を入れて、それをクローリングしておくということ。誰かが間違ってパブリックにした時に、固有値を検索して引っかかるのですぐ止められるというのは、賢い対策。みんな気を付けて二重チェックとか三重チェックするといっても、注意力に頼る部分って限界があるので。 テーマ：運用管理体制のチェックが必要だと思ったこと 川口今度は運用回りで、このあたりはもう少し気にした方が安全なのでは？という事例を聞きたいと思う。開発できちんと作っていても、運用が一番ベタだけどシステムのパスワードを書いたExcelファイルがあって、パスワード管理台帳を取り出せるという例が結構あったりする。わたしもいろいろ相談を受ける中で、パスワード管理台帳を持って行かれて、さんざんシステムをペンテスターにやられましたという相談を受けることがあります。 結構あります。特にオンプレミスのドメインがあるとファイルサーバーもあるので、「平文パスワードの管理」「共通パスワードの管理」「脆弱なパスワード」が報告書の中のTOP3。たぶん最近はクラウドのみの環境になってきて、みなさんがパスワードマネージャーをきちんと使うようになってきて、少なくはなってきた。でも、やっぱり大企業やオンプレがある環境とかだと整理が大変だし、昔ながらのやり方で残していることが多いです。ルスラン 川口ここまで頑張ってやってるのに、なぜパスワードリストやパスワードを書いた手順書がさらりと置いてあるんだという感じの相談を受けると、ここがなんとかなればもうちょっと安全なのにと、見つけたのがセキュリティベンダーの方でよかったなあと。 そうですね。平文パスワードはないにしても、基本的に我々がゴールとするシステムが、仮になにかしら特殊に作られたシステムにしましょう、そのシステムのパスワードが毎日変わるわけでもないし、たぶんいつか作られてずっと運用されている形になるので、どの会社でも「納品物」みたいな感じのフォルダがあるんですね、そこに仕様書があって、その仕様書の中にパスワードが書いてあるとか、それで半分以上のパスワードが取れるという感じ。ルスラン 川口納品物フォルダはゾッとしますね。あるあるですけど。 納品されてからパスワードを変えていればいいけど、そのままなので…。隣りに変えてはだめと書いてあるので。ルスラン 川口パスワードは想像できるが、APIの鍵のような鍵管理をどう安全に運用していくかというのは、鍵を使わないケースというのはせいぜいSSHの公開鍵ぐらいという組織もあれば、APIの鍵をバンバン使いこなす企業もあるけど、鍵管理はどうですか？ SSHに関していうと、そもそもSSHで鍵を使って認証しているのであれば、かなりいい方という感じ。それにYubiKeyで二段階認証があれば、おお、すごいという。となると、基本的にそのサーバーは対象にしない。ゴールを達成するためには絶対にその経路を通るということは必要ないので、ほかを探すことに決めます。パスワードが分かっているSSHの証明書だったら、それはちょっと解析してみてみるとか、あとは社員個人のアカウントだったらそれで入ってみるとか、牧田さんと一緒にやった案件では、ある鍵ですべてのサーバーに入れたというところもありました。ルスラン 牧田各企業で監視用、障害対応のものを作りがちだけど、それが仮に攻撃者に取られたりすると、悪用されてしまう。 ほかのAPI鍵とかAWS鍵になってくると、今でも外部と内部という感じがあって、例えばある会社だと内部はセキュアという考え方で、その中では内部のGitがあって、内部のGitはそもそも認証なしでエクスプローラですべてのプロジェクトが見れたりして、それが内部だから鍵がそのままハードコードされていたりするのもあります。そうなると、アクセス制限ができてない会社がかなり多い。要は、開発者であってもアクセスできる領域がどこまでかを決めなければならないはずだが、何でもかんでもできるとか、一般社員で営業なのにGitに入れてプロジェクトをクローンできるとか、認証なしでイメージをとれるとか、そこからいろいろ鍵をとって本番環境まで至ってしまうこともあります。あとは、会社によっては、物理的にセキュアエリア、セキュアルームを作っているけど、論理的にはそこのネットワークに入れてしまうとあとは信頼性の高いエリアということで二段階認証もなにもないということもあります。オンプレ環境で横展開してしまうと、監視に気付かなければずっとそこにいて何でもできるという状態になります。二段階認証を破らないと入れない環境だと、かなりできてるな、と喜ぶ。しっかりやってるなと。ルスラン 牧田せっかくセキュリティルーム、物理的に行かないとデータベースに触れないという制限を作っても、運用を考えると、障害が発生した時に自宅から緊急対応したいじゃないですか、セキュリティパッチを緊急で当てたいとか。そうした場合、物理的にセキュリティルームとかデータセンターに行くのが難しいので、皆さんどうしても遠隔でアクセスしたくなるんですよね。で、メンテナンスの手順書を作り出して、きちんと鍵もパスワードもそこに丁寧に書きがち。そうすると、せっかく物理ルームにアクセス制限してるのに、緊急メンテナンス用、障害対応用のVPNの情報が見れてしまう、アクセスできてしまう場合が多いので、そこを使って入れてしまうということがあるんですね。 結局、緊急用の手順書や鍵を置いてあるところは仮にファイルサーバーとして考えても、ファイルサーバー自体がおそらく信頼のあるユーザーしかアクセスしないと考えられているかもしれないけど、ある権限までは入れてしまう、確かに物理的に行かないとどこかに入れないけど、手元に緊急用のVPNの認証情報がなんでもあるから、それを使い回してつなげばよいというのもある。もちろん繋げる時間を決めてあるかとか、繋がった途端監視されて切断されるとか、会社によってはプロセスがあるはずだけど、一番悪いシナリオでは、何も気付かれず監視されずだったらそこにまで入って終わってしまう。ルスラン 川口そんな危ないシステムを動かすのなら、Slackに一報を飛ばして欲しいですね。本当にここが突破されたらまずいというところは、通知が飛ぶ仕組みになってないと気付きようがないですね。 通知はすごくいいと思います。特に管理者側におすすめなのは、資産管理、どこに何があるかとか、そのシステム自体にはどのように入れるかを把握しておく、彼らが自分で考えて作った経路はあると思うけど、我々も中に入って社内wikiとかを読んで、正常に入れる経路を把握する、それがイコール我々がその経路を通ると検知されてしまう、だったらそれを通ってはいけない、だから同じサーバーなり同じシステムに、ほかには入る経路は何があるかとか、管理者自体がどんなふうに入ってメンテナンスするかを考えてみて、それを利用してしまうと実はそこには検知やアラートを出す仕組みをわざわざ入れてない、あるいは忘れたということがあって、最終のところまで入れてしまうということもある。検知を回避するという意味では。ルスラン 川口ある役所で相談を受けたとき、「分かりやすいところにパスワードを置いてありますから」と言ってました。悪い人が先に使うと思うので、先に使ってもらってアラートをあげてもらいますという。このバッチファイルなんですか、と聞いたら、「それはログインしたら危険なものです」という。分かりやすく置いてあるので、使われることをむしろ期待しているという、使った人がいたら速攻取り締まりますという。 それはいいですね、ハニーポット的な。ルスラン 川口わかりやすく置いていれば使われるんだという。たぶん、ログインすると全職員にアラート飛ぶんだろうなという。それは手間が掛からなくできそうだと。 その次のステップを考えないといけなくて、どこからやられたかとか、次に何を確認すべきか、という演習。IR（Incident Response）的な。要は、端末をネットワークから取り出さないといけないけど、どのくらい時間がかかるとか、ユーザーが高権限のアカウントをハニーポットにしてある場合は、高権限のアカウントで実は横展開されてしまった可能性はなないか、どういう風に実装していたかにもよるけど。ルスラン 牧田Active Directoryの問題があるじゃないですか、あれは非常に守りにくい。たぶんルスランさんは侵入できなかったことがないと思うんですけど、以前印象に残っていたフレーズで、「Active Directoryの侵入方法は無限にあるから大丈夫だ」と。侵入できそう？大丈夫？と聞くと、「無限にあるから大丈夫」という。ならばどう守ったらいいのという。例えば「administrator」というダミーのアカウントを作って、使われたら取り締まるというアイディアはいいなと。 でも、どのアカウントでも作っていいというわけではない。ある会社で、ダミーアカウントを作りましたと、でも、どう見てもそのアカウントを使いたいという気持ちにならなかった。なぜかというと、権限も何もなにもない、ログインした経歴もない、パスワードが弱いかもしれないがそのアカウントが取れたところで何も変わらないという。確かになんとかアドミンというアカウントだったけど、どうみても権限がなさ過ぎて逆に怪しいということは侵入者からは見えるんです。生きているかのようなアカウントで、多少権限があって履歴があるようなものを作ってあげないとすり抜けてしまう。ルスラン 川口クライアント認証をやっているシステムがあると思うけど、こういう時に突破できてしまう、こういう設定さえあればよかったのに、というエピソードがあれば。 最近、かなり多いですね。クライアント証明書、ウェブアプリとか、個人的にはすごくいいと思うけど、その認証はその証明書をどんなふうに保管するかいうのが大事になってくる。WindowsのマシンであればTPMで保存している場合は基本的には現時点では安全ですね。どこかにはまだ公開されていない攻撃があるけど、少なくても今のところはTPMからの証明書の奪取ができない状況ですね。ただし、TPMじゃなくて、ファイルとして保存してあるとか、スクリプトプロバイダーとかほかの形で保存してあるとかであれば、システム権限さえとれればWindows端末から証明書の奪取ができてしまうのが現実です。Macの端末の場合は違っていて、MacはKeychainというものがあって、ユーザー側とシステム側のKeychainがあって、ユーザーのセッションに会社から遠隔操作ができる状態になっていたら、基本的にはすごく簡単にダンプしてしまうということができる。システム側のKeychainに入っている場合は、ユーザー自分自身でルート権限でGUIから取るしかないのでまだ安全。ルスラン 川口証明書をさらりと普通のフォルダに置いているケースがありそうで怖いですね。 大企業の場合はどこかに集めてそれを配布するんですけど、全部バックアップ用に証明書が置いてあるとか。ルスラン 質疑応答 質問１：あるシステムに侵入しようとして、SELinux ON の場合に侵入失敗・断念する場合はどのくらいありますか？ 我々がやってる侵入の中では、Linuxにエクスプロイトを使って侵入するというケースはかなり少ない。基本的に運用や設計の問題で何かしてしまおうということが多くて、Linuxへアクセスするなら普通にSSHで一般社員がやるような形でかつバレない形にします。外部の場合は、例えばあるサービスが脆弱でそれを利用するということはないことはないけど、かなり少ないのかなと思います。ルスラン 川口SELinux自体を使いこなすことも難しいし、製品によってはSELinux OFFで使えということも書いてあるので、ONで使っている環境が圧倒的に少ないですね。きっちりできればいいけど、それでも日常のオペレーションで開発者、運用者と同じオペレーションでこられると、SELinuxが評価されてますね。 例えばリバースシェルがとれて、そこから侵入しようとすると、SE Linuxはかなり邪魔になるけど、そもそも我々が得たいなにかしらの目的にはSE Linuxを突破する必要性はないことが多い。必要であれば頑張るしかないし、別に触らなくてもいいという時もあります。ルスラン 川口だいだい、パスワードのExcelファイルが取れてたりするとそのまま入っていくよねということになるので、SE Linux以前の問題ですね。 我々の目的が何でもかんでも侵入していくのではなく、会社の資産、クレジットカード情報、個人情報だったりソースコードだったり、これを入手するということなので、経路は何でもいいということもあるんですね。ムリにそこを通らなくてもいいと。ルスラン 質問２：「9割侵入できる」ということですが、実際にそこからデータ窃取できる割合はどの程度なのでしょうか？ 大体同じ割合です。ただ、ゴールが何になるかで変わったりする。ドメイン管理者を取ることがゴールでそこで終わるケースもあるし、守りたい資産、データへ入れるかどうかというケースもある。侵入はどちらも成功しているので確かに9割以上になるけど、データの取得まで頼まれたところで、できなかったことはほぼない、といえます。ルスラン 川口データの取得がゴールの場合、できなかったことはないのはすごいいい答えです。方法は無限にあるからというのと一緒で、分かる気がするんですよ。いろんな企業にお会いすると、ルスランさんにやられることを期待する企業の方が時々いるんですけど、ほんとにみんな取られたいんだなという。 簡単に言うと、時間と予算の問題もあるので、我々が例えばスコープとしてフィッシングも入れますか、内部フィッシングを入れますかとか内部IRを突破しながらやりますかとか、IRに捕まったらどうしますかとか、無限の質問があるんですけど、IRに捕まったら無意味みたいなシステムの脆弱性だけを見るんだったら短縮の時間でいろいろやってできましたということを見せればいいし、IRが強いとかいう会社ならば、じゃあIRのままでやってみましょう、捕まることは可能か不可能かというところを見てみましょうというケースもある。ルスラン 川口ここでIRというのは、SOCのチームがいますよとか、CSIRTとの連携ができてますとか、それも含めてのIR？ はい。例えば社内のSOCがあるとか、誰かレスポンスできるような守り側のチーム、セキュリティチームみたいな人たちがいるとか、アウトソーシングしている、委託のSOCがいるとか、いろいろあったりする。ルスラン 牧田ペンテストの目的がセキュリティを試すことというお客様もいますし、ブルーチームとか、IR、セキュリティチームがちゃんと運用できているか確認したいお客様もいます。ノイズが多いじゃないですか、誤検知とか、アラート来たけど違ったとか、そんな時に1回本物のやつを入れてみる。本物のやつが来た時に、24時間以内に検知して対策できるかどうか、そういう目的でやられるお客様もいらっしゃる。 質問３：多要素認証のあるWebサイトの認証を通すのが毎回面倒です。ユーザビリティを落とさないセキュリティ強化はありませんか？ 川口確かに、毎回多要素認証求めてくるなよ、というのはやる側もすごく思うところ。このブラウザを覚えて欲しい、とすごく思うけど、多要素認証が全部入れば言うことないということだけど、それはなかなか社内で浸透させにくいし、開発者に関しても開発効率が落ちるから何とかしてくれと言われそうだけど、お客様との会話や報告会でどういうアドバイスをされるんですか？ セキュリティ＝ユーザビリティではないからですね、残念ながら。ルスラン 牧田攻撃者目線を知ると、ちょっと我慢できるようになるかもしれませんね。例えば、パスワードの話に戻るけど、IDとパスワードだけの認証の場合、いろいろなサービスから漏れたパスワードをそのまま使っている方々もいっぱいいるし、それをちょっと1文字変えてとかでできることもあるし、Active Directoryのドメインコントローラに侵入できて、ハッシュ値を取って、8桁だと何時間で解けるんでしたっけ？ ハッシュの種類によるけど、Windowsであれば我々のサーバーなら数時間。ルスラン 牧田むかし、パスワードを8桁にしようよ、6桁はだめよ、という話があったけど、8桁のパスワードで数時間。どうしてもパスワードは漏れる。Emotetのように、ブラウザに保存したパスワードはダンプできてしまうんですよね。全部保存をしていたパスワードとIDが漏れてしまう前提で考えると、やっぱり我慢しようかという風に思えるかもしれませんね。 川口ブラウザにパスワードを覚えさせるのは、非ITの人にはしょうがないという気がするけど、IT業界の人にはパスワードマネージャーを会社で導入してなんとかしたいという気もしますよね。 牧田ブラウザのパスワードをダンプする、そうすればパスワードマネージャーを使いましょうという。恐ろしいですよ、すべての履歴をとられてしまう。 パスワードマネージャーも端末で実行できるんであれば、ダメかなと。ものによって、例えばシステム権限で動いていたりするので、権限昇格をしない限りはまだマシであったりすることもあるんですけど、我々がやるときは権限昇格が必要だったら、必要に応じてゼロデイを探して出してやるというところもあったりする。時間が許す限りはやれるけど、テストの期間はそれほど長くないので、3日程度で見つけられるのなら探すんですけど、それ以上かかるものは期間内には触らない。ルスラン 川口ペンテスターがゼロデイを見つけてくるとさらりと言うのは衝撃的だと思う。 牧田次回の話題にしたいんですけど、セキュリティ製品って権限が高いじゃないですか、セキュリティ製品にゼロデイがあるととんでもないことになる。我々一般の人はセキュリティ製品を信じるけど、ペンテスターは、2～3日で見つけられるのならゼロデイ見つけておこうか、そんな感じ。 あとは多要素認証について追加で言うと、各サイトに与える認証とかがあると便利だけど、SSOはあるにしてもその中で多要素認証みたいなものを実現できるのであればいいと思ったりして、例えばAzureのIdPを使って、いろんなアプリケーションにテストするけど、それはそれでよいけど、ただし、何を追加して欲しいかというと、例えば一部のアプリを絶対に守らなければいけない、例えばAWSの管理コンソールとかAzureの管理コンソールとかがあったりしたら、そこだけに例えばFIDOの確認を追加する、SSOされるときにはそこにアクセスする瞬間、多要素認証を聞かれる、多要素認証もできる限りFIDOにする、というのを個人的におすすめだと思う。ルスラン さいごに ご視聴・ご参加いただき、ありがとうございました。参加いただいた方からは参考になりました、興味深かった、またやってほしいですなど、温かいコメントをたくさんいただき、大変嬉しく思っております。重ねて御礼申し上げます。 映像はアーカイブ公開しておりますので、以下より是非ご視聴ください。 https://youtu.be/TzBleQoIENg

　前回Power AutomateとPower Appsの連携でメールアプリを開発しました。前回はPower AutomateとPower Appsの連携方法を紹介するために遠回りしましたが、実はPower Apps単体でもメール送信アプリの開発が可能です。さらに添付ファイルも1つだけではなく、複数添付しての送信がとなります。今回はPower Appsでメール送信アプリを開発してみましょう。 添付ファイルコントロールの追加 　まずは空のキャンバスアプリから開始します。 面倒な処理を先に片付けてしまいましょう。前回も触れました「添付ファイルコントロール」を配置します。（Power AppsではSharePointリストの添付ファイルカードを利用する時だけ「添付ファイルコントロール」が表示されるようになっています。一時的にSharePointのリストに接続して「添付ファイルコントロール」を表示させて再利用する方法になります。） データの追加から「コネクタ」-「SharePoint」を選択します。 一覧からリストがある適当なサイトを指定して、リストを選択して接続します。 「挿入」メニューから「フォーム」-「編集」を選択します。 SharePointのリストを選択します。 添付ファイルカードを右クリックして「ロック解除」を選択します。 「添付ファイルコントロール」をコピーします。 「Screen1」を選択してCtrl+Vで貼り付けます。 「Form１」は利用しないので削除しておきましょう。 データコネクタの追加 このようにテキストボックス、リッチテキストボックス、添付ファイルコントロール、送信ボタンを配置します。 「データ」を表示します。SharePointのデータは不要ですので削除します。 「データの追加」から「コネクタ」-「Office 365 Outlook」を選択します。 送信ボタンの「OnSelect」に以下のコードを記載します。（テキストボックス等の名前は任意に変更しています。） Office365Outlook.SendEmailV2( txtMailAddress.Text, txtSubject.Text, txtContent.HtmlText, { Attachments: AddColumns( RenameColumns( DataCardValue3_1.Attachments ,"Value","ContentBytes"),"@odata.type","" ) }) 最後にエラーが出ているところがありますが、こちらは「添付ファイルコントロール」をコピーしてきたためのエラーなので、該当箇所は全て空白にしてエラーを回避します。 テスト 複数の添付ファイル付きで送信テストを行います。 2つの添付ファイルも問題なくメール送信が成功しました。 　以上、Power Apps 単体でのメール送信アプリの開発方法を紹介しました。実際はデータコネクタとしてOffice 365 Outlookを利用しています。メール送信時の面倒な認証手続きなど考慮することなく、さらに添付ファイルもきちんと送信できる実用レベルのアプリ開発がわずかなコードのみで完成しました。 アイディア次第でまだまだ機能を追加してさらにレベルアップしたアプリ開発を楽しみましょう。

こんにちは。GMOインターネット 新里です。組込み・IoT的な端末でよく利用されているmbedTLSの最新バージョンを使って、TLS 1.3〜QUICの暗号化まで実際にESP32を利用して行ってみます。 mbedTLS mbedTLS は組込み機器などで使われるコンパクトなサイズのSSL/TSLライブラリです。よく知られているSSLライブラリではOpenSSL/BoringSSLなどがありますね。ただ、IoT的な端末などではスペックが限られたものになります。例えば、僕が利用する端末だとアプリケーションを組込める領域がわずか256Kbyteというサイズとかだったりします。そういったIoT的な機器や組込み機器のようなスペックで、PCやサーバーで利用されているようなSSL/TLSライブラリを組込んで使うのはスペック的にも難しいです。そこで使われるのが組込み端末向けのコンパクトなライブラリというわけです。 mbedTLSの他にも組込み機器向けをターゲットにしたSSL/TSLライブラリに wolfSSL もあります。個人的にはmbedTLS、wolfSSLは組込み機器向けOSS SSL/TLSでよく見るものです。 気がついたら... そんなmbedTLSを組込みで利用していて、気がついたらバージョンが3.1.0になっていました。他にもバージョンが何個かあって、現時点では... ・2.16.x　：Long Time Supportの最後のバージョン。2.28系への移行を勧める。・2.28.x　：2024年末までバグ・セキュリティフィックスのサポートが行われる。・3.1.x 　：最新のバグ・セキュリティフィックス、機能追加が行われる。 僕が個人的にメンテしているライブラリでは2.16系を使っていたので、とりあえず2.28.0にアップデートしました。このとき、PSA（Platform Security Architecture）というモジュールセットが追加されて全体的にドラスティックに構成が変わっていて、これらを組込むのが地味に面倒でした。ただ、2.28.x系はあと2年弱でサポート対象から外れてしまうという事もあって、今後のアップデートを考えると最新の3.1系を追いかけた方が良さそうです。 mbedTLS 3.1系を見てみる mbedTLSはconfig（ヘッダファイル）で利用するアルゴリズムを設定することが出来ます。例えば、DTLSを使いたかったら"#define MBEDTLS_SSL_PROTO_DTLS"を書いておくといった感じです。mbedTLS 3.1系では諸々の設定が書いてあるのは mbedtls_confi.h になっていました。ざっと見てみて個人的におや？と思った点はこの辺です。 ・MBEDTLS_SSL_PROTO_TLS1_3が入ってきた。・TLS 1.0/1.1, 3DES, MD2, MD5, RC4, Blowfish, XTEAが無くなった。・PSA周りの設定が増えていた。 MBEDTLS_SSL_PROTO_TLS1_3_EXPERIMENTALだったのが、EXPERIMENTALが取れていました。これから組込みもTLS 1.3に向かっていくぞ!!という気持ちを感じます。 TLS 1.3をPC上で使ってみる 現時点での最新版 mbedTLS 3.10 をとりあえずビルドしてサンプルプログラム経由で、www.google.com にTLS 1.3でアクセスしてみます。（環境はMacを利用しています。ビルドエラーで必要な物は適宜brewで入れます。） wget https://github.com/Mbed-TLS/mbedtls/archive/refs/tags/v3.1.0.tar.gz tar -zxvf v3.1.0.tar.gz cd mbedtls-3.1.0 # include/mbedtls/mbedtls_config.h から # MBEDTLS_SSL_PROTO_TLS1_3 # MBEDTLS_SSL_TLS1_3_COMPATIBILITY_MODE # をコメントアウトしてビルド make # www.google.com に接続してみる。Root CAをダウンロード wget https://pki.goog/repo/certs/gtsr1.pem # force_version=tls13 を付けてTLS 1.3でアクセス ./programs/ssl/ssl_client2 server_name=www.google.com server_port=443 ca_file=./gtsr1.pem force_version=tls13 このとき、本当にTLS 1.3でアクセスしているのか？Wiresharkを使って同時に観測します。 TLS 1.3でアクセスしているようです。1-RTTで終わるはずが、なぜかクライアント側からChange Cipher Specが飛んでいます。これはMBEDTLS_SSL_TLS1_3_COMPATIBILITY_MODE の説明にある通り（RFC 8446 D.4. Middlebox Compatibility Mode）、ミドルボックスの下位互換性のために投げている空のChange Cipher Specですね。 ESP32からTLS 1.3を使ってみる とりあえずTLS 1.3で通信が出来たので、実際に組込みで使いたくなるのは人の性でしょう。ここではESP32 Devboardからアクセスして使ってみます。というのも、ESP32 IDF(Arduino IDEでも)ではmbedTLSが利用されていて、とりあえず動かしてみるのにはちょうど良かったのもあります。ここで利用するのは、ESP-WROOM-32ブレイクアウトSD+です。 ESP-IDF のmbedTLSの組込み実装を見てみたところ、リポジトリの最新は既に3.1.0向けになっていました。releaseバージョンではまだですが、今後はESP32のTLSでもmbedTLS 3.1系が利用されることが想像されます。とりあえず esp-idf 経由で先程と同じく www.google.com にTLS1.3でアクセスしてみます。 # release バージョンではなく、最新のrepoから全部取得してくる。 git clone --recursive https://github.com/espressif/esp-idf.git cd esp-idf # esp-idf の環境構築手順 # https://docs.espressif.com/projects/esp-idf/en/latest/esp32/get-started/linux-macos-setup.html # 手順に従って環境を準備する。 # 必要なパッケージをインストール・手順に従ってビルド環境を整備する。 # ここからが本番 cp -r examples/protocols/https_mbedtls/ . cd https_mbedtls idf.py set-target esp32 idf.py menuconfig PC上ではmbedTLSのconfigを直接変更しましたが、esp idfではmenuconfigから設定することが出来ます。menuconfigの ”Component config” -> “mbedTLS” -> “mbedTLS v3.x related” -> “Support TLS 1.3 protocol” を有効にします。この時、WiFiの接続設定も ”Example Connection Configuration” から行って、NWに接続できるようにしておく。 次にソースコードを少し修正します。このままだとTLS 1.2で接続するので、サンプルの https_mbedtls_example_main.c を以下のように修正します。サンプルコードなので全体を載せておきます。 #include <string.h> #include <stdlib.h> #include "freertos/FreeRTOS.h" #include "freertos/task.h" #include "esp_wifi.h" #include "esp_event.h" #include "esp_log.h" #include "esp_system.h" #include "nvs_flash.h" #include "protocol_examples_common.h" #include "esp_netif.h" #include "lwip/err.h" #include "lwip/sockets.h" #include "lwip/sys.h" #include "lwip/netdb.h" #include "lwip/dns.h" #include "mbedtls/platform.h" #include "mbedtls/net_sockets.h" #include "mbedtls/esp_debug.h" #include "mbedtls/ssl.h" #include "mbedtls/entropy.h" #include "mbedtls/ctr_drbg.h" #include "mbedtls/error.h" #include "esp_crt_bundle.h" // 接続先はGoogle #define WEB_SERVER "www.google.com" #define WEB_PORT "443" #define WEB_URL "/" static const char *TAG = "example"; static const char *REQUEST = "GET " WEB_URL " HTTP/1.0\r\n" "Host: "WEB_SERVER"\r\n" "User-Agent: esp-idf/1.0 esp32\r\n" "\r\n"; // GTS Root R1 のPEMを取ってきて置いとく #define GTSR1_CA_PEM \ "-----BEGIN CERTIFICATE-----\r\n" \ "MIIFVzCCAz+gAwIBAgINAgPlk28xsBNJiGuiFzANBgkqhkiG9w0BAQwFADBHMQsw\r\n" \ "CQYDVQQGEwJVUzEiMCAGA1UEChMZR29vZ2xlIFRydXN0IFNlcnZpY2VzIExMQzEU\r\n" \ "MBIGA1UEAxMLR1RTIFJvb3QgUjEwHhcNMTYwNjIyMDAwMDAwWhcNMzYwNjIyMDAw\r\n" \ "MDAwWjBHMQswCQYDVQQGEwJVUzEiMCAGA1UEChMZR29vZ2xlIFRydXN0IFNlcnZp\r\n" \ "Y2VzIExMQzEUMBIGA1UEAxMLR1RTIFJvb3QgUjEwggIiMA0GCSqGSIb3DQEBAQUA\r\n" \ "A4ICDwAwggIKAoICAQC2EQKLHuOhd5s73L+UPreVp0A8of2C+X0yBoJx9vaMf/vo\r\n" \ "27xqLpeXo4xL+Sv2sfnOhB2x+cWX3u+58qPpvBKJXqeqUqv4IyfLpLGcY9vXmX7w\r\n" \ "Cl7raKb0xlpHDU0QM+NOsROjyBhsS+z8CZDfnWQpJSMHobTSPS5g4M/SCYe7zUjw\r\n" \ "TcLCeoiKu7rPWRnWr4+wB7CeMfGCwcDfLqZtbBkOtdh+JhpFAz2weaSUKK0Pfybl\r\n" \ "qAj+lug8aJRT7oM6iCsVlgmy4HqMLnXWnOunVmSPlk9orj2XwoSPwLxAwAtcvfaH\r\n" \ "szVsrBhQf4TgTM2S0yDpM7xSma8ytSmzJSq0SPly4cpk9+aCEI3oncKKiPo4Zor8\r\n" \ "Y/kB+Xj9e1x3+naH+uzfsQ55lVe0vSbv1gHR6xYKu44LtcXFilWr06zqkUspzBmk\r\n" \ "MiVOKvFlRNACzqrOSbTqn3yDsEB750Orp2yjj32JgfpMpf/VjsPOS+C12LOORc92\r\n" \ "wO1AK/1TD7Cn1TsNsYqiA94xrcx36m97PtbfkSIS5r762DL8EGMUUXLeXdYWk70p\r\n" \ "aDPvOmbsB4om3xPXV2V4J95eSRQAogB/mqghtqmxlbCluQ0WEdrHbEg8QOB+DVrN\r\n" \ "VjzRlwW5y0vtOUucxD/SVRNuJLDWcfr0wbrM7Rv1/oFB2ACYPTrIrnqYNxgFlQID\r\n" \ "AQABo0IwQDAOBgNVHQ8BAf8EBAMCAYYwDwYDVR0TAQH/BAUwAwEB/zAdBgNVHQ4E\r\n" \ "FgQU5K8rJnEaK0gnhS9SZizv8IkTcT4wDQYJKoZIhvcNAQEMBQADggIBAJ+qQibb\r\n" \ "C5u+/x6Wki4+omVKapi6Ist9wTrYggoGxval3sBOh2Z5ofmmWJyq+bXmYOfg6LEe\r\n" \ "QkEzCzc9zolwFcq1JKjPa7XSQCGYzyI0zzvFIoTgxQ6KfF2I5DUkzps+GlQebtuy\r\n" \ "h6f88/qBVRRiClmpIgUxPoLW7ttXNLwzldMXG+gnoot7TiYaelpkttGsN/H9oPM4\r\n" \ "7HLwEXWdyzRSjeZ2axfG34arJ45JK3VmgRAhpuo+9K4l/3wV3s6MJT/KYnAK9y8J\r\n" \ "ZgfIPxz88NtFMN9iiMG1D53Dn0reWVlHxYciNuaCp+0KueIHoI17eko8cdLiA6Ef\r\n" \ "MgfdG+RCzgwARWGAtQsgWSl4vflVy2PFPEz0tv/bal8xa5meLMFrUKTX5hgUvYU/\r\n" \ "Z6tGn6D/Qqc6f1zLXbBwHSs09dR2CQzreExZBfMzQsNhFRAbd03OIozUhfJFfbdT\r\n" \ "6u9AWpQKXCBfTkBdYiJ23//OYb2MI3jSNwLgjt7RETeJ9r/tSQdirpLsQBqvFAnZ\r\n" \ "0E6yove+7u7Y/9waLd64NnHi/Hm3lCXRSHNboTXns5lndcEZOitHTtNCjv0xyBZm\r\n" \ "2tIMPNuzjsmhDYAPexZ3FL//2wmUspO8IFgV6dtxQ/PeEMMA3KgqlbbC1j+Qa3bb\r\n" \ "bP6MvPJwNQzcmRk13NfIRmPVNnGuV/u3gm3c\r\n" \ "-----END CERTIFICATE-----" const unsigned char gtsr1_pem[] = GTSR1_CA_PEM; static void https_get_task(void *pvParameters) { char buf[512]; int ret, flags, len; mbedtls_entropy_context entropy; mbedtls_ctr_drbg_context ctr_drbg; mbedtls_ssl_context ssl; mbedtls_x509_crt cacert; mbedtls_ssl_config conf; mbedtls_net_context server_fd; mbedtls_ssl_init(&ssl); mbedtls_x509_crt_init(&cacert); mbedtls_ctr_drbg_init(&ctr_drbg); ESP_LOGI(TAG, "Seeding the random number generator"); mbedtls_ssl_config_init(&conf); mbedtls_entropy_init(&entropy); if((ret = mbedtls_ctr_drbg_seed(&ctr_drbg, mbedtls_entropy_func, &entropy, NULL, 0)) != 0) { ESP_LOGE(TAG, "mbedtls_ctr_drbg_seed returned %d", ret); abort(); } ESP_LOGI(TAG, "Attaching the certificate bundle..."); ret = esp_crt_bundle_attach(&conf); if(ret < 0) { ESP_LOGE(TAG, "esp_crt_bundle_attach returned -0x%x\n\n", -ret); abort(); } ESP_LOGI(TAG, "Setting hostname for TLS session..."); /* Hostname set here should match CN in server certificate */ if((ret = mbedtls_ssl_set_hostname(&ssl, WEB_SERVER)) != 0) { ESP_LOGE(TAG, "mbedtls_ssl_set_hostname returned -0x%x", -ret); abort(); } ESP_LOGI(TAG, "Setting up the SSL/TLS structure..."); if((ret = mbedtls_ssl_config_defaults(&conf, MBEDTLS_SSL_IS_CLIENT, MBEDTLS_SSL_TRANSPORT_STREAM, MBEDTLS_SSL_PRESET_DEFAULT)) != 0) { ESP_LOGE(TAG, "mbedtls_ssl_config_defaults returned %d", ret); goto exit; } /* MBEDTLS_SSL_VERIFY_OPTIONAL is bad for security, in this example it will print a warning if CA verification fails but it will continue to connect. You should consider using MBEDTLS_SSL_VERIFY_REQUIRED in your own code. */ mbedtls_ssl_conf_authmode(&conf, MBEDTLS_SSL_VERIFY_OPTIONAL); // root caの読み込みとセッションチケットを有効にしておいた // あとはTLSの鍵交換モードの設定、re-negotiationはとりあえず無効に // TLSの最大・最小バージョンをTLS 1.3固定 // 上記の記載のとおり、サンプルなので、本来はちゃんとVERIFYすること!! mbedtls_x509_crt_parse( &cacert, gtsr1_pem, sizeof(gtsr1_pem) ); mbedtls_ssl_conf_session_tickets( &conf, MBEDTLS_SSL_SESSION_TICKETS_ENABLED ); mbedtls_ssl_conf_tls13_key_exchange_modes( &conf, MBEDTLS_SSL_TLS1_3_KEY_EXCHANGE_MODE_ALL ); mbedtls_ssl_conf_renegotiation( &conf, MBEDTLS_SSL_RENEGOTIATION_DISABLED ); mbedtls_ssl_conf_min_version( &conf, MBEDTLS_SSL_MAJOR_VERSION_3, MBEDTLS_SSL_MINOR_VERSION_4 ); mbedtls_ssl_conf_max_version( &conf, MBEDTLS_SSL_MAJOR_VERSION_3, MBEDTLS_SSL_MINOR_VERSION_4 ); mbedtls_ssl_conf_ca_chain(&conf, &cacert, NULL); mbedtls_ssl_conf_rng(&conf, mbedtls_ctr_drbg_random, &ctr_drbg); #ifdef CONFIG_MBEDTLS_DEBUG mbedtls_esp_enable_debug_log(&conf, CONFIG_MBEDTLS_DEBUG_LEVEL); #endif if ((ret = mbedtls_ssl_setup(&ssl, &conf)) != 0) { ESP_LOGE(TAG, "mbedtls_ssl_setup returned -0x%x\n\n", -ret); goto exit; } while(1) { mbedtls_net_init(&server_fd); ESP_LOGI(TAG, "Connecting to %s:%s...", WEB_SERVER, WEB_PORT); if ((ret = mbedtls_net_connect(&server_fd, WEB_SERVER, WEB_PORT, MBEDTLS_NET_PROTO_TCP)) != 0) { ESP_LOGE(TAG, "mbedtls_net_connect returned -%x", -ret); goto exit; } ESP_LOGI(TAG, "Connected."); mbedtls_ssl_set_bio(&ssl, &server_fd, mbedtls_net_send, mbedtls_net_recv, NULL); ESP_LOGI(TAG, "Performing the SSL/TLS handshake..."); while ((ret = mbedtls_ssl_handshake(&ssl)) != 0) { if (ret != MBEDTLS_ERR_SSL_WANT_READ && ret != MBEDTLS_ERR_SSL_WANT_WRITE) { ESP_LOGE(TAG, "mbedtls_ssl_handshake returned -0x%x", -ret); goto exit; } } ESP_LOGI(TAG, "Verifying peer X.509 certificate..."); if ((flags = mbedtls_ssl_get_verify_result(&ssl)) != 0) { /* In real life, we probably want to close connection if ret != 0 */ ESP_LOGW(TAG, "Failed to verify peer certificate!"); bzero(buf, sizeof(buf)); mbedtls_x509_crt_verify_info(buf, sizeof(buf), " ! ", flags); ESP_LOGW(TAG, "verification info: %s", buf); } else { ESP_LOGI(TAG, "Certificate verified."); } ESP_LOGI(TAG, "Cipher suite is %s", mbedtls_ssl_get_ciphersuite(&ssl)); ESP_LOGI(TAG, "Writing HTTP request..."); size_t written_bytes = 0; do { ret = mbedtls_ssl_write(&ssl, (const unsigned char *)REQUEST + written_bytes, strlen(REQUEST) - written_bytes); if (ret >= 0) { ESP_LOGI(TAG, "%d bytes written", ret); written_bytes += ret; } else if (ret != MBEDTLS_ERR_SSL_WANT_WRITE && ret != MBEDTLS_ERR_SSL_WANT_READ) { ESP_LOGE(TAG, "mbedtls_ssl_write returned -0x%x", -ret); goto exit; } } while(written_bytes < strlen(REQUEST)); ESP_LOGI(TAG, "Reading HTTP response..."); do { len = sizeof(buf) - 1; bzero(buf, sizeof(buf)); ret = mbedtls_ssl_read(&ssl, (unsigned char *)buf, len); if(ret == MBEDTLS_ERR_SSL_WANT_READ || ret == MBEDTLS_ERR_SSL_WANT_WRITE) continue; if(ret == MBEDTLS_ERR_SSL_PEER_CLOSE_NOTIFY) { ret = 0; break; } if(ret < 0) { ESP_LOGE(TAG, "mbedtls_ssl_read returned -0x%x", -ret); break; } if(ret == 0) { ESP_LOGI(TAG, "connection closed"); break; } len = ret; ESP_LOGD(TAG, "%d bytes read", len); /* Print response directly to stdout as it is read */ for(int i = 0; i < len; i++) { putchar(buf[i]); } } while(1); mbedtls_ssl_close_notify(&ssl); exit: mbedtls_ssl_session_reset(&ssl); mbedtls_net_free(&server_fd); if(ret != 0) { mbedtls_strerror(ret, buf, 100); ESP_LOGE(TAG, "Last error was: -0x%x - %s", -ret, buf); } putchar('\n'); // JSON output doesn't have a newline at end static int request_count; ESP_LOGI(TAG, "Completed %d requests", ++request_count); printf("Minimum free heap size: %d bytes\n", esp_get_minimum_free_heap_size()); for(int countdown = 10; countdown >= 0; countdown--) { ESP_LOGI(TAG, "%d...", countdown); vTaskDelay(1000 / portTICK_PERIOD_MS); } ESP_LOGI(TAG, "Starting again!"); } } void app_main(void) { ESP_ERROR_CHECK( nvs_flash_init() ); ESP_ERROR_CHECK(esp_netif_init()); ESP_ERROR_CHECK(esp_event_loop_create_default()); /* This helper function configures Wi-Fi or Ethernet, as selected in menuconfig. * Read "Establishing Wi-Fi or Ethernet Connection" section in * examples/protocols/README.md for more information about this function. */ ESP_ERROR_CHECK(example_connect()); xTaskCreate(&https_get_task, "https_get_task", 8192, NULL, 5, NULL); } あとはESP32にフラッシュして実際にシリアル経由で書き込んで、実際にTLS 1.3で www.google.com にアクセスできることを確認します。 どうやらバッチリアクセスできているようです。この時はWindows PCのモバイルホットスポットを利用して、Wiresharkでパケットキャプチャーをしましたが、こちらもTLS 1.3でアクセスしているログが取れました。 QUICの暗号化を行う ここまでやったら、mbedTLS を使ってQUICの暗号化・復号化をしたくなるのは人の性ですね。ここでは、RFC 9001のAppendix Aにあるサンプルパケットを使ってやってみます。 #include <stdio.h> #include <stdlib.h> #include <string.h> #include "common.h" #include "mbedtls/platform.h" #include "mbedtls/net_sockets.h" #include "mbedtls/ssl.h" #include "mbedtls/entropy.h" #include "mbedtls/ctr_drbg.h" #include "mbedtls/hmac_drbg.h" #include "mbedtls/x509.h" #include "mbedtls/error.h" #include "mbedtls/debug.h" #include "mbedtls/timing.h" #include "mbedtls/base64.h" #include "mbedtls/hkdf.h" #include "mbedtls/gcm.h" #include <ssl_misc.h> #include "ssl_tls13_keys.h" #define BUFFER_SIZE 2000 // RFC 9001, 5.2. Initial Secrets, salt unsigned char salt[20] = { 0x38,0x76,0x2c,0xf7,0xf5,0x59,0x34,0xb3,0x4d,0x17,0x9a,0xe6,0xa4,0xc8,0x0c,0xad, 0xcc,0xbb,0x7f,0x0a}; // RFC 9001, Appendix A.2. Client Initial QUIC long header // c300000001088394c8f03e5157080000449e00000002 // c3 = long header(1byte) // 00 00 00 01 = version (4byte) // 08 = DCID Len (1byte) // 83 94 c8 f0 3e 51 57 08 = Destination Connection ID (8byte) // 00 = SCID Len(1byte) // 00 = Token Length (1byte) // 449e = length = 1182 (2byte) // 00 00 00 02 = packet number = 2(pn_length) unsigned char plane_header[22] = { 0xc3,0x00,0x00,0x00,0x01,0x08,0x83,0x94,0xc8,0xf0,0x3e,0x51,0x57,0x08,0x00,0x00, 0x44,0x9e,0x00,0x00,0x00,0x02}; // RFC 9001, Appendix A.2. Client Initial payload unsigned char plane_payload[245] = { 0x06,0x00,0x40,0xf1,0x01,0x00,0x00,0xed,0x03,0x03,0xeb,0xf8,0xfa,0x56,0xf1,0x29, 0x39,0xb9,0x58,0x4a,0x38,0x96,0x47,0x2e,0xc4,0x0b,0xb8,0x63,0xcf,0xd3,0xe8,0x68, 0x04,0xfe,0x3a,0x47,0xf0,0x6a,0x2b,0x69,0x48,0x4c,0x00,0x00,0x04,0x13,0x01,0x13, 0x02,0x01,0x00,0x00,0xc0,0x00,0x00,0x00,0x10,0x00,0x0e,0x00,0x00,0x0b,0x65,0x78, 0x61,0x6d,0x70,0x6c,0x65,0x2e,0x63,0x6f,0x6d,0xff,0x01,0x00,0x01,0x00,0x00,0x0a, 0x00,0x08,0x00,0x06,0x00,0x1d,0x00,0x17,0x00,0x18,0x00,0x10,0x00,0x07,0x00,0x05, 0x04,0x61,0x6c,0x70,0x6e,0x00,0x05,0x00,0x05,0x01,0x00,0x00,0x00,0x00,0x00,0x33, 0x00,0x26,0x00,0x24,0x00,0x1d,0x00,0x20,0x93,0x70,0xb2,0xc9,0xca,0xa4,0x7f,0xba, 0xba,0xf4,0x55,0x9f,0xed,0xba,0x75,0x3d,0xe1,0x71,0xfa,0x71,0xf5,0x0f,0x1c,0xe1, 0x5d,0x43,0xe9,0x94,0xec,0x74,0xd7,0x48,0x00,0x2b,0x00,0x03,0x02,0x03,0x04,0x00, 0x0d,0x00,0x10,0x00,0x0e,0x04,0x03,0x05,0x03,0x06,0x03,0x02,0x03,0x08,0x04,0x08, 0x05,0x08,0x06,0x00,0x2d,0x00,0x02,0x01,0x01,0x00,0x1c,0x00,0x02,0x40,0x01,0x00, 0x39,0x00,0x32,0x04,0x08,0xff,0xff,0xff,0xff,0xff,0xff,0xff,0xff,0x05,0x04,0x80, 0x00,0xff,0xff,0x07,0x04,0x80,0x00,0xff,0xff,0x08,0x01,0x10,0x01,0x04,0x80,0x00, 0x75,0x30,0x09,0x01,0x10,0x0f,0x08,0x83,0x94,0xc8,0xf0,0x3e,0x51,0x57,0x08,0x06, 0x04,0x80,0x00,0xff,0xff}; // 16進ダンプ用 void keydump(unsigned char *key, int length) { for (int i = 0; i < length; i++) { if (i != 0 && i % 32 == 0) printf("\n"); else if (i != 0 && i % 16 == 0) printf(" "); printf ("%02x", key[i]); } printf("\n"); } // mbedTLSを使ってAES128_GCM 暗号化(とりあえずサンプルなのでretはスルー) int encrypt_payload(unsigned char *key, size_t keylen, unsigned char *iv, size_t ivsize, unsigned char *ad, size_t adsize, unsigned char *from, size_t fromsize, unsigned char *to, size_t tosize, size_t *olen) { int ret; mbedtls_gcm_context ctx; mbedtls_cipher_id_t cipher = MBEDTLS_CIPHER_ID_AES; int output_len; unsigned char tag_output[16]; size_t tag_len = sizeof(tag_output); size_t tmpolen; // 鍵・Associated Data、電文を設定して暗号化 mbedtls_gcm_init(&ctx); ret = mbedtls_gcm_setkey(&ctx, cipher, key, keylen); // mbedtls_gcm_crypt_and_tag と同等の処理 ret = mbedtls_gcm_starts(&ctx, MBEDTLS_GCM_ENCRYPT, iv, ivsize); ret = mbedtls_gcm_update_ad(&ctx, ad, adsize); ret = mbedtls_gcm_update(&ctx, from, fromsize, to, tosize, olen); ret = mbedtls_gcm_finish(&ctx, NULL, 0, &tmpolen, tag_output, sizeof(tag_output) ); // 最後にtagを付与する memcpy(to + *olen, tag_output, sizeof(tag_output)); *olen = *olen + 16; mbedtls_gcm_free(&ctx); return ret; } int main() { int ret = 0; unsigned char enc_payload[BUFFER_SIZE + 1]; // デバッグレベルを3にしておく mbedtls_debug_set_threshold( 3 ); // client secret/key/iv/hp を salt, did(distinatin connection id) から取得 const mbedtls_md_info_t *md = mbedtls_md_info_from_type( MBEDTLS_MD_SHA256 ); unsigned char initial_secret[mbedtls_md_get_size(md)]; ret = mbedtls_hkdf_extract( md, salt, 20, plane_header+6, 8, &initial_secret); unsigned char client_secret[32]; unsigned char client_key[16]; unsigned char client_iv[12]; unsigned char client_hp[16]; mbedtls_ssl_tls13_hkdf_expand_label(MBEDTLS_MD_SHA256, initial_secret, 32, "client in", 9, NULL, 0, &client_secret, 32); mbedtls_ssl_tls13_hkdf_expand_label(MBEDTLS_MD_SHA256, client_secret, 32, "quic key", 8, NULL, 0, &client_key, 16); mbedtls_ssl_tls13_hkdf_expand_label(MBEDTLS_MD_SHA256, client_secret, 32, "quic iv", 7, NULL, 0, &client_iv, 12); mbedtls_ssl_tls13_hkdf_expand_label(MBEDTLS_MD_SHA256, client_secret, 32, "quic hp", 7, NULL, 0, &client_hp, 16); keydump(initial_secret, mbedtls_md_get_size(md)); keydump(client_secret, 32); keydump(client_key, 16); keydump(client_iv, 12); keydump(client_hp, 16); // 暗号化するペイロードの準備をする int padding = 1200 // QUIC UDP initialize packet size - 1 // Flags - 4 // version - 1 // Destination Connectin ID length - 8 // Destination Connectin ID - 1 // Source Connection ID length - 0 // Source Connection ID - 1 // Token Length - 2 // length len - ((plane_header[0] & 0x03) + 1) // packet number length - sizeof(plane_payload) - 16; uint32_t packet_number = *(plane_header + 18) << 24 | *(plane_header + 19) << 16 | *(plane_header + 20) << 8 | *(plane_header + 21) << 0; unsigned char payload[padding + sizeof(plane_payload)]; // 実際に送信するデータから0パディングする memset(payload, 0, sizeof(payload)); memcpy(payload, plane_payload, sizeof(plane_payload)); // 暗号化するためのnonceを用意する RFC9001 5.3. AEAD Usage unsigned char nonce[12]; unsigned int olen; memcpy(nonce, client_iv, sizeof(client_iv)); nonce[11] = nonce[11] ^ packet_number; keydump(nonce, 12); // ペイロードの暗号化実行 encrypt_payload(client_key, sizeof(client_key)*8, nonce, sizeof(nonce), plane_header, sizeof(plane_header), payload, sizeof(payload), enc_payload, sizeof(enc_payload), &olen); keydump(enc_payload, olen); // QUICヘッダの保護のためのマスクを用意 RFC9001 5.4.2. Header Protection Sample // sample_offset : 22(payloadの先頭16byte) mbedtls_aes_context aes; unsigned char header_mask[16]; mbedtls_aes_init(&aes); mbedtls_aes_setkey_enc( &aes, (const unsigned char*) client_hp, sizeof(client_hp) * 8 ); mbedtls_aes_crypt_ecb( &aes, MBEDTLS_AES_ENCRYPT, (const unsigned char*)enc_payload, header_mask); mbedtls_aes_free( &aes ); keydump(header_mask, 16); // ヘッダにマスク plane_header[0] ^= header_mask[0] & 0x0f; for (int i = 0; i < 4; i++) plane_header[18 + i] ^= header_mask[1 + i]; keydump(plane_header, sizeof(plane_header)); // [保護されたヘッダ + 暗号化されたペイロード] にしてダンプ unsigned char encpacket[olen + sizeof(plane_header)]; memcpy(encpacket, plane_header, sizeof(plane_header)); memcpy(encpacket + sizeof(plane_header), enc_payload, olen); keydump(encpacket, olen + sizeof(plane_header)); return 0; } これで"保護されたヘッダ+暗号化されたペイロード"の保護されたパケットが（enc_payload）、"c000000001088 .... 018ab0856972e194cd934" とA.2. Client Initialの結果と合致しているはずです。復号化はこの逆をやればOKといった感じです。この暗号化・復号化もesp-idf(ESP32)での動作確認も出来ました。 実際にプロトコルを理解するには、先達の実装やサンプルを参考にしたり、RFCを読みながらサンプルコードを書いて動かして、Wiresharkでパケットを観察して...という地道な方法が良いかなと思っていたりします。暗号化・復号化をmbedTLSを使って出来そうなので、次は組込み端末上でQUICで通信を行う所までやってみようかなと。ただし、よく僕が利用する端末だと時刻を持っていなかったり（gettime系などは自作する）、通信系のインタフェイスが独自だったり（lwipはよく見ますが）、利用する組込み環境にうまく合わせて...といった感じになってきますね。

こんにちは。入社2年目の小玉です。    GMOインターネットグループ横断で2021年から取り組んでいる「RPA・AI・ロボット・動画活用No.1グループへ」のプロジェクトに携わっており、RPAで業務自動化できるものが幾つもあったので、ご紹介いたします。 1. RPA とは 定義は「ロボットによる業務自動化」のことを指します。 総務省からの言葉を引用すると「人間が行ってきた定型的なパソコン操作をソフトウエアのロボットにより自動化するもの」です。 これは、単にRPAツールと呼ばれているものだけを指すとは限らないことに注意してください。例えば、Shellスクリプトなどでの自動化もRPAに含まれます。また、それぞれのRPAツール、プログラミングでの開発には、メリット・デメリットが存在します。詳しく見ていきましょう。 2. RPA ツール比較 私が、実際に業務で使用したものの一部を例にそれぞれのRPAツールのメリット・デメリットをご説明します。 Power Automate Desktop メリット デメリット ノーコードでの開発 無料スケジューリングが複雑 インターネット上の情報が豊富 逐次処理のみ Desktop、Web Appの自動化 gitバージョン管理が困難 画像処理、OCR Windowsのみのサポート Power Automate Desktopメリットは、やはり「ノーコード」です。 WindowsのデスクトップアプリやブラウザからアクセスできるWebアプリなどほとんどのアプリケーションを「ノーコード」で自動化することができます。特にExcel操作などは非常に得意です。 また、画像処理などができる点も便利です。簡単に画像にマウスを移動させたり、画像の存在確認などで条件分岐を行ったりすることができます。 デメリットは、無料アカウントの場合、スケジューリングがやや難しいということです。 Power Automate Desktopには、無料アカウントと有料アカウントがあり、有料アカウントの場合は、Web版のPower Automateから簡単にスケジューリングが可能です。しかし、無料アカウントの場合は、後述する「UIAutomation」ライブラリとタスクスケジューラーを用いて、スケジューリングしなければなりません。 続いて、Power ShellやBatch Fileを使って自動化するメリット・デメリットを見てみましょう。 Power Shell, Batch File メリット デメリット Windows API直接操作 学習コストが発生 実行が非常に簡単 Power Shell版の「UIAutomation」ライブラリの情報の少なさ並行で実行可能 VB、C#との高い親和性 タスクスケジューラーでの実行 Power Shell, Batch Fileのメリットは、「実行が非常に簡単」ということです。 特にBatch Fileは、ファイルのパスを指定するだけで、コマンドプロンプトなどからすぐに実行できますし、タスクスケジューラーでもパスを指定するだけでスケジューリングできます。また、簡単なC#やVBプログラムを埋め込んだり、その他のプログラミング言語でも簡単に実行できます。 デメリットは学習コストが発生することです。 また、UI要素を操作することができるPower Shell版の「UIAutomation」ライブラリのインターネット上の情報が少ないこともデメリットです。 SikuliX メリット デメリット 画像処理の実装が簡単 python3系のサポート対象外（現在開発中）学習コストがほぼゼロ javaをインストールが必須実行が簡単 python（2.7）が使用可能 マルチプラットフォーム対応 SikuliXは、画像認識を利用したUI操作自動化ツールで主に視覚情報からマウスのイベントを発生させるというフローを自動化することができます。 SikuliXのメリットは、「マルチプラットフォーム」です。 Windowsだけではなく、MacやUbuntuなどに対応しています。また、Jython、Python、Rubyなどのプログラムを使用することができ、Mavenで依存関係を追加して、Javaから「SikuliX API」を使用することができると公式に書いてあります。 デメリットは「python3」に対応していないことです。 VB, C#, Go, python, C++などのプログラミング言語を使った自動化 メリット デメリットWindows APIや機械学習など高い学習コストRPAツールより高度な実装が可能 膨大な開発時間環境の依存しにくさ開発できるのがエンジニアのみ メリットは「高度なことが実装できる」ということです。 デメリットは、「学習コストが高い」ということです。自動化する対象の業務が、RPAツールで対応できない場合は、プログラミング言語を用いて開発するとよいでしょう。 Power Automate/ DesktopPower Shell/ Batch FileSikuliXプログラミング言語を使った自動化メリットノーコード情報が豊富実行が簡単/VB,C#との高い親和性画像処理系が簡単/マルチプラットフォーム高度な実装が可能デメリット無料アカウントはスケジューリングが困難UIAutomationの情報量の少なさJavaのインストールが必須高い学習コスト/開発できるのがエンジニアのみ このようにそれぞれのRPAツールにメリット・デメリットが存在します。自動化対象の業務に合わせて、ツールも変えていきましょう。それでは、それぞれのツールを使った自動化の具体例を見てみましょう。 3. Power Automate Desktop を使った自動化の例 簡単な例として「Chromeを起動して、ボタンを押す」作業をPower Automate Desktop（PADとも略されます）で実装してみましょう。フロー作成手順は以下の通りです。この記事は、Windows Server 2019で動作しています。 3-1. PAD をインストール 公式サイトから、ダウンロード、インストールしてください。詳細は割愛します。 3-2. 「新しいフロー」を作成 公式サイトなどを参考に、新しいフローの作成をしてください。詳細は割愛します。 3-3. アクションヒエラルキーの「新しい Chrome を起動する」を追加しパラメータを以下のように変更 3-4. アクションヒエラルキーの「Web ページのボタンを押します」を追加しパラメータを以下のように変更 3-5. 「▷ 実行」ボタンをクリック 3-6. 「chrome」が起動して、「google」にアクセスした後、「about.google」のページに更新 いかがでしたでしょうか？実際の開発では、エラー処理、例外処理、サブフローで分割、厳密な UI 要素の存在確認などで細かく設定しますが、イメージはつかんでいただけたと思います。 詳しく知りたい方は、「Power Automate Desktopについての記事」などをご参照ください。 4. Power Shell, batファイル と UIAutomation を使った自動化の例 Power Shellスクリプトは、Power Automate Desktopではできない部分を細かく実装することに向いています。本節では、RPAを作るのに非常に便利な「UIAutomation」ライブラリを使用して、UI要素の取得やクリックイベントの送信などを実装してみましょう。 4-1. UIAutomationライブラリの環境構築 UIAutomation.0.8.7B3.NET40 ライブラリをダウンロードします。（※リンク先は非公式です。公式がこのライブラリを廃止しているためです。） https://www.code-lab.net/?page_id=21648 展開して C ドライブの直下などに置きます。 4-2. Inspect.exe環境構築 UIAutomationライブラリとともに使用する便利ツールとして、「Inspect.exe」があります。これは、WindowsアプリケーションのUI要素を可視化できるもので、後述するUIAutomationSpy.exeでUI要素が取得できなかったときの調査に役立ちます。 「 https://developer.microsoft.com/ja-jp/windows/downloads/sdk-archive/ 」に移動します。 「Windows 10 SDK バージョン 2104」の「SDK のインストール」を選択します。 デフォルト設定のまま、「Next」 で進んでいき、インストールをクリックします。 「Close」をクリックします。 4-3. 電卓を例に実装 ダウンロードしたUIAutomation.0.8.7B3.NET40ライブラリにある「UIAutomationSpy.exe」を起動します。 電卓を起動します。 UIAutomationSpyの「Start」ボタンをクリックして、電卓の「1」にマウスをフォーカスします。その後、素早くUIAutomationSpyのウィンドウにマウスをホバーして、「Stop」ボタンをクリックします。 UIAutomationSpyが自動でプログラムを生成したことがわかります。 batファイルを作成して、エンコードをShift-JISに指定して、以下のスクリプトを記述します。 @powershell -NoProfile -ExecutionPolicy Unrestricted "$s=[scriptblock]::create((gc \"%~f0\"|?{$_.readcount -gt 1})-join\"`n\");&$s" %*&goto:eof cd 'C:\UIAutomation.0.8.7B3.NET40' Import-Module .\UIAutomation.dll Get-UiaWindow -Class 'CalcFrame' -Name '電卓' | ` Get-UiaPane -Class 'CalcFrame' | ` Get-UiaPane -Class '#32770' | ` Get-UiaButton -AutomationId '131' -Class 'Button' -Name '1' このスクリプトの内容は以下の通りです。 batファイルを強制的に、Power Shellスクリプトとして読み込みます。先ほどダウンロードした「UIAutomation」ライブラリのフォルダまで移動します。ライブラリを読み込みます。先ほどの「UIAutomationSpy.exe」で作成されたプログラムをコピーして、このbatファイルに書き込みます。 batファイルを実行すると、エラーが発生する場合があります。以下のエラーは、classNameが「#32770」という名前のUI要素が見つからなかったことを指しています。 Get-UiaPane : failed to get control in 5000 milliseconds by: title: '', automationId: '', className: '#32770', value: ' '. 発生場所 行:8 文字:1 + Get-UiaPane -Class '#32770' | ` + ~~~~~~~~~~~~~~~~~~~~~~~~~~~ + CategoryInfo : OperationTimeout: (:) [Get-UiaPane], Exception + FullyQualifiedErrorId : ControlIsNull,UIAutomation.Commands.GetUiaPaneCommand ここで使用するツールが、先ほどダウンロードした「inspect.exe」です。以下のような流れで、電卓のUI要素を調査します。 batプログラムのデバッグinspect.exeを起動ウィンドウ上部にあるアイコンを選択電卓のウィンドウをクリック、inspect.exeの左側に表示されているヒエラルキーからUI要素をフォーカスinspect.exeの右側に表示されている「Data View」から、それぞれのUI要素のプロパティを確認batプログラムを修正 それぞれ具体的に見ていきましょう。 4-3-1. batプログラムのデバッグ 以下のように一つずつプログラムを実行していきながら、どの部分でエラーが発生しているかを特定します。 @powershell -NoProfile -ExecutionPolicy Unrestricted "$s=[scriptblock]::create((gc \"%~f0\"|?{$_.readcount -gt 1})-join\"`n\");&$s" %*&goto:eof cd 'C:\UIAutomation.0.8.7B3.NET40' Import-Module .\UIAutomation.dll # コメントアウト # Get-UiaWindow -Class 'CalcFrame' -Name '電卓' | ` # Get-UiaPane -Class 'CalcFrame' | ` # Get-UiaPane -Class '#32770' | ` # Get-UiaButton -AutomationId '131' -Class 'Button' -Name '1' Get-UiaWindow -Class 'CalcFrame' -Name '電卓' Get-UiaWindow -Class 'CalcFrame' -Name '電卓' | ` Get-UiaPane -Class 'CalcFrame' Get-UiaWindow -Class 'CalcFrame' -Name '電卓' | ` Get-UiaPane -Class 'CalcFrame' | ` Get-UiaPane -Class '#32770' # ここでエラーが発生 4-3-2. inspect.exeを起動 inspect.exeはのようなパスに格納されています。 "C:\Program Files (x86)\Windows Kits\10\bin\10.0.20348.0\x86\inspect.exe 4-3-3. ウィンドウ上部にあるアイコンを選択 以下の画像の内「①強調表示」と「②マウスクリック」と「③マウスホバー」と「④UI Automation」を選択します。 4-3-4. 電卓のウィンドウをクリック、inspect.exeの左側に表示されているヒエラルキーからUI要素をフォーカス 以下のように、マウスをクリックしたり、ヒエラルキーからUI要素を選択したりします。 4-3-5. inspect.exeの右側に表示されている「Data View」から、それぞれのUI要素のプロパティを確認 よく確認する部分は、主に「Name」と「ControlType」と「ClassName」です。 先ほどエラーが発生した箇所「Get-UiaPane -Class '#32770'」は、DataViewの「UiaPane」が「UIA_PaneControlTypeId」を、「 -Class '#32770' 」は「ClassName: "#32770"」を表しています。 以下の2つの画像は、電卓の計算結果表示用のUI要素のDataViewと、電卓の入力用ボタンのUI要素のDataViewを示しています。どちらも、「ClassName」が「 #32770 」で同じことが確認できます。 この調査結果から、「ClassName」が一意のUI要素を識別するものではなかったので、エラーが発生したと考えられます。 4-3-6. batプログラムを修正 結論は、以下のようなプログラムとなります。 @powershell -NoProfile -ExecutionPolicy Unrestricted "$s=[scriptblock]::create((gc \"%~f0\"|?{$_.readcount -gt 1})-join\"`n\");&$s" %*&goto:eof cd 'C:\UIAutomation.0.8.7B3.NET40' Import-Module .\UIAutomation.dll Get-UiaWindow -Class 'CalcFrame' -Name '電卓' | ` Get-UiaPane -Class 'CalcFrame' | ` # Get-UiaPane -Class '#32770' | ` Get-UiaButton -AutomationId '131' -Class 'Button' -Name '1' 先ほどのプログラムの3つ目の「Get-UiaPane -Class '#32770' | `」行をコメントアウトすれば正常に動作します。 UI要素を正常に取得できたため、マウスクリックイベントを最後の行に次のように追加します。 Get-UiaButton -AutomationId '131' -Class 'Button' -Name '1' | Invoke-UiaButtonClick 4-4. PADのフローを実行することを例に実装してみましょう。 全体の流れは、以下の通りです。 以下のbatプログラムを作成作成したbatファイルをコマンドプロンプトなどで引数を指定して実行指定した文字列のPADのフローが実行されればOK 4-4-1. 以下のbatプログラムを作成 まずは、以下のようなbatプログラムをCドライブ直下において、エンコードが「Shift JIS」で作成します。 @powershell -NoProfile -ExecutionPolicy Unrestricted "$s=[scriptblock]::create((gc \"%~f0\"|?{$_.readcount -gt 1})-join\"`n\");&$s" %*&goto:eof # coding: Shift JIS $flowName = $Args[0] Write-Host $flowName'を開始します。' cd 'C:\UIAutomation.0.8.7B3.NET40' Import-Module .\UIAutomation.dll $PADConsoleHostExePath = "C:\Program Files (x86)\Power Automate Desktop\PAD.Console.Host.exe" Start-Process $PADConsoleHostExePath [UIAutomation.Preferences]::Highlight = $true $start = Get-Date -format "yyyy/MM/dd HH:mm:ss" $syncTime = 10 while ($true) { Start-Sleep -Milliseconds 100 $total = [int](New-TimeSpan $start(Get-Date)).TotalSeconds if ($total % $syncTime -eq 0) { try { Start-Sleep -Milliseconds 100 Get-UiaWindow -AutomationId 'ConsoleMainWindow' -Class 'WinAutomationWindow' -Name 'Power Automate' | ` Get-UiaCustom -Class 'ModalManager' | ` Get-UiaCustom -Class 'ProcessesToolBarView' | ` Get-UiaEdit -AutomationId 'SearchFlowTextField' -Class 'TextBox' -Name 'フローの検索' | Set-UiaEditText -Text $flowName Get-UiaWindow -AutomationId 'ConsoleMainWindow' -Class 'WinAutomationWindow' -Name 'Power Automate' | ` Get-UiaCustom -Class 'ModalManager' | ` Get-UiaCustom -AutomationId '' -Class 'ProcessesView' -Name '' | ` Get-UiaDataGrid -AutomationId 'MyFlowsListGrid' -Class 'DataGrid' | ` Get-UiaDataItem -Name $flowName -Class 'DataGridRow' | ` Get-UiaCustom -Name $flowName -Class 'DataGridCell' | ` Get-UiaButton -Name '実行' -Class 'Button' | Invoke-UiaButtonClick Get-UiaWindow -AutomationId 'ConsoleMainWindow' -Class 'WinAutomationWindow' -Name 'Power Automate' | ` Get-UiaCustom -Class 'ModalManager' | ` Get-UiaCustom -Class 'ProcessesToolBarView' | ` Get-UiaEdit -AutomationId 'SearchFlowTextField' -Class 'TextBox' -Name 'フローの検索' | Set-UiaEditText -Text '' Write-Host "フローを正常に実行できました。" break } catch { Write-Host "フローが失敗しました。" } } # 60秒後に終了 if ($total -eq 60) { exit /b } } このbatプログラムは、以下のことを行っています。 まず、batプログラムを強制的にPower Shellスクリプトとして読み込みます。コマンドラインから与えられた引数を$flowNameに格納します。この引数はPADのフロー名です。10秒間隔で、PADのフローの実行を試みます。成功すればプログラムを終了します。60秒立てば強制的に終了します。 4-4-2. 作成したbatファイルをコマンドプロンプトなどで引数を指定して実行 以下のように、コマンドラインから、実行したり、batファイルに記述して、実行したりします。 powershell "C:\PAD.bat 【ブログ用】GoogleChrome" 4-4-3. 指定した文字列のPADのフローが実行されればOK UIAutomationのすごさを実感していただけたと思います。 技術書籍、インターネット上での情報が少ないので、調査するのが大変です。 5. Sikulix を使った自動化の例 Sikulixは、以下の画像やプログラムのように、画像処理やOCRなどをかんたんに実装することができます。 # coding:utf-8 def ClickPAD(): try: doubleClick("1649756179692.png") except FindFailed, e: print("画像1が見つかりませんでした") try: doubleClick("SelectedPowerAutomateDesktop.png") except FindFailed, e: print("画像2が見つかりませんでした") if __name__ == "__main__": ClickPAD() Power Automate DesktopをSikulixで起動してみましょう。 Sikulixの環境構築プログラムの説明実行 5-1. Sikulixの環境構築 Javaの環境構築をします。 公式サイトから、ダウンロード、インストールしてください。詳細は割愛します。 この記事は、openjdk 11.0.14で実行しています。 以下のサイトにアクセスします。 https://raiman.github.io/SikuliX1/downloads.html 「sikulixide-2.0.5.jar」をダウンロードします。 ダウンロードした「sikulixide-2.0.5.jar」ファイルをダブルクリックして以下のようなIDEが表示されれば環境構築は終了です。 5-2. プログラムの説明 doubleClickメソッドの引数は、ダブルクリックしたい画像のファイル名です。この画像は、SikulixIDEの「スクリーンショットを撮る」からキャプチャすることができます。もし画像を見つけることができなかった場合は、「FindFailed」例外を出力するようになっています。 # coding:utf-8 def ClickPAD(): try: doubleClick("1649756179692.png") except FindFailed, e: print("画像1が見つかりませんでした") try: doubleClick("SelectedPowerAutomateDesktop.png") except FindFailed, e: print("画像2が見つかりませんでした") if __name__ == "__main__": ClickPAD() 5-3. 実行 SikulixIDE上にある「実行(&R)」や以下のようにコマンドラインから実行できます。 java -jar sikulixideのパス -r SikulixIDEで作成したプログラムのパス java -jar sikulixide-2.0.5.jar -r Sample.sikuli Sikulixは、技術書籍やインターネット上での情報が非常に多いので、調査するのが簡単です。 6. 自動化処理で大切なこと 個人的にRPAなどで自動化する際に重要だと思うことは、以下の4つです。 厳格な存在確認とエラーハンドリング自動化対象業務が標準的か属人的か、業務を言語化できるのか可観測性の実現真夜中など作業しない時間帯にスケジューリング それぞれ詳しく見ていきましょう 6.1 厳格なエラーハンドリング 特に、マウスクリックや特殊キーの送信などCRUD処理における「CUD」系の操作を行うときは注意が必要です。「Alt + F4」のキーをウィンドウに送る場合、期待するウィンドウではなく、作業中のウィンドウや他のアプリのアップデート系のポップアップに送信されてしまう可能性が考えられるからです。よく、予期せぬポップアップウィンドウが出現したり、ブラウザのキャッシュが削除されていたり、UI 操作対象のアプリケーションがアップデートしたりしていて、正常に操作できないことがあります。 6.2 自動化対象業務が標準的か属人的か、業務を言語化できるのか RPA 開発チームなどが存在する場合、依頼者は 5W1H や数字などを使ってパターンを言語化したり、目的などを明文化しないとそもそも RPA は作れません。（たとえ作れたとしても、開発者と依頼者で大きな認識違いが発生し、RPA が期待しない動作を起こし、データを壊してしまう可能性があります。） 6.3 可観測性の実現 エラーが発生しても、即原因がわかるよう、RPA 実行中は画面のスクリーンショットなどでモニタリング、分割した RPA プログラムがそれぞれ成功したか失敗したかをログ出力する必要があります。 例えば以下の bat プログラムのように RPA が実行しているときは、画面のキャプチャを Slack にポストするなどして、可観測性を実現します。 @powershell -NoProfile -ExecutionPolicy Unrestricted "$s=[scriptblock]::create((gc \"%~f0\"|?{$_.readcount -gt 1})-join\"`n\");&$s" %*&goto:eof # coding: Shift JIS $start = Get-Date -format "yyyy/MM/dd HH:mm:ss" $screenshotPath = "C:\screenshot.png" # $mention = '<@SlackのメンションID>' $channel = 'SlackのチャネルID' $token = 'Authorization: Bearer xoxb-1234-abcdefgh' $syncTime = 5 while ($true) { Start-Sleep -Milliseconds 1000 $total = [int](New-TimeSpan $start(Get-Date)).TotalSeconds if ($total % $syncTime -eq 0) { [Reflection.Assembly]::LoadWithPartialName("System.Drawing") function screenshot([Drawing.Rectangle]$bounds, $path) { $bmp = New-Object Drawing.Bitmap $bounds.width, $bounds.height $graphics = [Drawing.Graphics]::FromImage($bmp) $graphics.CopyFromScreen($bounds.Location, [Drawing.Point]::Empty, $bounds.size) $bmp.Save($path) $graphics.Dispose() $bmp.Dispose() } $bounds = [Drawing.Rectangle]::FromLTRB(0, 0, 1920, 1080) screenshot $bounds $screenshotPath curl.exe -F file=@$screenshotPath -F channels=$channel -H $token https://slack.com/api/files.upload } if ($total -eq 600) { exit } } 6.4 真夜中など作業しない時間帯にスケジューリング 人が作業中にRPAが実行すると、人の操作が影響してフローが正常に実行できなかったりします。        そのため、RPAは人が作業していない夜中にスケジューリングすべきでしょう。        具体的にはタスクスケジューラーを使います。 まず、タスクスケジューラーを起動して、右側のヒエラルキーから「タスクスケジューラーライブラリ」を選択して、左側の操作ウィンドウから「基本タスクの作成」をクリックします。 どのようなタスクをスケジューリングするかわかりやすいような名前を設定して、「次へ」ボタンを押します。 タスクトリガーで、イベントでタスクを実行するのか、毎日定時で実行するのかなどを選択します。 毎日スケジューリングを設定する場合は、実行する時間を設定します。 「プログラムの開始」を選択して、「次へ」ボタンを押します。 実行したいbatファイルを選択します。 プログラムのパスが設定されていることを確認して、「次へ」ボタンをクリックします。 「完了」を押します。 最後に追加したタスクを選択して、右側の操作ウィンドウにある「実行」ボタンをクリックして、正常に動作するかどうかを確認します。 7. 最後に RPAツールは有志の方々が作ってくださったものです。感謝して大切に使いましょう。 また、業務を効率化することが目的なので、RPAツールを使うことが目的にならないように気を付けましょう。 プログラマ三大美徳である「怠惰」、「短気」、「傲慢」の重要性を意識して、「効率化できることは本当に全くないのか？」と小さなことでも業務に疑問を抱き、考えるだけではなく実際に「行動」し続けることが重要だと思います。

こんにちは。GMOインターネットの中村です。本エントリーでは、面倒なブラウザの操作を自動化するSeleniumについて紹介させていただきます。マスターすると人気商品の入荷などをリアルタイムに通知できたりします。 面倒なブラウザ操作 みなさん、ネットサーフィンしてるときに会員登録の情報入力欄を見て面倒だなあ…と思ったことはないでしょうか。私は面倒になってしまい、あとでいいや・・・となりがちです。例でいうと下記のような画面です。 https://account.onamae.com/accountCreate 実業務においても、極々稀でありますがブラウザでしか操作できない業務が出てきたりします。実例を出すと、一部の古いサーバ設定が、ブラウザ上でしか設定できないというものがありました。（※最近のサーバーは設定流し込み用のツールがベンダー公式から出ていたりします　便利な時代になりました） ページ自体の動作が重く1台あたり8分ほどの時間がかかる作業でした。 5、6台なら、別作業の合間にできるんですが中々に厄介な点が有り、 設定しないといけない台数が2000台前後ある (´·ω·`) これを人力…？orz １台あたりの作業時間8分と考えると 2,000台×8分＝16,000分(266.77...時間) 1日8時間労働想定で、1人で毎日かかりきりになっても33日以上かかります。これはきついです…orz人海戦術でいこうにも、都合よくその期間が空いてる人がいっぱいいるわけでもありません…しんどい… そんなときのRPA！ ということで人が駄目なら機械に働いてもらいましょう！RPAとは【ロボティック・プロセス・オートメーション】の略で、自動化技術の一種です。 Selenium RPAにも色々なツールがあります。その中でもブラウザ操作に特化したSelenium（セレニウム）を使った方法を今回はご紹介します。マシンスペックが足りれば並列で複数同時にブラウザ操作も可能です。 実行環境の準備 必要なものは下記になります。僕はChromeユーザーなのでChrome想定で記載します。 python 記載時の最新版は3.10.4です。環境変数への登録も済ませておきましょう。https://www.python.org/downloads/ Seleniumライブラリ pythonインストール後に、下記でSeleniumのライブラリを追加しておきましょう。 pip install selenium Chrome 既にインストール済みの方が多いとは思いますが念のため…https://www.google.co.jp/intl/ja/chrome/ ChromeDriver Chromeとのバージョンを合わせるように注意しましょう。環境変数への登録も済ませておきましょう。https://chromedriver.chromium.org/downloads 早速webページを開いてみる 指定URLを開く 下記メソッドで指定URLのwebページを開くことができます。 driver=webdriver.Chrome() driver.get('接続したいURL') 試しに下記内容でスクリプトを作成します。 #ライブラリ読み込み from selenium import webdriver import time #クロームの立ち上げ driver=webdriver.Chrome() #ページ接続 driver.get('https://account.onamae.com/accountCreate') #10秒終了を待つ time.sleep(10) #クロームの終了処理 driver.close() コマンドプロンプトなどで作成したファイルをpythonで実行します。エディタにデバッグ機能などがついている場合はそちらでも構いません。 python test.py これでブラウザで指定したwebページが立ち上がるのが確認できればOKです！ どの要素を操作したいか確認する webページを立ち上げることはできました。 これからクリックやキー入力などのアクションを取るわけですが、ページ内の【どの要素】に対してアクションを行うか？というキーがないとなにもできません。 Seleniumで使用できるキーは下記2つです。 ・XPath・ID webページ内の住所みたいなものと思っていただければと思います。今回はXPathの方で説明します。 どうやって調べるかご説明します。Chromeを開いてF12キーを押しましょう。開発者ツールが立ち上がるはずです。開発者ツールが立ち上がったら赤丸部分のボタンを押しましょう。 この状態で操作したいページ要素をクリックします。すると左側の開発者ツール内で、操作したい要素がフォーカスされます。 フォーカスされた要素に対して、右クリックを行います。Copy → Copy XPathを選択します。 取得したXPathがこちらです。 //*[@id="lnameML"] こちらをもとに入力やクリックなどを行います。 キー入力 下記のメソッドでキー入力が可能です。 driver.find_element_by_xpath('取得したXPATH').send_keys("入力したい内容") 試しに会員登録ページの名前部分の入力をしてみます。 #ライブラリ読み込み from selenium import webdriver import time #クロームの立ち上げ driver=webdriver.Chrome() #ページ接続 driver.get('https://account.onamae.com/accountCreate') #キー入力 driver.find_element_by_xpath('//*[@id="lnameML"]').send_keys("なかむら") #10秒終了を待つ time.sleep(10) #クロームの終了処理 driver.close() これでキー入力ができました。 クリック キー入力ができたので、次はクリックを試してみましょう。クリックは下記のメソッドで実行可能です。 driver.find_element_by_xpath('取得したXPATH').click() 試しに【次に進む】ボタンをクリックしてみましょう。 #ライブラリ読み込み from selenium import webdriver import time #クロームの立ち上げ driver=webdriver.Chrome() #ページ接続 driver.get('https://account.onamae.com/accountCreate') #決定ボタンのクリック driver.find_element_by_xpath('//*[@id="editAccountForm"]/p[2]').click() #10秒終了を待つ time.sleep(10) #クロームの終了処理 driver.close() こちらでクリックしたことを確認できました。（何も必要情報を記載していないのでエラーになってはいますが） もっと もっと知りたい方は下記サイトが参考になります。 逆引きSeleniumhttps://www.seleniumqref.com/api/webdriver_gyaku.html 一通り入力してみる 一通り入力して会員登録できるかを試してみましょう。 #ライブラリ読み込み from selenium import webdriver import time #クロームの立ち上げ driver=webdriver.Chrome() #ページ接続 driver.get('https://account.onamae.com/accountCreate') #名前入力 driver.find_element_by_xpath('//*[@id="lnameML"]').send_keys("なかむら") driver.find_element_by_xpath('//*[@id="fnameML"]').send_keys("しんご") driver.find_element_by_xpath('//*[@id="lname"]').send_keys("Nakamura") driver.find_element_by_xpath('//*[@id="fname"]').send_keys("Shingo") #郵便番号入力 driver.find_element_by_xpath('//*[@id="pcJp1"]').send_keys("150") driver.find_element_by_xpath('//*[@id="pcJp2"]').send_keys("8512") #郵便番号から住所入力をクリック driver.find_element_by_xpath('//*[@id="pcJapan"]/td/div/button').click() #処理が終わるまで少し待機 time.sleep(2) #番地を入力 driver.find_element_by_xpath('//*[@id="street1MLNumber"]').send_keys("26-1") driver.find_element_by_xpath('//*[@id="street1Number"]').send_keys("26-1") #電話番号入力 driver.find_element_by_xpath('//*[@id="phone"]').send_keys("03-5456-2555") #メールアドレス入力 driver.find_element_by_xpath('//*[@id="email"]').send_keys("[email protected]") driver.find_element_by_xpath('//*[@id="emailConfirm"]').send_keys("[email protected]") #パスワードの入力 driver.find_element_by_xpath('//*[@id="loginPassword"]').send_keys("muzukashii-pass") driver.find_element_by_xpath('//*[@id="loginPasswordConfirm"]').send_keys("muzukashii-pass") #決定ボタンのクリック driver.find_element_by_xpath('//*[@id="editAccountForm"]/p[2]').click() #10秒終了を待つ time.sleep(10) #クロームの終了処理 driver.close() 各処理後の処理結果の画像を取得する ほんとに処理がうまく行ったのか後から確認したいこともあります。そんな時は画面キャプチャの取得が可能です。 driver.save_screenshot('保存したい画像のパス.png') 試してみます。 #ライブラリ読み込み from selenium import webdriver import time #クロームの立ち上げ driver=webdriver.Chrome() #ページ接続 driver.get('https://account.onamae.com/accountCreate') #名前入力 driver.find_element_by_xpath('//*[@id="lnameML"]').send_keys("なかむら") driver.find_element_by_xpath('//*[@id="fnameML"]').send_keys("しんご") driver.find_element_by_xpath('//*[@id="lname"]').send_keys("Nakamura") driver.find_element_by_xpath('//*[@id="fname"]').send_keys("Shingo") #郵便番号入力 driver.find_element_by_xpath('//*[@id="pcJp1"]').send_keys("150") driver.find_element_by_xpath('//*[@id="pcJp2"]').send_keys("8512") #郵便番号から住所入力をクリック driver.find_element_by_xpath('//*[@id="pcJapan"]/td/div/button').click() #処理が終わるまで少し待機 time.sleep(2) #番地を入力 driver.find_element_by_xpath('//*[@id="street1MLNumber"]').send_keys("26-1") driver.find_element_by_xpath('//*[@id="street1Number"]').send_keys("26-1") #電話番号入力 driver.find_element_by_xpath('//*[@id="phone"]').send_keys("03-5456-2555") #メールアドレス入力 driver.find_element_by_xpath('//*[@id="email"]').send_keys("[email protected]") driver.find_element_by_xpath('//*[@id="emailConfirm"]').send_keys("[email protected]") #パスワードの入力 driver.find_element_by_xpath('//*[@id="loginPassword"]').send_keys("muzukashii-pass") driver.find_element_by_xpath('//*[@id="loginPasswordConfirm"]').send_keys("muzukashii-pass") #決定ボタンのクリック driver.find_element_by_xpath('//*[@id="editAccountForm"]/p[2]').click() #処理が終わるまで少し待機 time.sleep(3) #画面キャプチャを取得 driver.save_screenshot('次へ進む実行後の画面.png') #10秒終了を待つ time.sleep(10) #クロームの終了処理 driver.close() こちらが上記で実際に画面キャプチャしたファイルです。問題なく動いていますね。画面キャプチャをとっておくことによって、正常に処理が完了したのか？失敗した場合はどの画面で躓いたのかが視覚的にわかります。 通知する 合わせてAPIを使用すれば各種ツールで通知も連携可能です。 ・slack ・LINE ・twitter ・Emailなどなど 結局2000台どうなった 自動化の甲斐があって無事に終わりました。 手動だと267日かかる作業が3日で済みました。人がやるには精神を削られる作業だったのでSelenium万々歳です… （普段の生活への応用もできます） 限定的ではありますが業務だけではなく、日常生活の応用もできます。 ・人気商品の在庫監視をして入荷されたら通知を送る・通知などに対応していないwebサービスで、画面キャプチャを取ることで擬似的に通知機能を持たせる・毎日定時で行う作業を放置しててもできるようにする 24時間ずっとPC動かし続けるのはちょっと・・・ 自分のPCを24時間使うのはちょっと…と思う方はConoHa VPSを使っていただければ幸いです！ 関連記事はこちら 今回はエラー処理なども一切せずに簡略化した形でSeleniumをご紹介しました。次の記事では、なるべくエラーにならない形で処理ができる方法をご紹介します。 https://developers.gmo.jp/19932/ https://developers.gmo.jp/19955/

みなさん、こんにちは。GMOインターネット株式会社の斉藤です。本記事では、MetaMaskを使用してブロックチェーンと連携するためのWebページを作成する方法を紹介します。詳細は下記内容をご確認ください。 はじめに さて、いま世間で注目のトレンドと言えばWeb 3.0ですね(いきなり)。 私もトレンドに乗り遅れてはいけないと言うことでいろいろ勉強しているところです。私個人としては特にそのインフラ面での技術スタックに注目してます。Web 1.0/2.0はHTTP、DNS、SMTP、TLS/SSL等のプロトコルに加え、仮想化、コンテナ、Kubernetesのようなリソース集約/分散化が基盤技術でした。そして、Webがリッチになるにつれてそれらの技術も進化し、エンジニアとしてそれを追いかけることで仕事をしてきました。 しかし、もしWeb2.0 → Web 3.0の完全な移行が起きると、これらの基盤技術がブロックチェーン技術に置き換わることを意味します。ブロックチェーンは全く違う技術要素で動くので、今までの技術ナレッジが通用しない可能性があります。せっかくここまで積み上げてきたのに！(笑) もちろん、Web 3.0が今後どの程度支配的になるのかはわかりません。ただWebに関わってきたエンジニアとして、Webの仕事ができなくなるリスクは取れないでしょう。こんな楽しい仕事を手放してしまうなんてもったいですよね 。なのでWeb 3.0についても学習を進めていくべきだと思うのです。 https://twitter.com/hironobu_s/status/1515540135450148875 ということでWeb 3.0と言えばブロックチェーンです。今回は入門編ということで、MetaMaskを使ってブロックチェーンと連携するWebページを作ってみます。 MetaMaskとは MetaMaskはEthereumに対応した暗号資産(仮想通貨)のウォレットです。他のチェーンについても簡単に追加できます。この記事を書いている現在で非常にポピュラーで、多くの利用があります。Webブラウザの拡張機能としての実装と、モバイルアプリ(iOS / Android)の実装があります。 https://metamask.io/ MetaMaskはウォレット機能だけで無く、Webサイトとの連携も考慮されています。公式サイトにも「gateway to blockchain apps」とあり、WebページからMetaMaskのブラウザ拡張を通じて比較的容易にブロックチェーンにアクセスすることができます。 上記は私のウォレットの一つです。0.0096ETH(29.06USD相当)が入っています。 準備 WebページとMetaMaskのブラウザ拡張機能と連携して、ブロックチェーン上の情報にアクセスする実装について解説していきます。また、MetaMaskは複数のアカウントを管理することができるので、アカウントを切り替えたりウォレット間で送金をする実装も行ってみます。 作るものはWebページなのでHTMLとJavaScriptだけで作れますが、ここではReactを使います。 もしMetaMaskを持っていない場合は、公式サイトからインストールしておいてください。 インストールが終わったらアカウントの作成を行っておいてください。チュートリアルを進めるだけです。すでにアカウントを持っている方はそれを使ってもらって構いません。 今回は送金などは行わないので、暗号資産としてのETHを購入する必要はありません。ただ複数のネットワークを試すので、MetaMaskインストール後に設定からテストネットワークを有効にします。右上のアイコンから「設定」「高度な設定」と進んで「テストネットワークを表示」を有効にしてください。 デモ こちらが今回作成するデモページです。 MetaMaskテストページ GetAccountを押すとMetaMaskとの接続が行われて、ウォレットアドレスなどが表示されます。試しにMetaMask上からアカウントや接続先ネットワークを変更してみてください。Webページ側も追従して内容が変わるはずです。 ウォレットアプリをWebサイトと接続するというと、何が起きているのか分からないし不安だと言う方もいると思います。そういう方は、ぜひ以下の実装方法をご覧頂ければと思います。 実装 実装に当たってMetaMaskのドキュメントに目を通しておくと良いです。 Getting Started | MetaMask Docs window.ethereumオブジェクト WebサイトからMetaMaskを通じてブロックチェーンにアクセスするには、window.ethereumオブジェクトを使います。このオブジェクトの存在確認をして、MetaMaskがインストールされている/いないを判断します。 if (typeof window.ethereum !== 'undefined') { console.log('MetaMask is installed!'); } ethereumオブジェクトには多くのメソッドがあります。このあたりにリファレンスがありますが、見ておいていただきたいのは request メソッドです。requestはMetaMaskを通じてEthereumブロックチェーンへRCPでメソッドコールを行います。要はブロックチェーン側の機能を呼び出すものです。 MetaMaskとの接続 次にWebサイトとMetaMaskを「接続」させます。接続というのは、現在Webブラウザで見ているページからMetaMaskアカウントへのアクセスを許可している状態だと思ってもらうとわかりやすいです。当然、初回の接続時にはMetaMaskからユーザーに接続許可を尋ねる画面が表示されるので、ユーザーはそれを元に許可/不許可を行います。 接続するにはrequestでeth_requestAccountsを呼び出します。以下は実装例です。 try { const acccounts = await window.ethereum.request({ method: 'eth_requestAccounts' }); if (acccounts.length > 0) { console.log(acccounts[0]); } } catch (err) { if (err.code === 4001) { // EIP-1193 userRejectedRequest error // ユーザーが接続を拒否するとここに来ます console.log('Please connect to MetaMask.'); } else { console.error(err); } } accountsには接続に成功したアカウントの一覧が返ってきますが、現在は必ず1つですが、将来的な拡張のために配列になっているとドキュメントにはありました。そしてaccounts[0]は接続したEthereumのウォレットアドレスが文字列で格納されています。 ネットワークの取得 接続に成功するとethereumオブジェクトを通じて利用可能なメソッドが増えます。eth_chainIdは現在ウォレットが接続しているネットワークのChain IDが取得できます。 const Chains = { 1: "Mainnet", 3: "Ropsten", 4: "Rinkeby", 42: "Kovan", 1337: "Geth private chain(default )", 61: "Ethereum Classic Mainnet", 62: "Morden", } const hexChainId = await window.ethereum.request({ method: 'eth_chainId' }); const chainId = parseInt(hexChainId); const name = Chains[chainId]; Chain IDはchainlist.orgなどで確認するとよいでしょう。 ネットワークの変更を検知する ユーザーがMetaMaskのウインドウからアカウントやネットワークの接続先を変更するケースを考えてみましょう。変更に合わせてWebページ上の表示とMetaMaskの整合性を取る必要があります。 window.ethereumオブジェクトはNode.jsのEventEmitterを実装しているため、以下のようにイベントを監視できます。以下が実装例です。 window.ethereum.on("accountsChanged", (accountNo) => { // ここでアカウントの変更をハンドルします }); window.ethereum.on("chainChanged", (accountNo) => { // こちらも同様です }); それでは、実際にWebページを作ってみましょう。まず適当な名前でReactアプリを作成します。 npx create-react-app metamask-testapp cd metamask-testapp 今回はWebページ上のボタンを押してMetaMaskへの接続を行い、接続が成功した場合はウォレットアドレスと接続先ネットワークを表示するようにしてみます。 実装はsrc/App.jsに書いていきます。 import './App.css'; import { useEffect, useState } from 'react'; const Wei = 1000000000000000000; const Chains = { 1: "Mainnet", 3: "Ropsten", 4: "Rinkeby", 42: "Kovan", 1337: "Geth private chain(default )", 61: "Ethereum Classic Mainnet", 62: "Morden", } const getAccount = async () => { try { const account = await window.ethereum.request({ method: 'eth_requestAccounts' }); if (account.length > 0) { return account[0]; } else { return ""; } } catch (err) { if (err.code === 4001) { // EIP-1193 userRejectedRequest error // If this happens, the user rejected the connection request. console.log('Please connect to MetaMask.'); } else { console.error(err); } return ""; } } const handleAccountChanged = async (accountNo, setAccount, setChainId) => { const account = await getAccount(); setAccount(account); const chainId = await getChainID(); setChainId(chainId); } const getChainID = async () => { const chainId = await window.ethereum.request({ method: 'eth_chainId' }); return parseInt(chainId); } function App() { const [account, setAccount] = useState("-"); const [chainId, setChainId] = useState(0); const btnDisabled = account != "-"; const initializeAccount = async () => { const account = getAccount(); if (account != "") { handleAccountChanged(account, setAccount, setChainId); } }; useEffect(() => { if (typeof window.ethereum !== 'undefined') { window.ethereum.on("accountsChanged", (accountNo) => handleAccountChanged(accountNo, setAccount, setChainId)); window.ethereum.on("chainChanged", (accountNo) => handleAccountChanged(accountNo, setAccount, setChainId)); } }, [account]); return ( <div> <h2>MetaMask test</h2> <div> <h3>Account</h3> <button id="GetAccountButton" onClick={initializeAccount} disabled={btnDisabled}>Get Account</button> <p id="account">Address: {account}</p> <p id="account">Chain ID: {chainId}</p> <p id="account">Chain Name: {Chains[chainId]}</p> </div> </div > ); } export default App; おわりに 改めて、完成したデモページはこちらです。 デモページ MetaMaskを利用するとブロックチェーンに簡単にアクセスできますね。HTMLとJavaScriptが書ければすぐにでも始められます。 次回は実際に送金トランザクションを作ってみます。この記事の1ヶ月後くらいに公開されますが、そちらもぜひご覧いただければと思います。 公開されました 第2回はこちらです そして皆さんもSTEAM人材になりましょう笑。 https://twitter.com/hironobu_s/status/1512359356301385731 このツイートはジョークですが「STEAM人材」も聞くことが増えてきたキーワードですね。おおよそこんな意味のようです。そして私が働いているGMOインターネット株式会社ではSTEAM人材を大募集しています。 募集職種 | GMOインターネット株式会社採用 「いきなり応募するもなぁ」と言う方は、Twitter DMで私に直接ご相談いただいても構いません。社内の雰囲気、開発現場の雰囲気、人間関係、待遇などなど、社内の人間からリアルな情報を知りたいという方はお気軽にどうぞ。 それではまた次回お目にかかりましょう。 https://developers.gmo.jp/17450