Slide 1

Slide 1 text

BasicBasic認証 @sadnessOjisan フロントエンドカンファレンス北海道

Slide 2

Slide 2 text

自己紹介

Slide 3

Slide 3 text

Basic認証とは こういうやつ

Slide 4

Slide 4 text

Basic認証とは サービス公開前に何かしらの方法で URLを知られてしまったときにアクセスを防げる

Slide 5

Slide 5 text

簡単に実装できる WebFWはだいたいこの機能を持っている

Slide 6

Slide 6 text

仕様も小さい RFC7617: The 'Basic' HTTP Authentication Scheme

Slide 7

Slide 7 text

The Basic authentication scheme utilizes the Authentication Framework as follows. In challenges: o The scheme name is "Basic". o The authentication parameter 'realm' is REQUIRED ([RFC7235], Section 2.2). o The authentication parameter 'charset' is OPTIONAL (see Section 2.1). o No other authentication parameters are defined -- unknown parameters MUST be ignored by recipients, and new parameters can only be defined by revising this specification. ここでいう認証フレームワークとチャレンジとは何か?

Slide 8

Slide 8 text

RFC9110: HTTP Semantics (Authorization) token68 = 1*( ALPHA / DIGIT / "-" / "." / "_" / "~" / "+" / "/" ) *"=" credentials = auth-scheme [ 1*SP ( token68 / #auth-param ) ] Authorization = credentials a-z, A-z, 0-9, 記号 で作られた文字列 QWxhZGRpbjpPcGVuU2VzYW1l https://datatracker.ietf.org/doc/html/rfc9110

Slide 9

Slide 9 text

RFC9110: HTTP Semantics (Authorization) token68 = 1*( ALPHA / DIGIT / "-" / "." / "_" / "~" / "+" / "/" ) *"=" credentials = auth-scheme [ 1*SP ( token68 / #auth-param ) ] Authorization = credentials scheme [space] token68 Bearer fjiweofjewfj

Slide 10

Slide 10 text

RFC9110: HTTP Semantics (Authorization) token68 = 1*( ALPHA / DIGIT / "-" / "." / "_" / "~" / "+" / "/" ) *"=" credentials = auth-scheme [ 1*SP ( token68 / #auth-param ) ] Authorization = credentials Authorization に値をセットする Basic hogehoge==

Slide 11

Slide 11 text

Basic認証のクレデンシャルは?

Slide 12

Slide 12 text

The Basic authentication scheme utilizes the Authentication Framework as follows. In challenges: o The scheme name is "Basic". o The authentication parameter 'realm' is REQUIRED ([RFC7235], Section 2.2). o The authentication parameter 'charset' is OPTIONAL (see Section 2.1). o No other authentication parameters are defined -- unknown parameters MUST be ignored by recipients, and new parameters can only be defined by revising this specification.

Slide 13

Slide 13 text

Basic 認証の資格情報の作り方 obtains the user-id and password from the user, constructs the user-pass by concatenating the user-id, a single colon (":") character, and the password, encodes the user-pass into an octet sequence (see below for a discussion of character encoding schemes), and obtains the basic-credentials by encoding this octet sequence using Base64 ([RFC4648], Section 4) into a sequence of US-ASCII characters ([RFC0020]). userid と password を : で繋ぐ

Slide 14

Slide 14 text

Basic 認証の資格情報の作り方 obtains the user-id and password from the user, constructs the user-pass by concatenating the user-id, a single colon (":") character, and the password, encodes the user-pass into an octet sequence (see below for a discussion of character encoding schemes), and obtains the basic-credentials by encoding this octet sequence using Base64 ([RFC4648], Section 4) into a sequence of US-ASCII characters ([RFC0020]). Base64でエンコードする

Slide 15

Slide 15 text

サーバーは逆に利用する ● Base64でdecode ● : 区切りで分割 ● 前半が user id, 後半が password ● それを検証して、想定値でなければ 401 を返す

Slide 16

Slide 16 text

ブラウザはどのように動くのか

Slide 17

Slide 17 text

お題となる実装

Slide 18

Slide 18 text

なんで Ruby ? 発表したかった!!!

Slide 19

Slide 19 text

お題となる実装

Slide 20

Slide 20 text

お題となる実装 表示される!

Slide 21

Slide 21 text

www-authenticate を消すと...??? ID/PASS の 入力フォームがが表示されない!!!

Slide 22

Slide 22 text

realm だけを消すと...??? ID/PASS の 入力フォームがが表示されない!!!

Slide 23

Slide 23 text

realm に適当な値を残すと...???

Slide 24

Slide 24 text

realm に適当な値を残すと...??? 表示される!

Slide 25

Slide 25 text

www-authenticate に realm がないと入力 フォームが表示されない

Slide 26

Slide 26 text

Realmが返ってこない例: digdag

Slide 27

Slide 27 text

digdag ● オープンソースのワークフローエ ンジン ● バッチの実行サーバーの管理に便 利 ● かわいい https://github.com/treasure-data/digdag

Slide 28

Slide 28 text

管理画面にBasic認証をかけられる?

Slide 29

Slide 29 text

管理画面にBasic認証をかけられる? ※ https://gist.github.com/hiroyuki-sato/229302a1867025876de7fd1d8ffa2bf1 ※ https://x.com/hiroysato/status/1181566196455559168

Slide 30

Slide 30 text

コンテンツも表示されない、 資格情報の入力フォームも 表示されない

Slide 31

Slide 31 text

modheader などで無理やりログインする

Slide 32

Slide 32 text

表示された!

Slide 33

Slide 33 text

Basic認証は普通にフォームから 入力したいのだが

Slide 34

Slide 34 text

表示されない ● ID/PASSWORD入力画面が表示されない ● ブラウザ拡張でヘッダーに Basic つける必要がある

Slide 35

Slide 35 text

Realmが付いていないときの挙動だ!!!

Slide 36

Slide 36 text

Realm がない!

Slide 37

Slide 37 text

401 のときに、 .header("WWW-Authenticate", "Basic realm=\"piyo\"") を追加するとよさそう https://github.com/treasure-data/digdag/blob/eae89b0daf6c62f12309d8c7194454dfb18cc5c3/digdag-server/src/m ain/java/io/digdag/server/GenericJsonExceptionHandler.java#L30 Contribute Chance! 誰か頼む〜〜〜