How to use SubtleCrypto in chrome (window.crypto.subtle is undefined)

Question

This is really embarassing

on virtually any site on the internet,

window.crypto.subtle

returns

SubtleCrypto {}
  __proto__: SubtleCrypto

in the chrome console (v61 (Official Build) (64-bit))

except for

my webpage, and blank.org

where

window.crypto.subtle

returns

undefined

according to https://developer.mozilla.org/en-US/docs/Web/API/Crypto/subtle it's a read-only property that should always return a SubtleCrypto object.

what could I have done, or what has blank.org done that it could possibly not?

ps: in firefox it seems to work as intended on both my site and blank.org

Hagiolatry

Answer 1

According to the spec (via Github issues) a la this Google page for WebCrypto:

crypto.subtle is supposed to be undefined in insecure contexts

Deliberation

It follows that it can only be used over https, as opposed to http. – Yuyuan

I have noticed that window.crypto.subtle was available when targetting a local HTTP URL, such as localhost:8080 for instance, which is quite useful for local web developments and tests out of the Internet. Maybe local HTTP connections are considered as "secured contexts" as well? Still, window.crypto.subtle is undefined with remote HTTP URLs. (tested with Firefox/Windows, plus Docker in the local dev+test configuration) – Court

window.crypto.subtle will return undefined on HTTP in an environment other than a local environment (e.g. localhost). Hence, if you must run your application on an actual domain name on the internet, you need to set up SSL (HTTPS). See: developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts Also, libraries that depend on window.crypto.subtle (e.g. the node packages for Auth0 and Authgear ) will also misbehave due to the above behavior. – Erivan

Answer 2

check your URL's

if it is https://localhost:PORT or 0.0.0.0:port or 127.0.0.0:port

change it to proper hostname URL something like http://localhost:PORT

worked for me! Thanks @Zmart

Donoghue

Answer 3

It would appear you have to use sites with https://...... and not vanilla http://....

From the spec - easy to miss (and linked by Zmart, above):

Access to the WebCrypto API is restricted to secure origins (which is to say https:// pages).

Orose

localhost and 127.0.0.1 are also considered as secure contexts, see developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts – Ganesha

What is this answer adding to the already existing answers? – Bloodthirsty

Answer 4

If you don't run your website on SSL with https the answer is: You can't use window.crypto.subtle. You have to configure SSL for your webserver. Look in MDN docs about Crypto.subtle it has a big warning on top op the page saying Secure context which means it is only available on https.

BUT there is an alternative solution if you still need a support for http only. And it does not involve using window.crypto.subtle but other open-source third party library instead. Here is how:

You can use Forge which is a crypto library that has same functionality like window.crypto.sybtle It has all crypto algorithms for your needs.

You can use forge instead of window.crypto when you run your services over http.

Be aware that APIs are very different and you need to write different code for cryptography using forge than using window.crypto. You need to read forge docs to make specific cryptography method work for your use case. You CAN NOT use same code that works in window.crypto.subtle when using forge you need to find your own way how to use forge for encryption.

For your reference to see how forge vs window.crypto.subtle codes are different read below.

Links to original window.crypto.subtle based darkwire.io code and translated darkwire.io code that is using forge instead of window.crypto.subtle:

• original code using window.crypto.subtle: here

• code translated to use forge, can run on http without SSL: here

I had translated darkwire.io to use forge for my own project that runs on http and needs encrypted communication method between clients.

Susiesuslik

Answer 5

If you have running your development projects on different domain names (or ports) than localhost, then on Chrome you can add domains to the #unsafely-treat-insecure-origin-as-secure-flag:

Enter the following url in your address bar, enable the feature and add your development domain:

chrome://flags/#unsafely-treat-insecure-origin-as-secure

Only use this for development purposes on internal domain names or IP-addresses.

Tarp