[範例] Web Crypto API 透過公鑰驗證 PKCS1 簽章值 | 自然人憑證開發筆記

前文範例有說明過使用 node-forge 進行驗簽 PKCS1，也可以透過瀏覽器、Node.js 原生的 Web Crypto API 來驗簽。不過 Web Crypto 無法從憑證匯出公鑰，因此無法從憑證驗簽。

Demo#

前端程式碼#

1
<h1>自然人憑證 公鑰驗簽PKCS1 (後端用 Web Crypto)</h1>
2
<input type="button" value="讀取簽章公鑰" onclick="getCert()" />
3
<form action="https://cert.modatw.workers.dev/api/verifyPkcs1WithKeyUseWebCrypto" method="post">
4
  tbs: <input type="text" name="tbs" /><br>
5
  hashAlgorithm: <select name="hashAlgorithm">
6
    <option value="SHA-1">SHA1</option>
7
    <option value="SHA-256" selected>SHA256</option>
8
    <option value="SHA-384">SHA384</option>
9
    <option value="SHA-512">SHA512</option>
10
  </select><br>
11
  signature (簽章值)<br>
12
  <textarea name="signature" rows="8" cols="65"></textarea><br>
13
  keyb64 (公鑰)<br>
14
  <textarea name="keyb64" rows="8" cols="65"></textarea><br>
15
  <input type="submit">
16
</form>
17
<script>
18
  let popupForm;
19
  let timeout;
20

21
  function getCert() {
22
    popupForm = window.open(
23
      "http://localhost:61161/popupForm",
24
      "popupForm",
25
      "height=200, width=200, left=100, top=20"
26
    );
27
    timeout = setTimeout(() => {
28
      popupForm.close();
29
      alert("尚未安裝元件");
30
    }, 5000);
31
  }
32

33
  function receiveMessage(event) {
34
    if (event.origin !== "http://localhost:61161") return;
35

36
    let ret = JSON.parse(event.data);
37
    if (ret.func === "getTbs") {
38
      clearTimeout(timeout);
39
      const tbsData = { func: "GetUserCert" };
40
      popupForm.postMessage(JSON.stringify(tbsData), "*");
41
    } else {
42
      const data = JSON.parse(event.data);
43
     const cert = data.slots[0].token.keys[0].keyb64;
44
      document.getElementsByName("keyb64")[0].value = cert;
45
    }
46
  }
47

48
  window.addEventListener("message", receiveMessage, false);
49
</script>

後端程式碼#

以 Cloudflare Workers 實作，本段程式碼也可以在前端實作。

1
export default {
2
  async fetch(request, env, ctx) {
3
    try {
4
      const { pathname } = new URL(request.url);
5
      if (pathname == "/api/verifyPkcs1WithKeyUseWebCrypto" && request.method == "POST") {
6
        return await verifyPkcs1WithKeyUseWebCrypto(request);
7
      }
8
      return new Response("");
9
    } catch (e) {
10
      return new Response(e);
11
    }
12
  },
13
};
14

15
async function verifyPkcs1WithKeyUseWebCrypto(request) {
16
  const formData = await request.formData();
17
  const tbs = formData.get("tbs");
18
  const hashAlgorithm = formData.get("hashAlgorithm");
19
  const signature = formData.get("signature")
20
  let keyb64 = formData.get("keyb64");
21

22
  // 自然人憑證讀取的公鑰少了此前綴，會導致讀取失敗
23
  if (!keyb64.startsWith("MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8A")) {
24
    keyb64 = "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8A" + keyb64;
25
  }
26

27
  const publicKeyBuffer = Uint8Array.from(atob(keyb64), c => c.charCodeAt(0));
28
  const signatureBuffer = Uint8Array.from(atob(signature), c => c.charCodeAt(0));
29
  const tbsDataBuffer = new TextEncoder().encode(tbs);
30

31
  const publicKey = await crypto.subtle.importKey(
32
    "spki",
33
    publicKeyBuffer,
34
    { name: 'RSASSA-PKCS1-v1_5', hash: { name: hashAlgorithm } },
35
    false,
36
    ['verify']
37
  );
38

39
  const verified = await crypto.subtle.verify(
40
    { name: 'RSASSA-PKCS1-v1_5' },
41
    publicKey,
42
    signatureBuffer,
43
    tbsDataBuffer
44
  );
45

46
  if (verified) {
47
    return new Response("PKCS1 驗簽成功");
48
  } else {
49
    return new Response("PKCS1 驗簽失敗");
50
  }
51
}