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!

password.htm HTML (441 bytes) 31.01.2016 12:25
<!DOCTYPE html >
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>JavaScript Password Field</title>
  </head>
  <body>
    <form id="demo-form" action=""><input type="text" placeholder="username" /><br /><input type="hidden" id="password" value="" /><input type="text" class="password" placeholder="password" /></form>
    <script type="text/javascript" src="jsPassword.js"></script>
  </body>
</html>
jsPassword.js JavaScript (2,05 kByte) 18.01.2021 23:48
// coding: utf-8
/** Created by: Udo Schmal | https://www.gocher.me/ */
(function () {
  'use strict';
function jsPassword(){
  this.obj = null;
  this.psw = null;
}
jsPassword.prototype = {
  handle: function (ev) {
    var data = this.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);
      };
      this.psw.value = data;
      this.obj.value = '';
      for (var i=0; i<data.length; i++) {
        this.obj.value += '\u25CF';
      };
      ev.preventDefault();
      return false;
    } else {
      return true;
    }
  },
  init: function(password) {
    var self = this;
    this.obj = password;
    this.psw = document.getElementById('password');
    var data = this.psw.value;
    this.obj.value = '';
    for (var i=0; i<data.length; i++) {
      this.obj.value += '\u25CF';
    };
    if (window.addEventListener) {
      password.addEventListener('keypress', function(event) {return self.handle(event);});
    } else if (window.attachEvent) {
      password.attachEvent('onkeypress', function(event) {return self.handle(event);});
    } else {
      password['onkeypress'] = function(event) {return self.handle(event);};
    }
  }
}
function getElementsByClassName(searchClass, tagName, domNode) {
  if (domNode == null) domNode = document;
  if (tagName == null) tagName = '*';
  var el = new Array();
  var tags = domNode.getElementsByTagName(tagName);
  var tcl = " "+searchClass+" ";
  for(var i=0,j=0; i<tags.length; i++) {
    var test = " " + tags[i].className + " ";
    if (test.indexOf(tcl) != -1) {
      el[j++] = tags[i];
    }
  };
  return el;
}
var passwordList = getElementsByClassName("password", "input");
for (var i=0; i<passwordList.length; i++) {
  var password = new jsPassword();
  password.init(passwordList[i]);
};
})();

Author: , published: , last modified:

Kontakt

Udo Schmal

Udo Schmal
Softwareentwickler
Olvengraben 41
47608 Geldern
Nordrhein-Westfalen
Germany





+49 2831 9776557
+49 1575 0663676
+49 2831 1328709
SMS
WhatsApp

Instagram Profile
vCard 3.0

Service Infos

CMS Info Product Name:
UDOs Webserver
Version:
0.5.0.28
Description:
All in one Webserver
Copyright:
Udo Schmal
Compilation:
Sun, 7. Mar 2021 13:25:50
Development Info Compiler:
Free Pascal FPC 3.3.1
compiled for:
OS:Linux, CPU:x86_64
System Info OS:
Ubuntu 20.04.2 LTS (Focal Fossa)
Hardware Info Model:
Hewlett-Packard HP Pavilion dv7 Notebook PC
CPU Name:
Intel(R) Core(TM) i5-2450M CPU @ 2.50GHz
CPU Type:
x86_64, 1 physical CPU(s), 2 Core(s), 4 logical CPU(s), 2893.607 MHz