常連

VBAにてHTTPでPOST送信を実施しAPIに繋ぐプログラムを作成していますが、
GETのURL送信とは違ってボディ部分に記載しないといけないと、調べて知りました。

その際にVBA上でボディに記載し、レスポンスを受けとる方法の記事が
調べても見つけれない状況で、詰まっております。
VBAでやること自体が自由度が落ちると思いますが、実装できるようでしたら
ご教授していただけると助かります。

調べながら組んでみたプログラムを載せていますので、
使い方が違うなどもあれば、ご教授いただきたいと思っております。

```ここに言語を入力
Public Function test()

Dim url
　　url = "https://webapi/api"

Dim JsonObject As Object
　Set JsonObject = New Dictionary
　　JsonObject.Add "product", "～～"
　　JsonObject.Add "contract", "～～"

Dim apikey As String
Dim apitoken As String
　　apikey = "～～～"
　　apitoken = "～～～"

Dim objhttp As Object
　　Set objhttp = CreateObject("MSXML2.XMLHTTP")
　With objhttp
  　.Open "POST", url, False
  　.setRequestHeader "Content-Type", "application/x-www-form-urlencoded"
  　.setRequestHeader "Content-Type", "application/json"
  　.setRequestHeader "Content-Type", "charset=UTF-8"
  　.setRequestHeader "Authorization", "Bearer " & apitoken               
  　.setRequestHeader "x-api-key", apikey
  　.send JsonConverter.ConvertToJson(JsonObject)
　　　Debug.Print 
　End With

End Function
```

VBAでAPIのPOST送信を実施したいがVBAでのボディに記載して送信方法がわかりません。

### 実現したいこと
WEBサイト上で GAS への POST を `fetch()` で実行するにあたって、そのPOST値およびレスポンス値を秘匿したいです。

### 前提・状況
Chrome 拡張機能を作っています。

どのWEBサイトでも「保存」ボタンを`append()`し、クリックすると一部テキストを GAS に POST し、GAS は Notion に保存する。という機能です。

各WEBサイト上で `fetch()` して GAS へ POST する流れを想定していますが、その GAS は自分用なのでキーの検証機能を実装しようと考えました。

そこで不安がよぎりました。

### 不安・疑問
WEBサイト運営者は、そのサイト上のPOST値やレスポンス値を把握できるのでしょうか？

例えば `MutationObserver()` が「DOMツリーの変化を監視する」ように、「POST値やレスポンス値を監視する」みたいなことがもしできるのであれば、私が POST するキーは運営者にバレバレになってしまいますよね。

この不安から生じた疑問が、タイトルの通り、POST値およびレスポンス値を、サイト運営者に秘匿する方法です。

（もちろん、そもそもサイト運営者がこれらの値を確認する方法などない。ということでしたら解決です。）

### 該当のソースコード
考えている `fetch()` の流れです。もしサイト運営者がPOST値を監視できるのであれば、この `GAS_KEY` はあまり効果がありませんよね・・。
```JavaScript
const requestData = {
	data1: 'data1',
	data2: 'data2',
};
const GAS_KEY = 'gas_key';
const requestOptions = {
	method: 'POST',
	body: JSON.stringify(requestData),
	headers: {
		'Authorization': GAS_KEY,
		'Content-Type': 'application/x-www-form-urlencoded',
	}
};
const gasEndpointUrl = 'https://script.google.com/macros/s/●●/exec';
fetch(gasEndpointUrl, requestOptions)
	.then(response => response.json())
	.then(data => {
		console.log('data:', data);
	})
	.catch(error => {
		console.error('error:', error);
	});
```

### 検索したこと
「POST　監視　JavaScript」で検索すると[ページが行う通信を監視したい。](https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q14179537334) というご質問がありました。

やっぱりできてしまうのか？！と一瞬焦りましたが、これはサイト運営者が自ら設置した `<form>` についての話題のようで、今回のように運営者でない拡張機能側の値には当てはまらなそうだと思われました。

しかしこの事例だけでは当然判断がつかず、さりとて他に有効な検索ワードも思いつきません。

