TypeError: cannot read properties of undefined (reading 'digest') in development environment

[cedbesafilm]

Describe the bug If the environment (in my case the stage environment) is not setup as a a secure origin the library break up cause of the crypto library is not in window object

To Reproduce Steps to reproduce the behavior:

1. A server work on http that is setup as 'insecure origin'
2. Start the login sequence

Expected behavior Warning on library loading that check secure origin or a warning in documentation

Screenshots

Desktop (please complete the following information):

• OS: Windows 10
• Browser Chrome
• Version 96.0.4664.45

Additional context https://chromium.googlesource.com/chromium/src/+/refs/heads/main/docs/security/faq.md#Which-origins-are-secure

https://www.chromium.org/blink/webcrypto

Maybe related to https://github.com/damienbod/angular-auth-oidc-client/pull/1220

[FabianGosebrink]

Yes, this is related imho. @damienbod @linjie997 any ideas?

[damienbod]

Why not develop using https? This is simple to setup and then the development is more like the target system. I have not developed using http in a long time in any project of any type.

This is the browser tools that you use and not the library. This is forced for a reason by Chrome.

Greetings Damien

[linjie997]

Hello, Yes I can confirm the error is cased by the unsafe environment since webcrypto is not available. If you use Chrome, you can locally enable a flag to treat your origin as safe at chrome://flags/#unsafely-treat-insecure-origin-as-secure and it should work

[cedbesafilm]

Why not develop using https? This is simple to setup and then the development is more like the target system. I have not developed using http in a long time in any project of any type.

This is the browser tools that you use and not the library. This is forced for a reason by Chrome.

Greetings Damien

the development environment that I found in the company had a hostname resolved through internal dns, after the error in the console I had the ssl certificates installed that we already had anyway and the services ported to https

My idea was for someone inexperienced (since the error itself does not give much information) to display a warning in the console or to write it in the documentation

[FabianGosebrink]

What would be the best to write in the docs? Any suggestions? Then I can add it.

[cedbesafilm]

I would write that the Angular application should be deployed in a 'secure origin', at least for Chrome In Chrome secure origin are the ones that match the following (scheme, host, port) patterns:

(https, *, *) - HTTPS (wss, *, ) - Web Socket Secure (, localhost, ) - localhost (, 127/8, ) - IPv4 loopback (, :: 1/128, *) - IPv6 loopback (file, *, -) - I don't think this is the case with an angular application (chrome-extension, *, -) - I don't think this is the case with an angular application

While for local development there is no problem

[phillipzada]

