Firefox запрашивает сохранение пароля даже после удаления компонента входа со страницы

Question

Если у нас есть компонент с полями логина и пароля, созданный в приложении, то после перехода к другому компоненту через маршрутизатор Firefox запрашивает сохранение пароля. Ответ "Нет" не помогает, потому что уведомление появляется снова и снова, когда мы перемещаемся между страницами.

Но если мы не создали компонент с полями логина и пароля (не открывали URL с этим компонентом), то навигация не вызывает уведомлений.

Похоже, форма с логином и паролем появляется в DOM и исчезает одновременно, поэтому Firefox считает, что мы успешно вошли в систему.

Но это не имеет смысла, потому что после того, как мы оставили страницу с входными данными, компонент уничтожается.

В Chrome таких проблем нет, поэтому неясно, является ли это ошибка Angular или просто ошибка Firefox.

Ожидаемое поведение заключается в том, что Firefox должен запрашивать сохранение пароля только один раз, но не каждую навигацию между страницами.

Плункер с демонстрацией http://embed.plnkr.co/SUcx1ZJMFVXMeI4aJZ41/

1. Перейдите на страницу 1
2. После этого перейдите к паролю
3. И после этого перейдите на страницу 1 снова. Уведомление появится.
4. Ответьте "Нет" и перейдите на страницу 2. Уведомление появится снова.

После этого попробуйте тот же пример, но без создания формы с логином и паролем.

1. Перезагрузить плункер (может потребоваться перезагрузка всей страницы)
2. Перейдите на страницу 1
3. Перейдите на страницу 2
4. Уведомление не появится, пока мы не перейдем на страницу пароля.

Кто-нибудь сталкивался с таким поведением и знает, как его решить? Уведомление очень раздражает.

UPD 18.04.2018: Ранее мы заметили, что проблема появилась только в JIT-компиляции. Для производства и сборки AOT все работало нормально - подсказка с предложением сохранения пароля не отображалась. Так что где-то была проблема, но она раздражала только разработчиков.

Несколько дней назад мы обновили Angular до версии 5.2.10, NodeJS - до версии 8.11.1 (раньше мы использовали 7.10). После этого проблема появляется и в производственном режиме.

Тем не менее, нет никакого решения или ясности в чем причина.

Answer 1

Я не знаю, будет ли это полезно. Я заметил эту проблему при использовании Vue.js, когда мой элемент пароля не был заключен в <form> элемент. Чтобы исправить это, я окружаю свои поля логина <form> элемент, на котором я установил preventDefault директива для submit событие. В Vue.js это выглядит так:

<form v-on:submit.prevent>
Username: <input v-model="username" />
Password: <input type="password" v-model="password" />
</form>

Я должен упомянуть, что вас по-прежнему просят сохранить пароль при отправке формы, но последующие переходы больше не вызывают запрос.

Answer 2

Я только что столкнулся с той же проблемой в React.

Причина в том, что моя форма входа не была <form> но простой <div>, Я установил это обратно <form> и Firefox перестал запрашивать сохранение учетных данных при каждом асинхронном вызове.

Я не знаю точной причины, хотя Chrome всегда был в порядке с этим

Answer 3

Да, эта работа. Обтекание поля в form тег очень хорошая и простая идея. Я не пробовал это раньше.

И кажется очень правдоподобным, что Firefox делает таким образом. Фактически входные данные всегда должны быть внутри формы, потому что в обычных приложениях невозможно отправлять данные без формы. Также размещение входов внутри form решена проблема с автоматической проверкой автозаполненной формы в Chrome. Поэтому следование стандартам - лучший способ избежать неожиданных ошибок.