ECSDA sign with Python, verify with JS

Question

I'm trying to achieve the exact opposite of this here where I need to sign a payload in Python using ECDSA and be able to verify the signature in JS.

Here is my attempt, but I'm pretty sure I'm missing something with data transformation on either or both ends.

(Key types are the same as in the answer provided to the question above)

I've tried some other variations but nothing worked so far.

(The verification on JS returns False)

Python:

import os
from cryptography.hazmat.backends import default_backend
from cryptography.hazmat.primitives.asymmetric import ec
from cryptography.hazmat.primitives.asymmetric.utils import (
    encode_dss_signature,
    decode_dss_signature
)
from cryptography.hazmat.primitives.serialization import load_der_public_key, load_pem_private_key, load_der_private_key

from cryptography.hazmat.primitives import hashes, serialization
from cryptography.hazmat.primitives import hashes
from cryptography.exceptions import InvalidSignature
import base64
import json
from hashlib import sha256



def order_dict(dictionary):
    return {k: order_dict(v) if isinstance(v, dict) else v
            for k, v in sorted(dictionary.items())}


async def sign_payload(private_key, data):
    """
    Generate a signature based on the data using the local private key.
    """
    data = order_dict(data)

    # Separators prevent adding whitespaces around commas and :
    payload = json.dumps(data, separators=(',', ':')).encode('utf-8')

    # payload = base64.b64decode(json.dumps(data, separators=(',', ':')))

    sig = private_key.sign(
        payload,
        ec.ECDSA(hashes.SHA256())
    )

    return sig

JS:

export function b642ab(base64_string){
  return Uint8Array.from(window.atob(base64_string), c => c.charCodeAt(0));
}


export async function verifySignature(signature, public_key, data_in) {
  // Sorting alphabetically to avoid signature mismatch with BE
  const sorted_data_in = sortObjKeysAlphabetically(data_in);

  var dataStr = JSON.stringify(sorted_data_in)
  console.log(dataStr)

  var dataBuf = new TextEncoder().encode(dataStr)

  return window.crypto.subtle.verify(
    {
      name: "ECDSA",
      namedCurve: "P-256",
      hash: { name: "SHA-256" },
    },
    public_key,
    b642ab(utf8.decode(signature)),
    dataBuf
  );
}

await sign_payload(private_dsa_key, generated_payload)

Answer 1

The main problem is that both codes use different signature formats:
sign_payload() in the Python code generates an ECDSA signature in ASN.1/DER format. The WebCrypto API on the other hand can only handle the IEEE P1363 format.
Since the Python Cryptography library is much more convenient than the low level WebCrypto API it makes sense to do the conversion in Python code.

The following Python code is based on your code, but additionally performs the transformation into the IEEE P1363 format at the end:

from cryptography.hazmat.backends import default_backend
from cryptography.hazmat.primitives.asymmetric import ec
from cryptography.hazmat.primitives.asymmetric.utils import decode_dss_signature
from cryptography.hazmat.primitives.serialization import load_pem_private_key
from cryptography.hazmat.primitives import hashes
import base64
import json

#def order_dict(dictionary):
#    return {k: order_dict(v) if isinstance(v, dict) else v
#            for k, v in sorted(dictionary.items())}

def sign_payload(private_key, data):
    """
    Generate a signature based on the data using the local private key.
    """    
    
    #order_dict(data) # not considered!

    # Separators prevent adding whitespaces around commas and :
    payload = json.dumps(data, separators=(',', ':')).encode('utf-8')
    print(payload.decode('utf-8'))

    sig = private_key.sign(
        payload,
        ec.ECDSA(hashes.SHA256())
    )

    return sig

privateKeyPem = b'''-----BEGIN PRIVATE KEY-----
MIGHAgEAMBMGByqGSM49AgEGCCqGSM49AwEHBG0wawIBAQQgrW9XiIs4/Kb0q8kl
TmF3oIwSn4NO3xAjs08F0lJ/5UOhRANCAAQykdP4c0ozvOOHHSNkMfLNCWRstXTG
TQf9MWjqB9PbeKyHnxuU82FisUjnVD9zO+QDAK0tnP/qzWf8zxoD0vVW
-----END PRIVATE KEY-----'''