### 考えたこと
CSRF 対策として使われる仕組みが転用できるかもと考えました。

つまり POST にキーを持たせるだけでなく、GAS 実行の都度異なる値のトークンを発行し、そのトークンを拡張機能側で受け取って都度 POST に含める仕組みです。

この仕組みは、POST値の監視しかできないのであれば有効に思われますが、しかしPOST値の監視だけでなくレスポンス値の監視もできるのであれば、やはり効果がないだろうという結論に至りました。

### 補足情報（FW/ツールのバージョンなど）
バージョンなど特筆すべき補足は特にございませんが、質問内容に不足情報などあればご指摘頂ければ幸いです。

直接的な正解に限らず、有効な検索ワードを貼って頂くだけでもうれしいです。（私がそれで理解できずさらに質問を重ねてしまうやもしれませんが・・）

どうぞ宜しくお願い致します。


WEBサイトに拡張機能が仕込んだPOST値およびレスポンス値を、サイト運営者に秘匿することはできますか？

HTTPのPOSTメソッドでリクエストを投げる際にURLエンコードする必要性はあるのでしょうか。
URLエンコードというのは、もともとヘッダ部のURL部分に2バイト文字や制御文字と紛らわしい文字が入るのを防止するためのものであり、
BODY部には不要ではないかと思いました。

例えばMIME TYPEにapplication/x-www-form-urlencodedが指定されている場合文字列はエンコードして送信されますが、
application/jsonを指定する場合などは、手動でURLエンコーディングするべきでしょうか？

HTTPのPOSTメソッドにおいてリクエストボディをURLエンコードする必要性はあるのでしょうか？

