投稿者「byebyehaikikyou」のアーカイブ

byebyehaikikyou について

日記やIT系関連のネタ、WordPressに関することなど様々な事柄を書き付けた雑記です。ITエンジニア経験があるのでプログラミングに関することなどが多いです。

nginx http/3を動かす

NginxでHTTP/3を動かしてみます。HTTP/3はQUICというプロトコルに基づいているようです。詳しくは理解していないので追々学んでいきたいと思います。まずは、ローカルで動かしてどのようなデータやり取りが行われているのかwiresharkで覗くところから。

Dockerコンテナでビルドします。gistでレシピが公開されているのでそれに倣います。

 

ビルドすると以下のエラーとなってしまいました。

どうも上記のオプションは--with-http_v3_moduleに統合された?ようなので削除します。

参考: https://hg.nginx.org/nginx-quic/rev/33226ac61076

最終的に以下のようにしました。

nginx.conf

ビルドしてコンテナ起動します。

curlでアクセスしてみます。

RFC9000 https://www.rfc-editor.org/rfc/rfc9000.html

参考

WiresharkのTLS Record Layerのhttp-over-tls

WiresharkでTLS Layerのパケットを調べていた時に、表示されていたプロトコルが何を指しているのか疑問になったので調べてみた。

具体的には以下に表示されている部分である。HTTPでないプロトコルだと思っていたけれどhttp-over-tlsと表示されていたので、HTTP??と思ってしまった。Record部分は、暗号化されていて読めないはずなのに何故HTTPと分かったのか?、という疑問である。

ポート番号で判断している?

もし、パケットの中身を見てHTTPと判断しているのならば、ポート番号を変えてアクセスしてもhttp-over-tlsと表示されるはずである。

ということで試してみた。

Dst Portを8443としてみた。ApacheでListen 8443 httpsと設定し自己署名証明書をセットしてある。

結果、http-over-tlsと表示されてはいなかった。実際には、Webブラウザで、Webページhttps://<address>:8443/にアクセスしているので、HTTPプロトコルでデータを送受信しているはずである。このことから、Wiresharkはポートのみで判断して表示しているのではと推測できる。

Wiresharkのプロトコル解釈に関する記事

検索するとPortで判断しているような記述があり、その線が濃厚そうだ。

Wiresharkのソースはどうなってる?

念のためソースも少し確認しておく。大まかな予想をつけてソースを眺めてみる。以下の箇所がTLSデータの情報表示部分だと思われる。

プロトコルのTreeの部分に表示されている%s Record Layer: %s Protocol: %sの部分が該当箇所であろう。http-over-tlsの表示箇所であるdissector_handle_get_dissector_nameを追ってみると、以下のようになっており、app_handleの変数nameのポインタを返している。

app_handleは、以下の部分で設定されているようである。

pinfo->srcportpinfo->destportの値をもとにapp_handleを決定しているように見える。portの値をもとに決定しているとすると、ここに443の数値を入れると、http-over-tlsとなるはず。

以下のようにソース修正しビルドしてみる。

上記ではDestPortを443にしている。結果は以下のとおりとなった。DestPortは60881であるがhttp-over-tlsと表示されている。SrcPortのケースも同様に443とすると、http-over-tlsと表示されることが分かった。

TLSのレコードプロトコル

念のためTLSのレコードプロトコル構造を確認しておく。上位レイヤであるHTTPのヘッダとボディのデータはペイロードに含まれる。

  • TCPヘッダ
    • Content-Type(1 Byte)
    • Version(2 Bytes)
    • Length(2 Bytes)
    • ペイロード
  • MAC

まとめ

WiresharkのTLSレコードのhttp-over-tlsの表示は、SrcまたはDestのPortを見て決定している。

ただし、session->app_handleが決定済みのケースは、今回追っていない。

参考

Wiresharkのビルド mac

Wiresharkのmacでのビルドの覚書き。

私の環境ではパッケージでQtを入れていたのでCMAKE_PREFIX_PATHでポイントしている。他にもライブラリが必要なものがあるかもしれない。その場合は、依存を見て解決していく。cmakeを使ってビルドを行なうという流れだけ理解しておけばよい。

Qtが複数入っている場合、以下のようにエラーになった。brewで入れていたライブラリを削除するとうまくいった。

ビルドに成功するとrunディレクトリにアプリケーションであるWireshark.appディレクトリがあることがわかる。

ビルド環境

  • mac OS Catalina 10.15.7
  • Intel Core i5

参考

 

「ビジネスデザインのための行動経済学ノート」を読んだ

技術以外のインプット。

人の行動原理を知り、よりよい選択や行動を実践するためのヒントを得たい、という動機から「行動経済学」に関する書籍を探索していたところ、イラストが多く学びやすそうであった本書を手にとり読んでみました。結論から言って、技術中心で心理学や経済学にあまり馴染みのなかった私にとってはすごく分かりすく、非常に為になった難解であろう言葉を分かりやすく説明してくれており、人の心理や行動原理から、どのように考えればよいかのヒントを「活用方法」としてまとめてくれています

本書は、メディアプラットフォームのnoteでUXデザイナーのジマタロ氏が連載していた記事をわかりやすく再構成したものらしいです。note公式アカウントで紹介されているので以下にリンクを掲載しておきます。

https://note.com/info/n/n5df965318ae2

