「&」という文字列を入れたらslack webhookで400がめっちゃ帰ってきた件

slack webhookで400が出た

webである変更のイベントを起点に、slackにwebhookを投げて変更内容を通知しようとした。

そしたら、400が返ってきて変更内容がslackに送れなかった。

原因

調査してくと「&」という文字列が入っていることが原因ということに気づいた。
最初はエスケープしていないことが原因かと思って以下を参考に & にしてエスケープを入れた。
けど治らなかった。

https://api.slack.com/reference/surfaces/formatting#escaping

真の原因

webhook送るところで、送り方を "application/x-www-form-urlencoded;charset=UTF-8" としてしまっていた。そのため、以下のように&を含むテキストデータを送ろうとすると、ペイロードが別れてしまってエラーになる。
xml.send('payload=' + JSON.stringify(data))

なので基本的には以下の記事で紹介している方法はやっちゃダメ
https://qiita.com/lmatsul/items/817468a33fa4900d92c1

以下の形式で送るべし。

const endpoint = "https://hooks.slack.com/services/xxxxx";
const data = { 
  "text": "Hello kip&kip "
};

const formData = new FormData();
formData.append("payload", JSON.stringify(data));
fetch(endpoint, {
  method: "POST",
  body: formData
});