JavaScript Password Field

Passwort Feld auf Basis eines Input Feldes des Typ Text realisieren

Passwort Eingabe ohne Input Type Password

Passwort Eingabe
ohne Input Type Password

Das Thema unsichere Passwortfelder ist zur Zeit in vielen Foren ein großes Thema, sicherlich war es immer schon ein brisantes Thema, aber erst seitdem vermehrt darauf hingewiesen wird und in aktuelleren Versionen des Firefox es sogar angezeigt wird, scheint einigen Leuten klar zu werden das ihre Login-Daten nicht sicher übertragen werden.

Die Kontrolle des Firefox basiert allerdings lediglich auf der Tatsache das ein Formular mit Passwortfeld vorhanden ist, also ein Eingabefeld vom Typ Password, was ist aber nun wenn man zu Eingabe des Passwortes ein Eingabefeld vom Typ Text nimmt und es über Javascript so anpasst das es wie ein normales Passwortfeld funktioniert. Es fällt dem Browser als auch dem Benutzer nicht auf!

Mit der folgenden Variante kann man den Leuten die Verunsicherung nehmen, jedoch nicht zur Sicherheit beitragen! Login-Daten sollten immer verschlüsselt übertragen werden!
Oder wie ich in einem weiteren Artikel beschreiben werde, nicht übertragen werden und trotzdem überprüft!

HTML

password.htm HTML (363 bytes) 27.10.2021 23:11
<!DOCTYPE html >
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>JavaScript Password Field</title>
  </head>
  <body>
    <form><input type="hidden" id="password" /><input type="text" class="password" placeholder="password" /></form>
    <script src="jsPassword.js"></script>
  </body>
</html>

JavaScript

jsPassword.js JavaScript (1,04 kByte) 27.10.2021 23:09
// coding: utf-8
/** Created by: Udo Schmal | https://www.gocher.me/ */
(function () {
  'use strict';
function Password(password) {
  var el = password;
  var psw = document.querySelector('input#password');
  var data = psw.value;
  el.value = '';
  for (var i=0; i<data.length; i++) {
    el.value += '\u25CF';
  }
  password.addEventListener('keypress', function (ev) {
    var data = psw.value || '';
    ev || (ev = window.event);
    var code = ev.keyCode ? ev.keyCode : (ev.charCode ? ev.charCode : ev.which);
    if(!/^(9|1[3678]|224|3[789]|40)$/.test(code.toString())) {
      if (code==8) {
        data = data.substring(0, data.length-1);
      } else {
        data += String.fromCharCode(code);
      }
      psw.value = data;
      el.value = '';
      for (var i=0; i<data.length; i++) {
        el.value += '\u25CF';
      }
      ev.preventDefault();
      return false;
    } else {
      return true;
    }
  });
}
var el = document.querySelector('input.password');
if (el) {
  new Password(el);
}
})();

Author: , published: , last modified:

Kontakt

Udo Schmal

Udo Schmal
Softwareentwickler
Olvengraben 41
47608 Geldern
Nordrhein-Westfalen
Germany




+49 4621 9785538
+49 1575 0663676
+49 4621 9785539
SMS
WhatsApp

Google Maps Profile
Instagram Profile
vCard 3.0

Service Infos

CMS Info

Product Name:
UDOs Webserver
Version:
0.5.0.167
Description:
All in one Webserver
Copyright:
Udo Schmal
Compilation:
Sat, 25. Jun 2022 14:46:24

Development Info

Compiler:
Free Pascal FPC 3.3.1
compiled for:
OS:Linux, CPU:x86_64

System Info

OS:
Ubuntu 20.04.5 LTS (Focal Fossa)

Hardware Info

Model:
Hewlett-Packard HP Pavilion dm4 Notebook PC
CPU Name:
Intel(R) Core(TM) i5-2430M CPU @ 2.40GHz
CPU Type:
x86_64, 1 physical CPU(s), 2 Core(s), 4 logical CPU(s), 800.000 MHz