さて、人はどのようにして意思決定を行なっているのでしょうか?

「よく考えた上で判断した(ほんとうに?何かに影響受けてない?)」「お得な買い物をしたなあ(お得にみえてるだけでは?)」「こうすることが相手にとってベストだ(自分の思い込みでは?)」、など冷静になってよくよく考えてみると、何でその時はそう考え行動したのだろうか、という経験が誰しもあるのではないでしょうか。人間は合理的なようで、非合理な行動をとってしまうもの。行動経済学の立脚点はそこにあるようです。人は環境や感情に影響を受けるものなのだと。なるほど。

例えば、ある商品があったとして500円で売られていたものが特価で280円になった場合はお得な感じがしますが、300円が280円になってもあまりお得な感じがしません。それぞれ基準(アンカー)となる価格が500円、300円となり、基準値からの振れ幅で考えてしまうためです。これは、アンカリング効果と呼ばれるそうです。また、特に先に入ってくる情報に影響を受けてしまい、アンカーと一致するようなイメージを想起することをプライミング効果と呼ぶそうです。美味しそうな食べ物を見た後に「ケー○」という表示を見て「ケース」でなく「ケーキ」を想起してしまうのはプライミングによるものと言えます。私たちの思考や行動が、思ってもいないようで実はその時々の状況に影響を受けてしまっている、ということです。あまり意識したことはなかったけれど、なるほど、納得できます。アンカリングやプライミングの効果を活用する方法としては、順番を意識する、ということ。料金や資料など、xxの順で見せる、と言った具合に。

他にも、ユーザーが行動を移すときに後押しをうながすための実践的なテクニック(ナッジ)など、サービスや企画を考える人やデザインする人にとっては参考になる情報が詰まってます。

私は本書を読み行動経済学に強く関心をひかれ、その後すぐに熱の冷めないまま以下2つの書籍も気になり購入し一気に読みました。上の「ファスト&スロー」は著名な本ですがやや学術的、下の「ケースメソッドMBA 行動経済学」はどちらかと言うとビジネスよりで実践的でしょうか。

ファスト&スロー

 

こちらは有名な本で、「プロスペクト理論」で知られるノーベル経済学賞を受賞されたダニエル・カーネマン著の書籍です。文庫本タイプで上・下巻あります。理論の背景や歴史、心理学実験の内容や結果についての考察など、より深い洞察を得たい方には本書がおすすめです。Amazonで注文したところ、届いた書の帯に「東大でいちばん読まれた本 東大生協本郷書籍部2014年9/1〜30文庫ランキング1位」と書かれておりました。書店で見かけたら、システム1(速い思考=直感)が大いに働くであろうキャッチコピーであることは間違いありませんね 笑。

システム1:早い思考、直感、コントロールしている感覚がない
システム2:じっくり考える思考、複雑な計算など頭を使う

ケースメソッドMBA 行動経済学

 

名古屋商科大学ビジネススクールの社会人受講生を対象とした行動経済学の授業の一部の記録をもとに加筆・再構成をした書籍となっています。

講義の様子が伝わるような体で書かれていて読みやすいです。講義の白熱している雰囲気、臨場感が伝わってきます。理論を現実のケースをもとに考察しているところがイメージがつきやすく分かりやすいのではないでしょうか。討議のなかでの生徒の様々な視点からの考え方にもふれることができ、なるほどそういう考え方もあるなと学びがあります。

 

 

BoskampiによるPixabayからの画像

NuxtJS+socketioで認証フィルタをはさむ(passport)

NuxtJSでサーバ側はexpress、websocketを使うのにsocket.ioを使っていて、ユーザー認証をpassportで行なう場合の覚書き。

今回試すこと

axiosを使ってサーバAPIでログインし、その後socket.ioでwebsocketに接続する。やりたいことは、サーバAPIで開始したセッションをsocket.ioで引き継ぎ利用することである。

これには、socket.ioのミドルウェアを使って開始済みのセッションを読み込めば、socket.ioのリクエストでセッションを扱える。気をつける点は、socket.ioのミドルウェア関数インターフェースがexpressのそれと異なっているので、正しく情報を引き継げるようミドルウェアをつないでやることである。具体的には、socket.ioのドキュメントにもあるとおり以下のようにすればよい。

socket.ioのロード

今回は、NuxtJSのmoduleのlistenフックを使ってsocket.ioサーバをnuxtのhttpサーバ に統合する。serverMiddlewareで、/apiにexpressのappをマウントする。また、Nuxtのlistenフックを使ってsocket.ioサーバを統合するための設定をmodulesに定義する。

サーバ側

今回は動作検証のため、セッションはメモリストアを使っている。socket.ioとセッションストアを共有するため、共通の定義を使うようにしている。

server/index.js

server/session.js

server/io.js

クライアント側

クライアント側は、ログインしてセッション確認するだけのためのインターフェースにする。以下のような感じ。

ログインしていない状態の時。

ログインしてsocket.ioにつながった時。

Viewテンプレートはveutifyを使う。

pages/index.vue

NuxtJSは、Universalモードで動かしているのでSSRを行なう。sessionは、asyncDataフックを使ってコンポーネントのdataに統合する。

検証用プログラムは以下

https://github.com/moritetu/nuxt-with-socket.io-passport

参考リンク