[Bug] メールアドレスに"+"記号が含まれている場合に、翻訳機能が正しく機能せず「INVALID EMAIL PROVIDED」と表示される

[sounisi5011]

Klearsky上で「翻訳する」ボタンを押した場合、KlearskyはMyMemoryを使用して翻訳を行います。この時、deパラメータにアカウントに使っているメールアドレスが指定されるのですが、このメールアドレス内の+がパーセントエンコーディングされていないために、以下のようなレスポンスが返ってきてしまいます：

{
    "responseData": {
        "translatedText": "INVALID EMAIL PROVIDED"
    },
    "quotaFinished": null,
    "mtLangSupported": null,
    "responseDetails": "INVALID EMAIL PROVIDED",
    "responseStatus": "403",
    "responderId": null,
    "exception_code": null,
    "matches": ""
}

URLのクエリストリングにおいて、+は を意味します。しかし、Klearskyはメールアドレス内の+を%2Bに置換しません。このためMyMemoryには が含まれるメールアドレスと認識され、「誤ったメールアドレス」と判定されるようです。

該当するコードは以下になります。encodeURIComponentによる変換処理は、mainState.atp.session?.emailにも必要です。

klearsky/src/components/Post.vue

Line 433 in 94a4cad

const url = `https://api.mymemory.translated.net/get?q=${encodeURIComponent(text)}&langpair=${langpair}|${dstLanguage}&de=${mainState.atp.session?.email}`

Note
なお、encodeURIComponentによる変換は不完全です。RFC3986に基づく「URL内で許可されていない文字」の一部(!'()*)を変換しません。
参照：encodeURIComponentが世界基準だと誤解してた話 - Qiita
これによる問題はおそらく無いはずですが、念のために

• URLの組み立てに文字列結合とencodeURIComponentを使わず、URLオブジェクトやURLSearchParamsオブジェクトを使う

  例

  const url = new URL("https://api.mymemory.translated.net/get");
  url.searchParams.set("q", text);
  url.searchParams.set("langpair", `${langpair}|${dstLanguage}`);
  url.searchParams.set("de", mainState.atp.session?.email);
  const response = await fetch(url).catch(() => { // Note: fetch関数はURLオブジェクトを直接受け取れるため、url.toString()メソッドで文字列化する必要はありません
  ...

  const url = new URL("https://api.mymemory.translated.net/get");
  // Note: url.searchParamsプロパティは読み取り専用なので、代わりにurl.searchプロパティに代入して上書きします
  url.search = new URLSearchParams({
    q: text,
    langpair: `${langpair}|${dstLanguage}`,
    de: mainState.atp.session?.email,
  }).toString();
  const response = await fetch(url).catch(() => {
  ...

  const url = `https://api.mymemory.translated.net/get?`${new URLSearchParams({
    q: text,
    langpair: `${langpair}|${dstLanguage}`,
    de: mainState.atp.session?.email,
  }).toString()}`;
  const response = await fetch(url).catch(() => {
  ...

• encodeURIComponentの代わりにstrict-uri-encodeのようなRFC3986準拠のエンコード関数を使う

のどちらかが良いかもしれません。

[mimonelu]

@sounisi5011
情報提供ありがとうございます。そこは考慮漏れでした…次回更新時に対応しますmm