Ошибка типа, "дайджест" неопределенного, в среде разработки

Question

Когда мы строим наш Angular SPA для localhost, он работает отлично.

В нашей среде разработки эта ошибка проникает в консоль DevTool и разбивает все: Ошибка: ошибка (в обещании): Ошибка типа: невозможно прочитать свойство "дайджест" неопределенного

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)

Я предполагаю, что это должно быть что-то в процессе сборки, какие-то другие флаги, но я не могу понять, какие именно.

Answer 1

Вероятно, это связано с тем, что ваш dev-сервер настроен как небезопасный источник.

digest скорее всего относится к window.crypto.subtle.digest веб-крипто API. если вы используете браузер на основе Chromium, то, согласно странице проектов Chromium здесь, subtle свойство может быть использовано только в безопасном месте:

Доступ к API WebCrypto ограничен безопасными источниками (то есть https:// pages).

Примечание. В спецификации crypto.subtle должен быть неопределенным в небезопасных контекстах.

Потому что digest это метод subtle, а также subtle является undefined, вы получаете эту ошибку.

Мы получили ту же ошибку при использовании библиотеки auth0-spa-js. Он работал на localhost, а не на нашем промежуточном http-сайте, но хорошо на нашем производственном https-сайте.

Если вы не находитесь в безопасном месте, попробуйте сделать вашу среду разработки безопасной, а затем снова протестировать (самоподписанный сертификат должен подойти). Напоминаем, что безопасные источники:

Какие источники являются "безопасными"?

К защищенным источникам относятся те, которые соответствуют хотя бы одному из следующих шаблонов (схема, хост, порт):

• (https, *, *)
• (wss, *, *)
• (*, localhost, *)
• (*, 127/8, *)
• (*,:: 1/128, *)
• (файл, *, -)
• (хром-расширение, *, -)

То есть безопасные источники - это источники, которые загружают ресурсы либо с локального компьютера (обязательно доверенного), либо по сети с сервера с криптографической аутентификацией.

Я не уверен, есть ли у команды Auth0 библиотека SPA, которая работает в незащищенном источнике (или планирует включить эту возможность в своей последней библиотеке SPA), но ее собственные библиотеки JS определенно есть.

Answer 2

Angular framework: получение HTTPS путем настройки SSL-сертификата для nginx вашего приложения (nginx.conf или app.conf) решает эту проблему. Назначьте ssl-сертификат и ssl-ключ для своего домена. Обязательно измените свой порт на 443.

Answer 3

Это похоже больше на Angular, чем на Auth0, но из любопытства вы определили digest в твоем компоненте?

Если нет, вы можете сделать это как: digest: {}; на уровне компонентов.

Я надеюсь, что это поможет вам в ваших поисках!