nginx http/3を動かす

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

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

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

#13 58.57 auto/configure: error: invalid option "--with-http_quic_module"

1	#13 58.57 auto/configure: error: invalid option "--with-http_quic_module"

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

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

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

FROM nginx:1.21.4 AS build
WORKDIR /src
RUN apt-get update && \
apt-get install -y git gcc make g++ cmake perl libunwind-dev golang && \
git clone https://boringssl.googlesource.com/boringssl && \
mkdir boringssl/build && \
cd boringssl/build && \
cmake .. && \
make
RUN apt-get install -y mercurial libperl-dev libpcre3-dev zlib1g-dev libxslt1-dev libgd-ocaml-dev libgeoip-dev && \
hg clone https://hg.nginx.org/nginx-quic   && \
hg clone http://hg.nginx.org/njs -r "0.6.2" && \
cd nginx-quic && \
hg update quic && \
auto/configure `nginx -V 2>&1 | sed "s/ \-\-/ \\\ \n\t--/g" | grep "\-\-" | grep -ve opt= -e param= -e build=` \
--build=nginx-quic --with-debug  \
--with-http_v3_module --with-stream_quic_module \
--with-cc-opt="-I/src/boringssl/include" --with-ld-opt="-L/src/boringssl/build/ssl -L/src/boringssl/build/crypto" && \
make
FROM nginx:1.21.4
COPY nginx.conf /etc/nginx/nginx.conf
RUN mkdir -p /certs
# https://letsencrypt.org/docs/certificates-for-localhost/
COPY localhost.crt /certs/localhost.crt
COPY localhost.key /certs/localhost.key
COPY --from=build /src/nginx-quic/objs/nginx /usr/sbin
RUN /usr/sbin/nginx -V
EXPOSE 10443

FROM nginx:1.21.4 AS build

WORKDIR /src

RUN apt-get update && \

apt-get install -y git gcc make g++ cmake perl libunwind-dev golang && \

git clone https://boringssl.googlesource.com/boringssl && \

mkdir boringssl/build && \

cd boringssl/build && \

cmake .. && \

make

RUN apt-get install -y mercurial libperl-dev libpcre3-dev zlib1g-dev libxslt1-dev libgd-ocaml-dev libgeoip-dev && \

hg clone https://hg.nginx.org/nginx-quic && \

hg clone http://hg.nginx.org/njs -r "0.6.2" && \

cd nginx-quic && \

hg update quic && \

auto/configure `nginx -V 2>&1 | sed "s/ \-\-/ \\\ \n\t--/g" | grep "\-\-" | grep -ve opt= -e param= -e build=` \

--build=nginx-quic --with-debug \

--with-http_v3_module --with-stream_quic_module \

--with-cc-opt="-I/src/boringssl/include" --with-ld-opt="-L/src/boringssl/build/ssl -L/src/boringssl/build/crypto" && \

make

FROM nginx:1.21.4

COPY nginx.conf /etc/nginx/nginx.conf

RUN mkdir -p /certs

# https://letsencrypt.org/docs/certificates-for-localhost/

COPY localhost.crt /certs/localhost.crt

COPY localhost.key /certs/localhost.key

COPY --from=build /src/nginx-quic/objs/nginx /usr/sbin

RUN /usr/sbin/nginx -V

EXPOSE 10443

nginx.conf

user  nginx;
worker_processes  1;
events {
worker_connections 1024;
}
error_log  /var/log/nginx/error.log notice;
pid        /var/run/nginx.pid;
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
log_format quic '$remote_addr - $remote_user [$time_local] '
'"$request" $status $body_bytes_sent '
'"$http_referer" "$http_user_agent" "$http3"';
root /usr/share/nginx/html;
access_log /var/log/nginx/access.log quic;
server {
# for better compatibility it's recommended
# to use the same port for quic and https
listen 10443 http3 reuseport;
listen 10443 ssl http2;
ssl_certificate /certs/localhost.crt;
ssl_certificate_key /certs/localhost.key;
ssl_protocols TLSv1.3;
location / {
# required for browsers to direct them into quic port
add_header Alt-Svc 'h3=":10443";h3-29=":10443"; ma=86400';
}
}
}

user nginx;

worker_processes 1;

events {

worker_connections 1024;

}

error_log /var/log/nginx/error.log notice;

