当公钥在 PEM 中分发时，如何使用 Web Crypto 验证 ES256 JWT 令牌？答案

【问题标题】：How to verify an ES256 JWT token using Web Crypto when public key is distributed in PEM?当公钥在 PEM 中分发时，如何使用 Web Crypto 验证 ES256 JWT 令牌？
【发布时间】：2019-10-14 20:59:51
【问题描述】：

我需要在 Cloudflare Worker 中验证 ES256 JWT 令牌。据我了解，他们不会在那里运行 Node.js，我必须使用 Web Crypto API（也可以在浏览器中使用，如 window.crypto.subtle）使一切工作。但是，我希望以 PEM 文件的形式接收公钥，但我认为我在导入它们时遇到了问题。

我一直在尝试修改现有的仅支持 HS256 的开源 JWT 实现以支持 ES256。

除了尝试使用实际的令牌和密钥以及在浏览器和 OpenSSL 中生成的密钥之外，我还尝试使用 JWT.io 网站上的一个工作示例（使用 node-jose 将其转换为 JWK 格式后），因为它应该正确验证。但我没有收到任何错误，我在浏览器中运行的代码只是告诉我令牌无效。

这是我用于将密钥从 JWT.io 转换为 JWK 的 Node REPL 会话：

> const jose = require('node-jose')
> const publicKey = `-----BEGIN PUBLIC KEY-----
... MFkwEwYHKoZIzj0CAQYIKoZIzj0DAQcDQgAEEVs/o5+uQbTjL3chynL4wXgUg2R9
... q9UU8I5mEovUf86QZ7kOBIjJwqnzD1omageEHWwHdBO6B+dFabmdT9POxg==
... -----END PUBLIC KEY-----`
> const keyStore = jose.JWK.createKeyStore()
> keyStore.add(publicKey, 'pem')
> keyStore.toJSON()
{
  keys: [
    {
      kty: 'EC',
      kid: '19J8y7Zprt2-QKLjF2I5pVk0OELX6cY2AfaAv1LC_w8',
      crv: 'P-256',
      x: 'EVs_o5-uQbTjL3chynL4wXgUg2R9q9UU8I5mEovUf84',
      y: 'kGe5DgSIycKp8w9aJmoHhB1sB3QTugfnRWm5nU_TzsY'
    }
  ]
}
>

这是失败的验证，基于来自 webcrypto-jwt 包的代码：

function utf8ToUint8Array(str) {
    // Adapted from https://chromium.googlesource.com/chromium/blink/+/master/LayoutTests/crypto/subtle/hmac/sign-verify.html
    var Base64URL = {
        stringify: function (a) {
        var base64string = btoa(String.fromCharCode.apply(0, a));
        return base64string.replace(/=/g, '').replace(/\+/g, '-').replace(/\//g, '_');
        },
        parse: function (s) {
        s = s.replace(/-/g, '+').replace(/_/g, '/').replace(/\s/g, '');
        return new Uint8Array(Array.prototype.map.call(atob(s), function (c) { return c.charCodeAt(0); }));
        }
    };
    str = btoa(unescape(encodeURIComponent(str)));
    return Base64URL.parse(str);
}

var cryptoSubtle = (crypto && crypto.subtle) ||
(crypto && crypto.webkitSubtle) ||
(window.msCrypto && window.msCrypto.Subtle);

// Token from JWT.io
var tokenParts = [
    'eyJhbGciOiJFUzI1NiIsInR5cCI6IkpXVCJ9', 
    'eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWUsImlhdCI6MTUxNjIzOTAyMn0',
    'tyh-VfuzIxCyGYDlkBA7DfyjrqmSHu6pQ2hoZuFqUSLPNY2N0mpHb3nk5K17HWP_3cYHBw7AhHale5wky6-sVA'
];

// Public key from JWT.io converted in Node using node-jose
var publicKey = {
    kty: 'EC',
    kid: '19J8y7Zprt2-QKLjF2I5pVk0OELX6cY2AfaAv1LC_w8',
    crv: 'P-256',
    x: 'EVs_o5-uQbTjL3chynL4wXgUg2R9q9UU8I5mEovUf84',
    y: 'kGe5DgSIycKp8w9aJmoHhB1sB3QTugfnRWm5nU_TzsY'
};

var importAlgorithm = {
    name: 'ECDSA',
    namedCurve: 'P-256',
    hash: 'SHA-256',
};

cryptoSubtle.importKey(
    "jwk",
    publicKey,
    importAlgorithm,
    false,
    ["verify"]
).then(function (key) {
    var partialToken = tokenParts.slice(0,2).join('.');
    var signaturePart = tokenParts[2];

    cryptoSubtle.verify(
        importAlgorithm,
        key,
        utf8ToUint8Array(signaturePart),
        utf8ToUint8Array(partialToken)
    ).then(function (ok) {
        if (ok) {
            console.log("I think it's valid");
        } else {
            console.log("I think it isn't valid");
        }
    }).catch(function (err) {
        console.log("error verifying", err);
    });
}).catch(function(err) {
    console.log("error importing", err);
});

由于我从 JWT.io 复制了一个有效的密钥和一个有效的令牌，我希望代码能够正确记录“我认为它是有效的”。它确实没有显示任何错误，但它最终出现在“我认为它无效”的分支中。

【问题讨论】：

这能回答你的问题吗？ How to verify a signed JWT with SubtleCrypto of the Web Crypto API?

标签： web cryptography jwt

【解决方案1】：

在这里回答How to verify a signed JWT with SubtleCrypto of the Web Crypto API?

所以，如果我理解正确，问题是开源上游中包含的 base64 编码在其中一个方向上无法正常工作，因为它使用浏览器的 btoa。改用 https://github.com/swansontec/rfc4648.js 是可行的。

【讨论】：