🤯

Rails + Nuxt.js (SSR) でデータが壊れる原因と対策

2022/10/15に公開

Rails 側で生成した URL のパラメータが Nuxt.js を経由するとたまーにおかしくなる現象に二年以上悩まされており、一次凌ぎな対応を繰り返していたら収拾つかなくなってきたので根本的な原因を調査した記録です。

データが壊れる過程

状態 整合性
元の文字列 a b+
Rails側でエンコード[1] a+b%2B[2]
Nuxt.js 側[3]で受け取ってデコード a+b+[4] ×
Nuxt.js側からRails側に投げる[5] a%2Bb%2B ×
Rails側で受けてデコード a+b+ ×

Nuxt.js 側で + をスペースに戻さないまま %2B+ に戻しているため、元がスペースだったのか + だったのかわからなくなっている

対策1. スペースを含めない

状態 整合性
元の文字列 a b+
スペースをドットに置換 a.b+
Rails側でエンコード a.b%2B
Nuxt.js 側で受け取ってデコード a.b+
Nuxt.js側からRails側に投げる a.b%2B
Rails側で受けてデコード a.b+
ドットをスペースに置換 a b+

スペースを含まないことで問題をギリ回避する

対策2. エンコードデコードの世界から脱却

状態 整合性
元の文字列 a b+
URL Safe Base64 形式に変換 YSBiKw
Rails側でエンコード YSBiKw
Nuxt.js 側で受け取ってデコード YSBiKw
Nuxt.js側からRails側に投げる YSBiKw
Rails側で受けてエンコード YSBiKw
URL Safe Base64 形式から復元 a b+

中途半端に置換して戻すぐらいなら一切エンコード・デコードと関わらないところまで持っていく

対策3. Rails側でエンコードしない(没)

そうすると下のようにURLがスペースで分離してしまうため問題をさらに複雑にしてしまう

https://example.com/?x=a b+

ブラウザが仮に解釈してくれたとしても Nuxt.js 側は a+b+ と解釈してデータは壊れる

対策4. Nuxt.js を更新する

試しに 2.14.12 から 2.15.8 に更新したら直った[6]
Rails 側で回避策を考えるのではなく問題が起きている方をどうにかするべきだった
つまり対策1も2もいらない (やってもいいけどやる必要はない)

反省

フレームワークの更新に追随していかないと本来やる必要のなかった調査と無駄な対策に時間を食うことになる

脚注
  1. エンコード用のメソッドは URI.encode_www_form_component ↩︎

  2. もちろんRails側で受ければ元に戻る URI.decode_www_form_component("a+b%2B") → a b+ ↩︎

  3. Nuxt.js のサーバーサイドの asyncData() の中の context.query だけがおかしい
    クライアントサイドの this.$route.query は問題ない ↩︎

  4. unescape または decodeURIComponent を使うとそうなる
    decodeURI では何も変化しない
    こちらのサイトが確認時に便利 https://www.online-toolz.com/tools/javascript-escape-functions.php ↩︎

  5. 取得したデータを引数とし、axios経由でRails側のAPIをGETする ↩︎

  6. 一方で 2.14.12 では何の問題もなかったE2Eテストが 2.15.8 では落ちまくる ↩︎

Discussion