How to use jose in a plain html page?

[d95776]

tried to run the following code:
<script type="module" src="https://cdnjs.cloudflare.com/ajax/libs/jose/5.9.6/index.bundle.min.js" integrity="sha512-lDE2QvY4fdlx+e8lCufg+NOzAeA3jo50Vxve53zF+ufoEUqSl6+0ArE83RlojUtc/gstniEfv3l3BsjvNGvDQg==" crossorigin="anonymous" referrerpolicy="no-referrer">

    import * as jose from "jose"; 
  
    // Your code using the jose library functions here
    const generateKey = async () => {
        const { publicKey, privateKey } = await jose.generateKeyPair('PS256')
        console.log(publicKey)
        console.log(privateKey)
    }
  
</script>

but get error as
Uncaught TypeError: Failed to resolve module specifier "jose". Relative references must start with either "/", "./", or "../".

looks like the import statement does not work (the browser can't figure out how to access jose even I use module type in script tag. May I ask if there's anything wrong in above code or if there's a jose distribution which can be used directly in plain html page.

regards
hao

[panva]

There is a UMD bundle available at https://cdnjs.com/libraries/jose

Use that as your script src and then just drop the import *

[d95776]

thanks, tried and found that link https://cdnjs.cloudflare.com/ajax/libs/jose/5.9.6/index.bundle.min.js works without integrity checking and link https://cdnjs.cloudflare.com/ajax/libs/jose/5.9.6/index.umd.min.js seems does not export jose object and does not work.

[d95776]

The following code does not work:
<script type="module" src="https://cdnjs.cloudflare.com/ajax/libs/jose/5.9.6/index.umd.min.js" >
// import * ;

  const generateKey = async () => {
      const { publicKey, privateKey } = await jose.generateKeyPair('PS256', {extractable: true})
      console.log(publicKey)
      console.log(privateKey)
      let jwk = await jose.exportJWK(privateKey);
      console.log(await jose.exportJWK(privateKey))
      console.log(await jose.exportPKCS8(privateKey))
      alert(JSON.stringify(jwk))
      alert(await jose.exportPKCS8(privateKey))
  }

</script>

[panva]

Drop the "type" in your script, it's not umd is not esm.

[d95776]

That works! great! thank you a lot.