privateKey = load_pem_private_key(privateKeyPem, password=None, backend=default_backend())
data = {"key1": "value1", "key2": "value2"}
signatureDER = sign_payload(privateKey, data)

# Convert signature format
(r, s) = decode_dss_signature(signatureDER)
signatureP1363 = r.to_bytes(32, byteorder='big') + s.to_bytes(32, byteorder='big')
print(base64.b64encode(signatureP1363).decode('utf-8'))

A possible output is:

{"key1":"value1","key2":"value2"}
KIkBK4pxSFq/UdsPb/mYCC3y7iAJlULC/jizNp9DrvFFIvZaUjx/M0SAQC7CeBIlLmKzfkGx1fOr7OJ8VlwAdg==

Note that for this test, the order_dict(data) call is commented out, since the JavaScript counterpart was not posted.

---

In the JavaScript code, remove the utf8.decode() when Base64 decoding the signature. Apart from that the code is OK. The following JavaScript code is based on your code, with the addition of the key import:

(async () => {

     var x509pem = `-----BEGIN PUBLIC KEY-----
MFkwEwYHKoZIzj0CAQYIKoZIzj0DAQcDQgAEMpHT+HNKM7zjhx0jZDHyzQlkbLV0
xk0H/TFo6gfT23ish58blPNhYrFI51Q/czvkAwCtLZz/6s1n/M8aA9L1Vg==
-----END PUBLIC KEY-----`
     var public_key = await importPublicKey(x509pem)
     var data_in = {
         key1: "value1",
         key2: "value2"
     }
     var signature = "KIkBK4pxSFq/UdsPb/mYCC3y7iAJlULC/jizNp9DrvFFIvZaUjx/M0SAQC7CeBIlLmKzfkGx1fOr7OJ8VlwAdg=="
     var verified = await verifySignature(signature, public_key, data_in)
     console.log(verified);
  
})();

function b642ab(base64_string){
     return Uint8Array.from(window.atob(base64_string), c => c.charCodeAt(0));
}

async function verifySignature(signature, public_key, data_in) {
    // Sorting alphabetically to avoid signature mismatch with BE
  
    //const sorted_data_in = sortObjKeysAlphabetically(data_in);
    //var dataStr = JSON.stringify(sorted_data_in)
    var dataStr = JSON.stringify(data_in)
    console.log(dataStr)

    var dataBuf = new TextEncoder().encode(dataStr)
  
    return window.crypto.subtle.verify(
        {
            name: "ECDSA",
            namedCurve: "P-256",
            hash: { name: "SHA-256" },
        },
        public_key,
        b642ab(signature),
        dataBuf
    );
}

async function importPublicKey(spkiPem) {   
    return await window.crypto.subtle.importKey(
        "spki",
        getSpkiDer(spkiPem),
        {name: "ECDSA", namedCurve: "P-256"},
        false,
        ["verify"]
    );
}

function getSpkiDer(spkiPem){
    const pemHeader = "-----BEGIN PUBLIC KEY-----";
    const pemFooter = "-----END PUBLIC KEY-----";
    var pemContents = spkiPem.substring(pemHeader.length, spkiPem.length - pemFooter.length);
    var binaryDerString = window.atob(pemContents);
    return str2ab(binaryDerString); 
}

function str2ab(str) {
    const buf = new ArrayBuffer(str.length);
    const bufView = new Uint8Array(buf);
    for (let i = 0, strLen = str.length; i < strLen; i++) {
        bufView[i] = str.charCodeAt(i);
    }
    return buf;
}

The message can be successfully verified with the JavaScript code using the signature generated by the Python code.

Note that - analogous to the Python code - sortObjKeysAlphabetically() has been commented out because of the missing implementation.