Upgrade to Pro — share decks privately, control downloads, hide ads and more …

HTTPを手で書いて学ぶ ファイルアップロードの仕組み

ikuma-t
October 27, 2023

HTTPを手で書いて学ぶ ファイルアップロードの仕組み

Kaigi on Rails 2023の登壇資料です!

ikuma-t

October 27, 2023
Tweet

More Decks by ikuma-t

Other Decks in Technology

Transcript

  1. 12 ファイルの種類が違っても処理フローは大体同じ ファイル種別ごとに送信されたデータを解釈するためのルールは異なるが、抽象レベルでは同じような処理になる サーバ ブラウザ ユーザー サーバ ブラウザ ユーザー ファイルを選択(`input

    type="file"` ) 任意の処理(バリデーションなど)を行う 送信ボタンやドラッグ& ドロップをトリガーに送信処理が実行される HTTP リクエストによってファイルを送信 HTTP リクエストでファイルを受け取る 任意の処理(データの抽出・加工・保存など)を行う
  2. 22 実際にやってみよう!(HTTPサーバ) ※ WEBRickでのデモですが、仕様に則っていれば他のサーバでも同じ挙動になるはずです。 9 File.write(File.join(PATH, name), file) 10 res.body

    = 'File received' 1 require 'webrick' 2 require 'base64' 3 4 server = WEBrick::HTTPServer.new({ Port: 2000 }) 5 6 server.mount_proc '/upload' do |req, res| 7 # { name: リクエストのname の値, file: リクエストのfile の値 } 8 req.query.transform_keys(&:to_sym) in name:, file: 11 end 12 13 server.start デモあり
  3. 23 実際にやってみよう!(HTTPリクエスト) ncコマンドでリクエストを送ります 2 POST /upload HTTP/1.1 3 Host: localhost

    4 Content-Length: 32 5 Content-Type: application/x-www-form-urlencoded 6 7 name=error.txt&file=ruby&friends 1 printf "$(cat <<! 8 ! 9 )" | nc localhost 2000 デモあり
  4. 24 実際にやってみよう(結果) 1. HTTP本文がそのまま届く(共通) `socket.read()`で中身を覗き見ると、自分が送ったHTTPリクエ ストが文字列として入っていた。 2. Content-Typeに則ってパース(共通) 0x26(&)で区切ってnameとvalueのペアにしていた。 application/x-www-form-urlencodedの仕様に沿った実装

    3. コンテンツが誤って解釈される 本来はruby&friendsが正しいが、&がそのまま入っていることで そこで区切りが入ってしまっている。 これはかなり単純化した例だけれど、 フォーマットで使われている文字と コンテンツが重複しないための工夫が必要であ ることがわかる
  5. 25 コンテンツが正しく届けられるための仕組み:エンコード パーセントエンコード & %26 %のあとに2桁の16進数が続く形式。非英数文字(&やスペー ス)を安全に送付するために利用。 formからsubmitする場合はこのエンコードが適用される。 Base64エンコード あ

    44GC A~Z, a~z, 0~9, +, /の64種類の文字で構成された文字列に変 換する。 3バイトのバイナリが4バイトに変換される。 歴史的に使われてきた背景や変換後のデータ量から、バイナリを埋め込む際にはBase64エンコードが よく使われる。
  6. 26 Base64エンコードを行なってアップロード 1. HTTPリクエスト: Base64エンコードしたコンテンツを埋め込む 2. HTTPサーバ:コンテンツをBase64デコードしてから任意処理を行う 変更部分のみ抜粋 1 Content-Length:

    36 # ここも変更 2 Content-Type: application/x-www-form-urlencoded 3 4 name=error.txt&file=cnVieSZmcmllbmRz # Base64 でエンコードしたもの 1 # アプリケーションロジック(ファイルを保存する)の前にデコード 2 decoded_file = Base64.decode64(file) 3 File.write(File.join(PATH, name), decoded_file) デモあり
  7. 30 multipart/form-data 異なる種類のデータを1つのHTTPリクエスト内で複数の部分に分割して送信することができる。 境界が明示的に分離されているので、バイナリをそのまま埋め込むことができる。 1 POST /upload HTTP/1.1 2 Host:

    localhost 3 Content-Type: multipart/form-data; boundary=--KaigiOnRailsBoundary2023xyz 4 Content-Length: xxx 5 6 --KaigiOnRailsBoundary2023xyz # パート1 7 Content-Disposition: form-data; name="name" 8 Content-Type: text/plain 9 10 David 11 --KaigiOnRailsBoundary2023xyz # パート2 12 Content-Disposition: form-data; name="avatar" filename="avatar.png" 13 Content-Type: image/png 14 15 \x89\x50\... 16 --KaigiOnRailsBoundary2023xyz--
  8. 31 multipartのpart MIMEタイプ「multipart」の各part 1 require 'js' 2 require 'securerandom' 3

    4 def characters 5 [*'0'..'9', *'A'..'Z', *'a'..'z', "'", '-', '_'] 6 end 7 8 def boundary 9 Array.new(rand(0..70)) do 10 characters.sample(random: SecureRandom) 11 end.join 12 end 13 14 # payload の表示・処理方法や、表示や処理に関わるファイル名等の付 15 def content_disposition(name, filename = nil) 16 filename = filename ? "; filename=#{filename}" : ' 17 "Content-Disposition: form-data; name=#{name}#{fil 18 end 19 20 def part(name, filename = nil, type = 'text/plain') 21 part_boundary = boundary 22 <<~PART 23 --#{part_boundary} 24 #{content_disposition(name, filename)} 25 Content-Type: #{type} 26 27 ※ コンテンツ(バイナリの場合はそのまま)がここに入ります 実行結果がここに表示されます。 Key名 値を入力してください ファイル名 値を入力してください 種類 値を入力してください 実行する
  9. 37 オブジェクトストレージへのアップロード ストレージサービス クライアントアプリ ユーザー ストレージサービス クライアントアプリ ユーザー ファイルアップロードを要求 署名付きURL

    やトークンを要求(ここはPOST ) 署名付きURL やトークンを発行 ファイルアップロードUI を提供 ファイルを選択する 署名付きURL やトークンを用いてファイルをアップロードする(ここはPUT ) ファイルアップロード完了 ユーザーにファイルアップロード完了をフィードバック オブジェクトを更新することからPUTを使っているだけであって、適切なMIMEタイプを指定して、バイナリを直接コ ンテンツに含める部分はこれまでと特に変わらない。
  10. 41 超簡易な再開可能なアップロードをやってみる 擬似的にアップロードを止めて、途中から再開する 1 printf "$(cat <<! 2 PUT /resumable-upload

    HTTP/1.1 3 Host: localhost 4 Content-Length: 270 5 6 $(tail box/sample.txt) 7 ! 8 )" | nc localhost 711 1 nc localhost 711 <<! 2 GET /resumable-upload HTTP/1.1 3 Host: localhost 4 5 ! 1 printf "$(cat <<! 2 PUT /resumable-upload HTTP/1.1 3 Host: localhost 4 Content-Length: 180 5 Content-Range: bytes 90-270/270 6 7 $(tail -c +91 box/sample.txt) 8 ! 9 )" | nc localhost 711 1 printf "$(cat <<! 2 PUT /resumable-upload HTTP/1.1 3 Host: localhost 4 Content-Length: 90 5 Content-Range: bytes 180-270/270 6 7 $(tail -c +181 box/sample.txt) 8 ! 9 )" | nc localhost 711