pid /var/run/nginx.pid;

http {

include mime.types;

default_type application/octet-stream;

sendfile on;

log_format quic '$remote_addr - $remote_user [$time_local] '

'"$request" $status $body_bytes_sent '

'"$http_referer" "$http_user_agent" "$http3"';

root /usr/share/nginx/html;

access_log /var/log/nginx/access.log quic;

server {

# for better compatibility it's recommended

# to use the same port for quic and https

listen 10443 http3 reuseport;

listen 10443 ssl http2;

ssl_certificate /certs/localhost.crt;

ssl_certificate_key /certs/localhost.key;

ssl_protocols TLSv1.3;

location / {

# required for browsers to direct them into quic port

add_header Alt-Svc 'h3=":10443";h3-29=":10443"; ma=86400';

}

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

$ openssl req -x509 -out localhost.crt -keyout localhost.key   -newkey rsa:2048 -nodes -sha256   -subj '/CN=localhost' -extensions EXT -config <( \
printf "[dn]\nCN=localhost\n[req]\ndistinguished_name = dn\n[EXT]\nsubjectAltName=DNS:localhost\nkeyUsage=digitalSignature\nextendedKeyUsage=serverAuth")
$ docker build -t nginx-http3 .
$ docker run -it -p 10443:10443 -p 10443:10443/udp --rm --name http3 nginx-http3:latest
/docker-entrypoint.sh: /docker-entrypoint.d/ is not empty, will attempt to perform configuration
/docker-entrypoint.sh: Looking for shell scripts in /docker-entrypoint.d/
/docker-entrypoint.sh: Launching /docker-entrypoint.d/10-listen-on-ipv6-by-default.sh
10-listen-on-ipv6-by-default.sh: info: Getting the checksum of /etc/nginx/conf.d/default.conf
10-listen-on-ipv6-by-default.sh: info: Enabled listen on IPv6 in /etc/nginx/conf.d/default.conf
/docker-entrypoint.sh: Launching /docker-entrypoint.d/20-envsubst-on-templates.sh
/docker-entrypoint.sh: Launching /docker-entrypoint.d/30-tune-worker-processes.sh
/docker-entrypoint.sh: Configuration complete; ready for start up
2021/12/16 15:25:28 [notice] 1#1: using the "epoll" event method
2021/12/16 15:25:28 [notice] 1#1: nginx/1.21.4 (nginx-quic)
2021/12/16 15:25:28 [notice] 1#1: built by gcc 10.2.1 20210110 (Debian 10.2.1-6) 
2021/12/16 15:25:28 [notice] 1#1: OS: Linux 5.10.47-linuxkit
2021/12/16 15:25:28 [notice] 1#1: getrlimit(RLIMIT_NOFILE): 1048576:1048576
2021/12/16 15:25:28 [notice] 1#1: start worker processes
2021/12/16 15:25:28 [notice] 1#1: start worker process 31

$ openssl req -x509 -out localhost.crt -keyout localhost.key -newkey rsa:2048 -nodes -sha256 -subj '/CN=localhost' -extensions EXT -config <( \

printf "[dn]\nCN=localhost\n[req]\ndistinguished_name = dn\n[EXT]\nsubjectAltName=DNS:localhost\nkeyUsage=digitalSignature\nextendedKeyUsage=serverAuth")

$ docker build -t nginx-http3 .

$ docker run -it -p 10443:10443 -p 10443:10443/udp --rm --name http3 nginx-http3:latest

/docker-entrypoint.sh: /docker-entrypoint.d/ is not empty, will attempt to perform configuration

/docker-entrypoint.sh: Looking for shell scripts in /docker-entrypoint.d/

/docker-entrypoint.sh: Launching /docker-entrypoint.d/10-listen-on-ipv6-by-default.sh

10-listen-on-ipv6-by-default.sh: info: Getting the checksum of /etc/nginx/conf.d/default.conf

10-listen-on-ipv6-by-default.sh: info: Enabled listen on IPv6 in /etc/nginx/conf.d/default.conf

/docker-entrypoint.sh: Launching /docker-entrypoint.d/20-envsubst-on-templates.sh

/docker-entrypoint.sh: Launching /docker-entrypoint.d/30-tune-worker-processes.sh

/docker-entrypoint.sh: Configuration complete; ready for start up

2021/12/16 15:25:28 [notice] 1#1: using the "epoll" event method

2021/12/16 15:25:28 [notice] 1#1: nginx/1.21.4 (nginx-quic)

2021/12/16 15:25:28 [notice] 1#1: built by gcc 10.2.1 20210110 (Debian 10.2.1-6)

2021/12/16 15:25:28 [notice] 1#1: OS: Linux 5.10.47-linuxkit

2021/12/16 15:25:28 [notice] 1#1: getrlimit(RLIMIT_NOFILE): 1048576:1048576

2021/12/16 15:25:28 [notice] 1#1: start worker processes

2021/12/16 15:25:28 [notice] 1#1: start worker process 31

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

$ docker run -it --rm ymuski/curl-http3 curl -k -IL https://192.168.3.5:10443 --http3
HTTP/3 200
server: nginx/1.21.4
date: Thu, 16 Dec 2021 15:20:57 GMT
content-type: text/html
content-length: 615
last-modified: Tue, 02 Nov 2021 14:49:22 GMT
etag: "61814ff2-267"
alt-svc: h3=":10443";h3-29=":10443"; ma=86400
accept-ranges: bytes

$ docker run -it --rm ymuski/curl-http3 curl -k -IL https://192.168.3.5:10443 --http3

HTTP/3 200

server: nginx/1.21.4

date: Thu, 16 Dec 2021 15:20:57 GMT

content-type: text/html

content-length: 615

last-modified: Tue, 02 Nov 2021 14:49:22 GMT

etag: "61814ff2-267"

alt-svc: h3=":10443";h3-29=":10443"; ma=86400

accept-ranges: bytes

172.17.0.1 - - [16/Dec/2021:15:37:53 +0000] "HEAD / HTTP/3.0" 200 149 "-" "curl/7.76.1-DEV" "h3"

1	172.17.0.1 - - [16/Dec/2021:15:37:53 +0000] "HEAD / HTTP/3.0" 200 149 "-" "curl/7.76.1-DEV" "h3"

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データの情報表示部分だと思われる。

case SSL_ID_APP_DATA:
{
dissector_handle_t app_handle;
/* show on info column what we are decoding */
col_append_sep_str(pinfo->cinfo, COL_INFO, NULL, "Application Data");
/* app_handle discovery is done here instead of dissect_ssl_payload()
* because the protocol name needs to be displayed below. */
app_handle = session->app_handle;
if (!app_handle) {
/* Unknown protocol handle, ssl_starttls_ack was not called before.
* Try to find a port-based protocol and use it if there is no
* heuristics dissector (see process_ssl_payload). */
app_handle = dissector_get_uint_handle(ssl_associations, pinfo->srcport);
if (!app_handle) app_handle = dissector_get_uint_handle(ssl_associations, pinfo->destport);
}
proto_item_set_text(ssl_record_tree,
"%s Record Layer: %s Protocol: %s",
val_to_str_const(version, ssl_version_short_names, "SSL"),
val_to_str_const(content_type, ssl_31_content_type, "unknown"),
app_handle ? dissector_handle_get_dissector_name(app_handle)
: "Application Data");
proto_tree_add_item(ssl_record_tree, hf_tls_record_appdata, tvb,
offset, record_length, ENC_NA);

case SSL_ID_APP_DATA:

{

dissector_handle_t app_handle;

/* show on info column what we are decoding */

col_append_sep_str(pinfo->cinfo, COL_INFO, NULL, "Application Data");

/* app_handle discovery is done here instead of dissect_ssl_payload()

* because the protocol name needs to be displayed below. */

app_handle = session->app_handle;

if (!app_handle) {

/* Unknown protocol handle, ssl_starttls_ack was not called before.

* Try to find a port-based protocol and use it if there is no

* heuristics dissector (see process_ssl_payload). */

app_handle = dissector_get_uint_handle(ssl_associations, pinfo->srcport);

if (!app_handle) app_handle = dissector_get_uint_handle(ssl_associations, pinfo->destport);

}

proto_item_set_text(ssl_record_tree,

"%s Record Layer: %s Protocol: %s",

val_to_str_const(version, ssl_version_short_names, "SSL"),

val_to_str_const(content_type, ssl_31_content_type, "unknown"),

app_handle ? dissector_handle_get_dissector_name(app_handle)

: "Application Data");

proto_tree_add_item(ssl_record_tree, hf_tls_record_appdata, tvb,

offset, record_length, ENC_NA);

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

/* Get a dissector name from handle. */
const char *
dissector_handle_get_dissector_name(const dissector_handle_t handle)
{
if (handle == NULL) {
return NULL;
}
return handle->name;
}

/* Get a dissector name from handle. */

const char *

dissector_handle_get_dissector_name(const dissector_handle_t handle)

{

if (handle == NULL) {

return NULL;

}

return handle->name;

}

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

/* app_handle discovery is done here instead of dissect_ssl_payload()
* because the protocol name needs to be displayed below. */
app_handle = session->app_handle;
if (!app_handle) {
/* Unknown protocol handle, ssl_starttls_ack was not called before.
* Try to find a port-based protocol and use it if there is no
* heuristics dissector (see process_ssl_payload). */
app_handle = dissector_get_uint_handle(ssl_associations, pinfo->srcport);
if (!app_handle) app_handle = dissector_get_uint_handle(ssl_associations, pinfo->destport);
}

/* app_handle discovery is done here instead of dissect_ssl_payload()

* because the protocol name needs to be displayed below. */

app_handle = session->app_handle;

if (!app_handle) {

/* Unknown protocol handle, ssl_starttls_ack was not called before.

* Try to find a port-based protocol and use it if there is no

* heuristics dissector (see process_ssl_payload). */

app_handle = dissector_get_uint_handle(ssl_associations, pinfo->srcport);

if (!app_handle) app_handle = dissector_get_uint_handle(ssl_associations, pinfo->destport);

}

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

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

/* app_handle discovery is done here instead of dissect_ssl_payload()
* because the protocol name needs to be displayed below. */
app_handle = session->app_handle;
if (!app_handle)
{
/* Unknown protocol handle, ssl_starttls_ack was not called before.
* Try to find a port-based protocol and use it if there is no
* heuristics dissector (see process_ssl_payload). */
app_handle = dissector_get_uint_handle(ssl_associations, pinfo->srcport);
if (!app_handle)
app_handle = dissector_get_uint_handle(ssl_associations, 443); // destを443にする
}
proto_item_set_text(ssl_record_tree,
"%s Record Layer: %s Protocol: %s dst = %d src = %d",
val_to_str_const(version, ssl_version_short_names, "SSL"),
val_to_str_const(content_type, ssl_31_content_type, "unknown"),
app_handle ? dissector_handle_get_dissector_name(app_handle)
: "Application Data (unknown)",
pinfo->destport, pinfo->srcport
);

/* app_handle discovery is done here instead of dissect_ssl_payload()

* because the protocol name needs to be displayed below. */

app_handle = session->app_handle;

if (!app_handle)

{

/* Unknown protocol handle, ssl_starttls_ack was not called before.

* Try to find a port-based protocol and use it if there is no

* heuristics dissector (see process_ssl_payload). */

app_handle = dissector_get_uint_handle(ssl_associations, pinfo->srcport);

if (!app_handle)

app_handle = dissector_get_uint_handle(ssl_associations, 443); // destを443にする

}

proto_item_set_text(ssl_record_tree,

"%s Record Layer: %s Protocol: %s dst = %d src = %d",

val_to_str_const(version, ssl_version_short_names, "SSL"),

val_to_str_const(content_type, ssl_31_content_type, "unknown"),

app_handle ? dissector_handle_get_dissector_name(app_handle)

: "Application Data (unknown)",

pinfo->destport, pinfo->srcport

);

上記では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を使ってビルドを行なうという流れだけ理解しておけばよい。

brew install --cask sparkle
brew install libpcap
brew install ninja
brew install libssh
brew install cmake
wget https://www.wireshark.org/download/src/wireshark-3.6.0.tar.xz
unxz wireshark-3.6.0.tar.xz
tar xf wireshark-3.6.0.tar
cd wireshark-3.6.0
mkdir build && cd build
export CMAKE_PREFIX_PATH=/Users/guest/Qt/5.14.2/clang_64
cmake -GNinja ..
cmake --build .

brew install --cask sparkle

brew install libpcap

brew install ninja

brew install libssh

brew install cmake

wget https://www.wireshark.org/download/src/wireshark-3.6.0.tar.xz

unxz wireshark-3.6.0.tar.xz

tar xf wireshark-3.6.0.tar

cd wireshark-3.6.0

mkdir build && cd build

export CMAKE_PREFIX_PATH=/Users/guest/Qt/5.14.2/clang_64

cmake -GNinja ..

cmake --build .

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

file included from ../ui/qt/service_response_time_dialog.cpp:10:
In file included from ../ui/qt/service_response_time_dialog.h:13:
In file included from ../ui/qt/tap_parameter_dialog.h:26:
In file included from /Users/t-moriyasu/Qt/5.14.2/clang_64/lib/QtWidgets.framework/Headers/QMenu:1:
In file included from /Users/t-moriyasu/Qt/5.14.2/clang_64/lib/QtWidgets.framework/Headers/qmenu.h:43:
In file included from /usr/local/include/QtWidgets/qtwidgetsglobal.h:43:
In file included from /usr/local/include/QtGui/qtguiglobal.h:43:
/usr/local/include/QtCore/qglobal.h:675:26: error: no template named 'enable_if_t' in namespace 'std'; did you mean 'enable_if'?
typename = std::enable_if_t<std::is_arithmetic_v<T> && std::is_arithmetic_v<U> &&
~~~~~^
/Users/t-moriyasu/.electron_build_tools/third_party/Xcode/Xcode-12.4.0.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/bin/../include/c++/v1/type_traits:538:63: note: 'enable_if' declared here
template <bool, class _Tp = void> struct _LIBCPP_TEMPLATE_VIS enable_if {};

file included from ../ui/qt/service_response_time_dialog.cpp:10:

In file included from ../ui/qt/service_response_time_dialog.h:13:

In file included from ../ui/qt/tap_parameter_dialog.h:26:

In file included from /Users/t-moriyasu/Qt/5.14.2/clang_64/lib/QtWidgets.framework/Headers/QMenu:1:

In file included from /Users/t-moriyasu/Qt/5.14.2/clang_64/lib/QtWidgets.framework/Headers/qmenu.h:43:

In file included from /usr/local/include/QtWidgets/qtwidgetsglobal.h:43:

In file included from /usr/local/include/QtGui/qtguiglobal.h:43:

/usr/local/include/QtCore/qglobal.h:675:26: error: no template named 'enable_if_t' in namespace 'std'; did you mean 'enable_if'?

typename = std::enable_if_t<std::is_arithmetic_v<T> && std::is_arithmetic_v<U> &&

~~~~~^

/Users/t-moriyasu/.electron_build_tools/third_party/Xcode/Xcode-12.4.0.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/bin/../include/c++/v1/type_traits:538:63: note: 'enable_if' declared here

template <bool, class _Tp = void> struct _LIBCPP_TEMPLATE_VIS enable_if {};

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

ビルド環境

mac OS Catalina 10.15.7
Intel Core i5

参考

https://www.wireshark.org/docs/wsdg_html_chunked/ChapterSetup.html#ChSetupUNIX

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

コメントを残す

技術以外のインプット。

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

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

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

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

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

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

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

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

ファスト＆スロー

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

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

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

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

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

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のドキュメントにもあるとおり以下のようにすればよい。

const wrap = middleware => (socket, next) => middleware(socket.request, {}, next);

1	const wrap = middleware => (socket, next) => middleware(socket.request, {}, next);

socket.ioのロード

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

// nuxt.config.js
serverMiddleware: [{ path: '/api', handler: '~/server/index.js' }],
// Modules: https://go.nuxtjs.dev/config-modules
modules: [
// https://go.nuxtjs.dev/axios
'@nuxtjs/axios',
'~/modules/socket-io.js',
],

// nuxt.config.js

serverMiddleware: [{ path: '/api', handler: '~/server/index.js' }],

// Modules: https://go.nuxtjs.dev/config-modules

modules: [

// https://go.nuxtjs.dev/axios

'@nuxtjs/axios',

'~/modules/socket-io.js',

// ~/modules/socket-io.js
import { attachSocketIO } from '../server/io'
export default function () {
this.nuxt.hook('listen', (server, listener) => {
attachSocketIO(server)
})
}

// ~/modules/socket-io.js

import { attachSocketIO } from '../server/io'

export default function () {

this.nuxt.hook('listen', (server, listener) => {

attachSocketIO(server)

})

}

サーバ側

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

server/index.js

import express from 'express'
import passport from 'passport'
import LocalStrategy from 'passport-local'
import session from './session'
const app = express()
// 今回はDBを使わず簡易のリストデータを使う
const USERS = [
{
username: 'username1',
password: 'password1',
},
]
// セッションのMemoryStoreはsocket.ioと共有する
app.use(session)
app.use(express.urlencoded({ extended: true }))
app.use(express.json())
app.use(passport.initialize())
app.use(passport.session())
passport.use(
new LocalStrategy(function (username, password, done) {
const user = USERS.find(
(data) => data.username === username && data.password === password
)
if (!user) {
return done(null, false)
}
return done(null, { username: user.username })
})
)
passport.serializeUser(function (user, done) {
done(null, user)
})
passport.deserializeUser(function (user, done) {
done(null, user)
})
app.post(
'/login',
passport.authenticate('local', {
successRedirect: '/',
failureRedirect: '/',
}),
(req, res, next) => {
res.json(req.user)
}
)
app.post('/logout', (req, res, next) => {
req.logout()
res.redirect('/')
})
app.get('/session', (req, res, next) => {
res.json(req.user)
})
export default app

import express from 'express'

import passport from 'passport'

import LocalStrategy from 'passport-local'

import session from './session'

const app = express()

// 今回はDBを使わず簡易のリストデータを使う

const USERS = [

{

username: 'username1',

password: 'password1',

]

// セッションのMemoryStoreはsocket.ioと共有する

app.use(session)

app.use(express.urlencoded({ extended: true }))

app.use(express.json())

app.use(passport.initialize())

app.use(passport.session())

passport.use(

new LocalStrategy(function (username, password, done) {

const user = USERS.find(

(data) => data.username === username && data.password === password

)

if (!user) {

return done(null, false)

}

return done(null, { username: user.username })

})

)

passport.serializeUser(function (user, done) {

done(null, user)

})

passport.deserializeUser(function (user, done) {

done(null, user)

})

app.post(

'/login',

passport.authenticate('local', {

successRedirect: '/',

failureRedirect: '/',

}),

(req, res, next) => {

res.json(req.user)

}

)

app.post('/logout', (req, res, next) => {

req.logout()

res.redirect('/')

})

app.get('/session', (req, res, next) => {

res.json(req.user)

})

export default app

server/session.js

import session from 'express-session'
const ses = session({ secret: 'secret', resave: true, saveUninitialized: true })
export default ses

import session from 'express-session'

const ses = session({ secret: 'secret', resave: true, saveUninitialized: true })

export default ses

server/io.js

import socketIO from 'socket.io'
import passport from 'passport'
import session from './session'
// connect io middleware to express middleware
const wrap = (middleware) => (socket, next) =>
middleware(socket.request, {}, next)
export function attachSocketIO(server) {
const io = socketIO(server, { serveClient: false })
// セッションのMemoryStoreはexpressと共通にする
io.use(wrap(session))
io.use(wrap(passport.initialize()))
io.use(wrap(passport.session()))
io.use((socket, next) => {
if (socket.request.user) {
next()
} else {
next(new Error('unauthorized'))
}
})
io.on('connection', (socket) => {
socket.emit('echo', {
message: 'hello',
})
})
return io
}

import socketIO from 'socket.io'

import passport from 'passport'

import session from './session'

// connect io middleware to express middleware

const wrap = (middleware) => (socket, next) =>

middleware(socket.request, {}, next)

export function attachSocketIO(server) {

const io = socketIO(server, { serveClient: false })

// セッションのMemoryStoreはexpressと共通にする

io.use(wrap(session))

io.use(wrap(passport.initialize()))

io.use(wrap(passport.session()))

io.use((socket, next) => {

if (socket.request.user) {

next()

} else {

next(new Error('unauthorized'))

}

})

io.on('connection', (socket) => {

socket.emit('echo', {

message: 'hello',

})

return io

}

クライアント側

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

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

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

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

pages/index.vue

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

<template>
<v-app>
<v-main>
<v-card class="ma-5 pa-5" width="400" flat>
<v-text-field
v-model="username"
label="username"
required
></v-text-field>
<v-text-field
v-model="password"
label="password"
required
></v-text-field>
<v-btn :disabled="!loggedIn" @click="submit"> ログイン </v-btn>
<v-alert
class="my-5"
:type="socket && socket.connected ? 'success' : 'error'"
dense
>
{{ socketStatus }}
</v-alert>
<v-dialog v-model="dialog" width="300">
<pre class="pa-5">{{ session }}</pre>
</v-dialog>
<v-btn text :disabled="loggedIn" @click="getSession">session</v-btn>
|
<v-btn :disabled="loggedIn" text @click="logout">logout</v-btn>
</v-card>
</v-main>
</v-app>
</template>
<script>
import { io } from 'socket.io-client'
export default {
async asyncData({ app }) {
const session = await app.$axios.$get('/api/session')
return { session }
},
data() {
return {
dialog: false,
username: 'username1',
password: 'password1',
socket: null,
socketStatus: 'disconnected',
session: false,
}
},
computed: {
loggedIn() {
return !this.session
},
},
mounted() {
if (this.session) {
this.connectWs()
}
},
methods: {
async submit() {
await this.$axios
.$post('/api/login', {
username: this.username,
password: this.password,
})
.then((user) => {
this.session = user
if (this.socket && this.socket.connected) {
this.socket.close()
}
this.connectWs()
})
},
async logout() {
await this.$axios.$post('/api/logout')
if (this.socket) {
this.socket.close()
}
this.session = false
},
async getSession() {
this.session = await this.$axios.$get('/api/session')
this.dialog = true
},
connectWs() {
this.socket = io({ transports: ['websocket'] })
this.socket.on('connect_error', (data) => {
this.socketStatus = data.message
})
this.socket.on('echo', (data) => {
this.socketStatus = data.message
})
this.socket.on('disconnect', (reason) => {
this.socketStatus = 'disconnected'
if (reason === 'io server disconnect') {
this.socket.connect()
}
})
},
},
}
</script>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

<v-app>

<v-main>

<v-card class="ma-5 pa-5" width="400" flat>

<v-text-field

v-model="username"

label="username"

required

></v-text-field>

<v-text-field

v-model="password"

label="password"

required

></v-text-field>

<v-btn :disabled="!loggedIn" @click="submit"> ログイン </v-btn>

<v-alert

class="my-5"

:type="socket && socket.connected ? 'success' : 'error'"

dense

</v-alert>

<v-dialog v-model="dialog" width="300">

<pre class="pa-5">{{ session }}</pre>

</v-dialog>

<v-btn text :disabled="loggedIn" @click="getSession">session</v-btn>

<v-btn :disabled="loggedIn" text @click="logout">logout</v-btn>

</v-card>

</v-main>

</v-app>

</template>

import { io } from 'socket.io-client'

export default {

async asyncData({ app }) {

const session = await app.$axios.$get('/api/session')

return { session }

data() {

return {

dialog: false,

username: 'username1',

password: 'password1',

socket: null,

socketStatus: 'disconnected',

session: false,

}

computed: {

loggedIn() {

return !this.session

mounted() {

if (this.session) {

this.connectWs()

}

methods: {

async submit() {

await this.$axios

.$post('/api/login', {

username: this.username,

password: this.password,

})

.then((user) => {

this.session = user

if (this.socket && this.socket.connected) {

this.socket.close()

}

this.connectWs()

})

async logout() {

await this.$axios.$post('/api/logout')

if (this.socket) {

this.socket.close()

}

this.session = false

async getSession() {

this.session = await this.$axios.$get('/api/session')

this.dialog = true

connectWs() {

this.socket = io({ transports: ['websocket'] })

this.socket.on('connect_error', (data) => {

this.socketStatus = data.message

})

this.socket.on('echo', (data) => {

this.socketStatus = data.message

})

this.socket.on('disconnect', (reason) => {

this.socketStatus = 'disconnected'

if (reason === 'io server disconnect') {

this.socket.connect()

}

})

}

</script>

検証用プログラムは以下

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

デバッグライフ

プログラミングや日常の記録など

nginx http/3を動かす

参考

WiresharkのTLS Record Layerのhttp-over-tls

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

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

TLSのレコードプロトコル

まとめ

参考

Wiresharkのビルド mac

ビルド環境

参考

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

NuxtJS＋socketioで認証フィルタをはさむ（passport）

今回試すこと

socket.ioのロード

サーバ側

server/index.js

server/session.js

server/io.js

クライアント側

pages/index.vue

参考リンク