[参考サイト](https://tokkan.net/spring/jsp2.html)
上記のサイトを参考に、検索画面を作るための項目を作成しているのですが、以下のようなエラーが出てしまいました。まだ経験が浅く、色々と調べてみましたが、どのように修正すればいいのかわかりません。

![イメージ説明](ffcfc1d848b53aec6b2641e22ae523b2.png)

POSTがサポートされていないとのことですが、POSTを使うために何か設定が必要なのでしょうか？

エディター上では特にエラーは起きていません。
別画面に渡そうとするとエラーになってしまいます。

###やりたいこと
各項目で入力した内容を別画面(searchConfirm.jsp)で表示させたい。

### TestController.java
```ここに言語を入力
package group.study.dev.sample.test;

import java.util.LinkedHashMap;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.servlet.mvc.support.RedirectAttributes;

@Controller
public class TestController {

	@ModelAttribute("UM")
	public SearchModel init() {
		SearchModel um = new SearchModel();
		um.setTxt("test");
		um.setRdo1("r1");
		um.setRdo2("B");

		return um;
	}

	public void setMap(Model model) {
		LinkedHashMap<String, String> map = new LinkedHashMap<>();
		map.put("A", "その１");
		map.put("B", "その２");
		model.addAttribute("map", map);
	}

	@RequestMapping(value = "/login", method = RequestMethod.GET)
	public String loginGet(Model model) {
		init();
		setMap(model);
		return "login";
	}

	@RequestMapping(value = "/searchConfirm", method = RequestMethod.POST)
	public String loginPost(@ModelAttribute("UM") SearchModel searchModel, Model model,
			RedirectAttributes redirectAttributes) {

		System.out.println(searchModel.toString());

		setMap(model);
		/*
		System.out.println("modelに登録されているオブジェクトを全て表示");
		for (Map.Entry<String, Object> e : model.asMap().entrySet()) {
			System.out.println(e);
		}
		*/
		return "searchConfirm";
	}
}
```

### SearchModel.java
```ここに言語を入力
package group.study.dev.sample.test;

public class SearchModel {

	private String txt;
	private String area;
	private String sel1;
	private String sel2;
	private boolean chk1;
	private String[] chk2;
	private String rdo1;
	private String rdo2;
	private String pass;
	private String hdn;

	public String toString() {
		StringBuilder stb = new StringBuilder();

		stb.append("txt:" + txt + System.lineSeparator());
		stb.append("area:" + area + System.lineSeparator());
		stb.append("sel1:" + sel1 + System.lineSeparator());
		stb.append("sel2:" + sel2 + System.lineSeparator());
		stb.append("chk1:" + chk1 + System.lineSeparator());
		if(chk2 == null) {
			System.out.println("NULLです。");
		}else {
			stb.append("chk2:" + chk2.length + System.lineSeparator());
		}
		//stb.append("chk2:" + chk2.length + System.lineSeparator());
		stb.append("rdo1:" + rdo1 + System.lineSeparator());
		stb.append("rdo2:" + rdo2 + System.lineSeparator());
		stb.append("pass:" + pass + System.lineSeparator());
		stb.append("hdn:" + hdn + System.lineSeparator());

		return stb.toString();
	}

	public String getTxt() {
		return txt;
	}

	public void setTxt(String txt) {
		this.txt = txt;
	}

	public String getArea() {
		return area;
	}

	public void setArea(String area) {
		this.area = area;
	}

	public String getSel1() {
		return sel1;
	}

	public void setSel1(String sel1) {
		this.sel1 = sel1;
	}

	public String getSel2() {
		return sel2;
	}

	public void setSel2(String sel2) {
		this.sel2 = sel2;
	}

	public String[] getChk2() {
		return chk2;
	}

	public void setChk2(String[] chk2) {
		this.chk2 = chk2;
	}

	public String getRdo1() {
		return rdo1;
	}

	public void setRdo1(String rdo1) {
		this.rdo1 = rdo1;
	}

	public String getPass() {
		return pass;
	}

	public void setPass(String pass) {
		this.pass = pass;
	}

	public String getHdn() {
		return hdn;
	}

	public void setHdn(String hdn) {
		this.hdn = hdn;
	}

	public boolean isChk1() {
		return chk1;
	}

	public void setChk1(boolean chk1) {
		this.chk1 = chk1;
	}

	public String getRdo2() {
		return rdo2;
	}

	public void setRdo2(String rdo2) {
		this.rdo2 = rdo2;
	}

}


```
### login.jsp
```ここに言語を入力
<%@page import="group.study.dev.sample.test.SearchModel"%>
<%@page import="group.study.dev.sample.test.TestController"%>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<html>
<head>
<title>ログイン</title>

<script type="text/javascript">
	//テキスト読み込み時に実行
	document.addEventListener("DOMContentLoaded", function() {

		// form:select で複数選択した場合、選択されなかったため手動で選択。
		// ※Modelで配列、リストにすればできた。「form:selectの追記」を参照
		var ary = [];

<%
	SearchModel model = (SearchModel) request.getAttribute("UM");
	if (model != null && model.getSel2() != null) {
		String[] strs = model.getSel2().split(",");
		for (String str : strs) {
			out.println("ary.push('" + str + "');");
		}
	}
%>

		var obj = document.getElementById("sel2");

		for (var i = 0; i < obj.length; i++) {
			if (ary.indexOf(obj.options[i].value) >= 0) {
				obj.options[i].selected = true;
			}
		}
	}, false);
</script>
</head>
<body>
	<spring:url value="/login" var="url" htmlEscape="true" />
	<form:form action="${url}" method="POST" modelAttribute="UM">

		<form:input path="txt" />
		<hr />
		<form:textarea path="area" />
		<hr />
		<form:select path="sel1" items="${map}" />
		<hr />
		<form:select path="sel2" multiple="true">
			<form:option value="op1">オプション</form:option>
			<form:options items="${map}" />
		</form:select>
		<hr />
		<form:checkbox path="chk1" label="チェック" />
		<hr />
		<form:checkboxes path="chk2" items="${map}" />
		<hr />
		<form:radiobutton path="rdo1" label="ラジオ１" value="r1" />
		<form:radiobutton path="rdo1" label="ラジオ２" value="r2" />
		<hr />
		<form:radiobuttons path="rdo2" items="${map}" />
		<hr />
		<form:password path="pass" />
		<hr />
		<form:hidden path="hdn" />
		<BR />
		<input type="submit" value="テスト" />
		<BR />
		<BR />
	</form:form>
</body>
</html>
```
### searchConfirm.jsp
```ここに言語を入力
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>searchConfirm</title>
</head>
<body>
	<h1>検索結果</h1>
	<c:out value="${txt}"/>

</body>
</html>
```

よろしくお願い致します。

Request method 'POST' not supported. リクエストメソッドがサポートされていません。

htmlのstartボタンを押したら今の現在地の緯度と経度をデータベースに保存するようにしたいです。
保存後にそのページと別のページにリダイレクトしたいと考えています。
しかし、うまくいかないので教えてください。

```routes.rb
"hoge/:id" => "hoge#start"
```
```html.slim
input type="button" value="start" onclick="hogehoge(#{@hoge.id})"
```
```hoge.js
function hogehoge(x) {
  if (navigator.geolocation) {
    //現在地取得可能
    navigator.geolocation.getCurrentPosition(
      function(position) {//success
        var data = position.coords;
        var lat = data.latitude;
        var lng = data.longitude;
        $.post({
          url: "/hoge/"+x,
          data: {latitude: lat, longitude: lng},
          dataType: 'json',
          success: function(){
            alert("success")
          },
          error: function(){
            console.log("error")
            console.log(response)
          }
        });
      },
      function() {//error
        var errorInfo = [
        "原因不明のエラーが発生しました…。" ,
        "位置情報の取得が許可されませんでした…。" ,
        "電波状況などで位置情報が取得できませんでした…。" ,
        "位置情報の取得に時間がかかり過ぎてタイムアウトしました…。"
         ];
        var errorNo = error.code;
        var errorMessage = "[エラー番号: " + errorNo + "]\n" + errorInfo[ errorNo ] ;
        alert( errorMessage ) ;
      },
      {
        "enableHighAccuracy": true,
        "timeout":10000
      }
    );
  } else {
    //現在地取得不可能
    alert("お使いの端末は現在地が取得出来ません。")
  }
}
```
```hoge_controller.rb
def start
    @hoge = Hoge.find_by(id: params[:id])
    @hoge.longitude = params[:longitude]
    @hoge.latitude = params[:latitude]
    if @hoge.save
      flash[:notice] = "#{@hoge.longitude}#{@hoge.latitude}"
      redirect_to 'hoge/index'
    end
end
```

Ajaxでpostした後に別のページに遷移したい

実現したいことは以下のサイトのブロードキャストメッセージを送るの部分です。
[Messaging APIリファレンス](https://developers.line.biz/ja/reference/messaging-api/#send-multicast-message)

他サイトを参考に以下のようなコードを作成しました。
```C#
            // To creat HttpClient
            var client = new HttpClient();

            // Accesstoken
            var accessToken = "token";

            // URL
            var url = "https://api.line.me/v2/bot/message/multicast";

            // Message
            var json = "{ \"type\" : text, \"text\" : \"Hello World\"  }";
            // var content = new StringContent("{ \"your\": \"content\", \"maybe\": \"json\" }");
            // content.Headers.Add("X-SOME-RANDOM", "header-value");

            var request = new HttpRequestMessage(HttpMethod.Get, url);
            // Request Header
            request.Headers.Add("ContentType", "application/json");
            request.Headers.Add("Authorization", "Bearer " + accessToken);
            // Request Body
            request.Headers.Add("to", "userId");
            request.Headers.Add("messages", json);
            var response = await client.SendAsync(request);
```

これを実行するとインターナルサーバーエラーになります。
リクエストヘッダーを設定する箇所は以下のサイトを参考にしました。
[HttpClient でリクエストヘッダを設定する](https://qiita.com/c-yan/items/6e506399675e3cc56732)


リクエストヘッダーをそのまま、リクエストボディに適用した形です。
これだとよろしくないのでしょうか。

追記⓵
リクエストヘッダーとボディを分けるところは完成しましたが、どのようにして
ヘッダーにAuthorizationを設定すればよいでしょうか。現在のコードは以下です。

```C#
            var json = @"{""type"":""text"", ""text"":Hello World}";
            var content = new StringContent(json, Encoding.UTF8, @"application/json");

            using (var client = new HttpClient())
            {
                var response = await client.PostAsync($"http://foo.example.com", content);
            }
```

追記⓶
現在のコードは以下です。ボディとヘッダーを同時に設定できました。
```C#
            // To creat HttpClient
            var client = new HttpClient();

            // Accesstoken
            var accessToken = "token";

            // URL
            var url = "https://api.line.me/v2/bot/message/broadcast";

 
            var request = new HttpRequestMessage(HttpMethod.Post, url);
            // Request Header
            request.Headers.Add("Authorization", "Bearer " + accessToken);
            var parameters = new Dictionary<string, string>()
            {
                { "messages", "Hello World" },
            };

            request.Content = new StringContent(
                parameters.ToString(),
                Encoding.UTF8,
                "application/json"
            );

            await client.SendAsync(request);//ここでデバックで停止
```

デバック結果
![イメージ説明](a9298d00b78930b2d35317add26b5d17.png)

値も指定通りになっている気がします。
特にサーバーエラー等は出ていません。

追記⓷
現在、ローカルホストを外部に公開するためにngrokを使用しています。そこでは200Okのレスポンスが返ってきます。
が、fiddlerではエラーになっているようです。
以下がその画面と、現在のコードです。
![イメージ説明](5acf9948e2eb6689d5ef14f13ff76da9.png)

```現在のコード
            // To creat HttpClient
            var client = new HttpClient();

            // Accesstoken
            var accessToken = "token=";

            // URL
            var url = "https://api.line.me/v2/bot/message/broadcast";

            // POST
            var request = new HttpRequestMessage(HttpMethod.Post, url);

            // Request Header
            request.Headers.Add("Authorization", "Bearer " + accessToken);

            var str1 = new Dictionary<string, string>();
            str1.Add("type", "text");
            str1.Add("text", "test test test");

            var str2 = new Dictionary<string, Dictionary<string, string>>();
            str2.Add("messages", str1);

            var json = JsonConvert.SerializeObject(str2);

            request.Content = new StringContent(
                json.ToString(),
                Encoding.UTF8,
                "application/json"
            );

            await client.SendAsync(request);
```

追記④
現在POSTでブロードキャストメッセージを送ると以下のようにFiddlerに表示されます。
```ここに言語を入力
POST https://api.line.me/v2/bot/message/broadcast HTTP/1.1
Authorization: Bearer my token
Content-Type: application/json; charset=utf-8
Host: api.line.me
Content-Length: 52
Expect: 100-continue
Connection: Keep-Alive

{"messages":{"type":"text","text":"test test test"}}
```

レスポンスは400(Bad request)になっています。
見た感じだと、APIリファレンスの要求に沿っている気がするのですが、どこかおかしいい箇所がありますでしょうか。

ちなにみに以下が現在成功している、マルチメッセージのFiddlerの結果です。比べても大きな違いはない気がします。
また、マルチメッセージはテンプレートの既存メソッドを指定しています。

```ここに言語を入力
POST https://api.line.me/v2/bot/message/multicast HTTP/1.1
Authorization: Bearer my token
Content-Type: application/json; charset=utf-8
Host: api.line.me
Content-Length: 143
Expect: 100-continue
Connection: Keep-Alive

{"to":["ID1","ID2"],"messages":[{"type":"text","text":"マルチメッセージ"}]}
```

C#でリクエストヘッダーとボディを一緒に送信する

初歩的な質問で申し訳ございません。

htmlの中にタイムリーフで書かれた<a>タグをPOST送信はできないのでしょうか？

自分で調べて
<form method="post" name="form1" th:action="@{/{user}(user=${a.user}">
    //ここにほしい値を入れる
    <a href="javascript:form1.submit()">リンク名</a>
</form>

このような実装をしたのですが、URLにパラメータが記載されてしまいます。

<a>タグでパラメータを渡し、URLに乗せない方法があればご教授いただきたいです。
よろしくお願いいたします。