JavaScript無効時に特定のページに遷移させる
<noscript>
<meta http-equiv="refresh" content="0;URL=http://example.com" />
</noscript>
Next.jsなら_documentに入れるかページごとにnext/headで追加すれば良さそう
canvasを使って動的にOGPを設定する
概要
参考
React Hook Formでのチェックボックスの取り扱い
Next.jsでのmultipart/form-dataの取り扱い
概要
Next.jsにおいてFEからmultipart/form-dataでデータをBFFに送り、そこからさらにBEにmultipart/form-dataで送る
今回の手法はFileとstringやnumberが混在したフォームデータに対応している
処理の流れ
1. FE to BFF
- fileのinputでonChangeのevent.target.filesからFileを取得
- File以外のデータもフォームで入力
- 必要なデータをFormDataにセットする
- FormDataをリクエストボディに指定してBFFのAPIをfetchで叩く。このときbodyにはシリアライズせずにFormDataをそのまま入れる(headerについてはboundryも含めて内部でいい感じに処理してくれるので設定しなくていい)
2. BFF to BE
- Next.jsのAPI処理部分ではconfigでbodyParserを無効化する
- formidableでreqからパースしてfieldsとfilesを得る
- fieldsとfilesをform-dataのFormDataに変換する。このときfilesにあるFileについてはそのままセットするのではなくformData.append(key, fs.createReadStream(files[key].path), files[key].name)とする
- bodyにはシリアライズせずにFormDataをそのまま入れてfetchを呼ぶ(headerについてはboundryも含めて内部でいい感じに処理してくれるので設定しなくていい)
参考資料
ETagを使った排他制御について
メモ
- 排他制御の実装としてはバージョンで管理するより、ETagとIf-Match使う方が楽なのか?
- RFC5789 PATCH Method for HTTPではETagとIf-Match使った方法が言及されている
- https://datatracker.ietf.org/doc/html/rfc5789#section-2
- https://datatracker.ietf.org/doc/html/rfc7232#section-2.3
- と思いきや、Apacheがデフォルトだと「inode」「ファイルサイズ」「更新日時」でETagを生成するため、LB使った複数台構成でどのマシンに割り振られたかによってETagの値が変わることがあったらしい
- 調べてみると、ApacheはデフォルトでETagにinodeを使っていたことによってinodeが外から見られうる脆弱性があったらしく、Apache 2.4.0ではデフォルトで「更新日時」「ファイルサイズ」からETag生成するように変わったみたい
- https://github.com/apache/httpd/commit/ba86234a7e627a50fdedc50b49ceaf40465911cb#diff-c29de0c7fc12783d768f9f9efe82cae4eb88953611ec632dcec85910d87c818b
- https://qiita.com/bezeklik/items/1c4145652661cf5b2271#%E3%82%A8%E3%83%B3%E3%83%86%E3%82%A3%E3%83%86%E3%82%A3%E3%82%BF%E3%82%B0etag
- https://security.netapp.com/advisory/ntap-20150209-0001/
- 気になってnginxの実装を見てみたが、nginxも「更新日時」「ファイルサイズ」だけで生成しているようなので良さそう
material-ui-pickersと@date-io/date-fnsでエラー「Uncaught RangeError: Format string contains an unescaped latin alphabet character `n`」
@date-io/date-fnsのv2系をmaterial-ui-pickersと使うとエラーを吐くのでv1.3.13にダウングレードしなければいけないらしい。