@damienbod - this change (#1220) forced us to downgrade to version 12. To address this breaking change for Cordova/Ionic/Capacitor apps (#1220), may I suggest that we either make the JwtWindowCryptoService configurable (via config) and allow the definition of a version that uses jsrsasign? - and potential ship two versions (of JwtWindowCryptoService , e.g. JwtWindowCryptoService and JsrsJwtWindowCryptoService ) in the lib so it's an easy switch?

[FabianGosebrink]

I have run the V15 of this app successfully with capacitor, do you still have any problems there?

[lilletech]

Hi, i develop a pwa application. So i test app on mobile phone. I'm facing to this issue. Any idea to resolve it ? i didn't have this issue using another lib (angular-keycloak).

I was switching from angular-keycloak to angular-auth-oidc-client to be 'more generic'. I wouldn't change again. I prefer work with this lib.

I would like to access directly from my local network 192.168.x.x. For the moment, i use chrome:inspect with port forwarding (4200:localhost:4200) to have a successful login on the mobile phone.

Thx in advance for any tips.

[FabianGosebrink]

Is your PWA using HTTPS?

[lilletech]

Yes for the production but not in development

Le mer. 8 févr. 2023 à 06:42, Fabian Gosebrink @.***> a écrit :

Is your PWa using HTTPS?

— Reply to this email directly, view it on GitHub https://github.com/damienbod/angular-auth-oidc-client/issues/1320#issuecomment-1422047267, or unsubscribe https://github.com/notifications/unsubscribe-auth/AB2TLJL5CPYMRHFKXYARRADWWMW45ANCNFSM5JRGAGLA . You are receiving this because you commented.Message ID: @.***>

-- Jimmy Pannier 00337 71 255 930 www.lilletech.fr Analyste-développeur / Freelance en services numériques

[Lexa-tech]

@damienbod - this change (#1220) forced us to downgrade to version 12. To address this breaking change for Cordova/Ionic/Capacitor apps (#1220), may I suggest that we either make the JwtWindowCryptoService configurable (via config) and allow the definition of a version that uses jsrsasign? - and potential ship two versions (of JwtWindowCryptoService , e.g. JwtWindowCryptoService and JsrsJwtWindowCryptoService ) in the lib so it's an easy switch?

We also have a webpp, served from a Gateway, accessible in local mode from HTTP, and the library is not working. I tried to polyfill crypto.subtle but it's not that simple and the hack will be there for a long time. @FabianGosebrink The only option is to downgrade in v13 ?

[linjie997]

For this issue would you mind trying to change this flag on Chrome/Chromium based browsers? chrome://flags/#unsafely-treat-insecure-origin-as-secure You can add some unsafe origins to be treated as secure

[Lexa-tech]

For this issue would you mind trying to change this flag on Chrome/Chromium based browsers? chrome://flags/#unsafely-treat-insecure-origin-as-secure You can add some unsafe origins to be treated as secure

Hello @linjie997 , I'm sure it will work, but we can't ask our customers to activate this kind of flags in their browsers, and we cant control which browser they use.

[linjie997]

Hello, sorry I didn't understood it was local app available to customers. If the polyfill is not suitable for your application, I really suggest serving the application with a self-signed SSL certificate, I cannot see more workarounds.

[Lexa-tech]

Hello, sorry I didn't understood it was local app available to customers. If the polyfill is not suitable for your application, I really suggest serving the application with a self-signed SSL certificate, I cannot see more workarounds.

Thanks for your answer @linjie997 , self signed certificates are unfortunately not an option, so I guess the better option (for now) is to use v13.0.0.

[Lexa-tech]

Hi @phillipzada , did you try the webcrypto-liner library as a polyfill when using HTTP as mentioned here ? https://github.com/damienbod/angular-auth-oidc-client/pull/1220#issuecomment-908551547

[mariusbolik]

Having the same problem on a Ionic Capacitor App on Android:

Error: Uncaught (in promise): TypeError: Cannot read properties of undefined (reading 'digest')
TypeError: Cannot read properties of undefined (reading 'digest')
    at JwtWindowCryptoService.calcHash (angular-auth-oidc-client.mjs:926:58)
    at JwtWindowCryptoService.generateCodeChallenge (angular-auth-oidc-client.mjs:915:21)
    at UrlService.getCodeChallenge (angular-auth-oidc-client.mjs:1295:44)
    at UrlService.createUrlCodeFlowAuthorize (angular-auth-oidc-client.mjs:1279:21)
    at UrlService.getAuthorizeUrl (angular-auth-oidc-client.mjs:1007:25)
    at angular-auth-oidc-client.mjs:5232:57
    at doInnerSub (mergeInternals.js:19:19)
    at outerNext (mergeInternals.js:14:57)
    at OperatorSubscriber._next (OperatorSubscriber.js:13:21)
    at OperatorSubscriber.next (Subscriber.js:31:18)
    at resolvePromise (zone.js:1265:35)
    at zone.js:1172:21
    at zone.js:1188:37
    at rejected (tslib.es6.js:74:89)
    at _ZoneDelegate.invoke (zone.js:412:30)
    at Object.onInvoke (core.mjs:24260:33)
    at _ZoneDelegate.invoke (zone.js:411:56)
    at Zone.run (zone.js:169:47)
    at zone.js:1329:38
    at _ZoneDelegate.invokeTask (zone.js:446:35)