TypeError, 'digest' of undefined, in development environment

问题

When we're building our Angular SPA for localhost it works perfectly.

On our dev environment, this error creeps into the DevTool console and breaks everything: ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'digest' of undefined

TypeError: Cannot read property 'digest' of undefined
    at N (auth0-spa-js.production.js:1)
    at ie.<anonymous> (auth0-spa-js.production.js:1)
    at Generator.next (<anonymous>)
    at auth0-spa-js.production.js:1
    at new ZoneAwarePromise (zone-evergreen.js:876)
    at t (auth0-spa-js.production.js:1)
    at ie.loginWithRedirect (auth0-spa-js.production.js:1)
    at AuthGuard.<anonymous> (auth.guard.ts:22)
    at Generator.next (<anonymous>)
    at fulfilled (environment.ts:11)
    at resolvePromise (zone-evergreen.js:797)
    at new ZoneAwarePromise (zone-evergreen.js:879)
    at t (auth0-spa-js.production.js:1)
    at ie.loginWithRedirect (auth0-spa-js.production.js:1)
    at AuthGuard.<anonymous> (auth.guard.ts:22)
    at Generator.next (<anonymous>)
    at fulfilled (environment.ts:11)
    at ZoneDelegate.invoke (zone-evergreen.js:359)
    at Object.onInvoke (core.js:34195)
    at ZoneDelegate.invoke (zone-evergreen.js:358)

I guess it must be something about the build process, some different flags, but I can't figure out exactly which.

回答1:

It's probably because your dev server is setup as an insecure origin.

The digest likely refers to window.crypto.subtle.digest of the Web Crypto API. if you are using a Chromium-based browser, according to the the Chromium Projects page here, the subtle property can only be used in a secure origin:

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

Note: In the spec, crypto.subtle is supposed to be undefined in insecure contexts

Because digest is a method of subtle, and subtle is undefined, you are getting this error.

We got the same error when using the auth0-spa-js library. It worked on localhost, not on our http staging site, but OK on our production https site.

If you aren't in a secure origin, try making your dev environment secure and then testing again (a self-signed certificate should do). As a reminder, secure origins are:

Which origins are "secure"?

Secure origins are those that match at least one of the following (scheme, host, port) patterns:

(https, *, *)

(wss, *, *)

(*, localhost, *)

(*, 127/8, *)

(*, ::1/128, *)

(file, *, —)

(chrome-extension, *, —)

That is, secure origins are those that load resources either from the local machine (necessarily trusted) or over the network from a cryptographically-authenticated server.

I'm not sure if the Auth0 team have an SPA library that works in a non-secure origin (or plans to enable that capability in their latest SPA library), but their native JS libraries definitely do.

回答2:

This seems more related to Angular than Auth0 but out of curiosity have you defined digest in your component?

If not, you can do that as: digest: {}; at the component level.

I hope this helps you on your quest!

来源：https://stackoverflow.com/questions/57146558/typeerror-digest-of-undefined-in-development-environment

标签

auth0