Die 10 häufigsten Fehler von Webentwicklern: Ein Tutorial für Entwickler

Veröffentlicht: 2022-03-11

Seit der Begriff des World Wide Web im Jahr 1990 geprägt wurde, hat sich die Entwicklung von Webanwendungen von der Bereitstellung statischer HTML-Seiten zu vollständig dynamischen, komplexen Geschäftsanwendungen entwickelt.

Heute haben wir Tausende von digitalen und gedruckten Ressourcen, die Schritt-für-Schritt-Anleitungen für die Entwicklung aller Arten von verschiedenen Webanwendungen bieten. Entwicklungsumgebungen sind „intelligent“ genug, um viele Fehler zu erkennen und zu beheben, mit denen frühe Entwickler regelmäßig zu kämpfen hatten. Es gibt sogar viele verschiedene Entwicklungsplattformen, die einfache statische HTML-Seiten problemlos in hochgradig interaktive Anwendungen verwandeln.

Alle diese Entwicklungsmuster, -praktiken und -plattformen haben Gemeinsamkeiten und sind alle anfällig für ähnliche Webentwicklungsprobleme, die durch die Natur von Webanwendungen verursacht werden.

Der Zweck dieser Tipps zur Webentwicklung besteht darin, einige der häufigsten Fehler zu beleuchten, die in verschiedenen Phasen des Webentwicklungsprozesses gemacht werden, und Ihnen dabei zu helfen, ein besserer Entwickler zu werden. Ich habe einige allgemeine Themen angesprochen, die praktisch alle Webentwickler gemeinsam haben, wie z. B. Validierung, Sicherheit, Skalierbarkeit und SEO. Sie sollten natürlich nicht an die spezifischen Beispiele gebunden sein, die ich in diesem Handbuch beschrieben habe, da sie nur aufgeführt sind, um Ihnen eine Vorstellung von den potenziellen Problemen zu geben, auf die Sie stoßen könnten.

Häufiger Fehler Nr. 1: Unvollständige Eingabevalidierung

Die Validierung von Benutzereingaben auf Client- und Serverseite ist einfach ein Muss ! Wir alle kennen den weisen Ratschlag „Benutzereingaben nicht vertrauen“ , aber trotzdem passieren allzu oft Fehler, die auf die Validierung zurückzuführen sind.

Eine der häufigsten Folgen dieses Fehlers ist SQL Injection , das Jahr für Jahr in den OWASP Top 10 steht.

Denken Sie daran, dass die meisten Front-End-Entwicklungs-Frameworks sofort einsatzbereite Validierungsregeln bieten, die unglaublich einfach zu verwenden sind. Darüber hinaus verwenden die meisten großen Back-End-Entwicklungsplattformen einfache Anmerkungen, um sicherzustellen, dass die übermittelten Daten den erwarteten Regeln entsprechen. Die Implementierung der Validierung kann zeitaufwändig sein, sollte jedoch Teil Ihrer Standard-Codierungspraxis sein und niemals außer Acht gelassen werden.

Häufiger Fehler Nr. 2: Authentifizierung ohne ordnungsgemäße Autorisierung

Bevor wir fortfahren, stellen wir sicher, dass wir uns an diesen beiden Begriffen orientiert haben. Wie in den 10 häufigsten Web-Sicherheitslücken angegeben:

Authentifizierung: Überprüfung, ob eine Person ein bestimmter Benutzer ist (oder zumindest so aussieht), da sie ihre Sicherheitsdaten (Passwort, Antworten auf Sicherheitsfragen, Fingerabdruckscan usw.) korrekt angegeben hat.

Autorisierung: Bestätigen, dass ein bestimmter Benutzer Zugriff auf eine bestimmte Ressource hat oder die Berechtigung zum Ausführen einer bestimmten Aktion erhalten hat.

Anders ausgedrückt bedeutet die Authentifizierung zu wissen, wer eine Entität ist, während die Autorisierung zu wissen bedeutet, was eine bestimmte Entität tun kann.

Lassen Sie mich dieses Problem an einem Beispiel demonstrieren:

Beachten Sie, dass Ihr Browser aktuell protokollierte Benutzerinformationen in einem Objekt ähnlich dem folgenden speichert:

 { username:'elvis', role:'singer', token:'123456789' }

Bei einer Kennwortänderung führt Ihre Anwendung den POST durch:

 POST /changepassword/:username/:newpassword

In Ihrer Methode /changepassword überprüfen Sie, ob der Benutzer angemeldet ist und das Token nicht abgelaufen ist . Dann finden Sie das Benutzerprofil anhand des Parameters :username und ändern das Kennwort Ihres Benutzers.

Sie haben also bestätigt, dass Ihr Benutzer ordnungsgemäß angemeldet ist, und dann haben Sie seine Anfrage ausgeführt und damit sein Passwort geändert. Der Prozess scheint in Ordnung zu sein, oder? Leider lautet die Antwort NEIN!

An dieser Stelle ist es wichtig zu überprüfen, ob der Benutzer, der die Aktion ausführt, und der Benutzer, dessen Passwort geändert wird, identisch sind. Alle im Browser gespeicherten Informationen können manipuliert werden, und jeder fortgeschrittene Benutzer kann username:'elvis' leicht auf username:'Administrator' ändern, ohne etwas anderes als die integrierten Browser-Tools zu verwenden.

In diesem Fall haben wir uns also nur um die Authentication gekümmert, um sicherzustellen, dass der Benutzer Sicherheitsanmeldeinformationen bereitstellt. Wir können sogar eine Validierung hinzufügen, dass die Methode /changepassword nur von Authenticated Benutzern ausgeführt werden kann. Dies reicht jedoch immer noch nicht aus, um Ihre Benutzer vor böswilligen Angriffen zu schützen.

Sie müssen sicherstellen, dass Sie den tatsächlichen Anforderer und den Inhalt der Anfrage innerhalb Ihrer /changepassword Methode überprüfen und die ordnungsgemäße Authorization der Anfrage implementieren, um sicherzustellen, dass der Benutzer nur seine Daten ändern kann.

Authentication und Authorization sind zwei Seiten derselben Medaille. Behandeln Sie sie niemals getrennt.

Häufiger Fehler Nr. 3: Nicht skalierbar

In der heutigen Welt der Hochgeschwindigkeitsentwicklung, Startup-Beschleuniger und der sofortigen globalen Reichweite großartiger Ideen ist es für viele Unternehmen ein gemeinsames Ziel, Ihr MVP (Minimum Viable Product) so schnell wie möglich auf den Markt zu bringen.

Dieser ständige Zeitdruck führt jedoch dazu, dass selbst gute Webentwicklungsteams häufig bestimmte Probleme übersehen. Skalierung ist oft eines der Dinge, die Teams für selbstverständlich halten. Das MVP-Konzept ist großartig, aber wenn Sie es zu weit treiben, werden Sie ernsthafte Probleme bekommen. Leider reicht es nicht aus, eine skalierbare Datenbank und einen Webserver auszuwählen und alle Anwendungsschichten auf unabhängigen skalierbaren Servern zu trennen. Es gibt viele Details, über die Sie nachdenken müssen, wenn Sie vermeiden möchten, später wesentliche Teile Ihrer Anwendung neu zu schreiben – was zu einem großen Problem bei der Webentwicklung wird.

Angenommen, Sie möchten hochgeladene Profilbilder Ihrer Benutzer direkt auf einem Webserver speichern. Dies ist eine absolut gültige Lösung – Dateien sind für die Anwendung schnell zugänglich, Dateihandhabungsmethoden sind in jeder Entwicklungsplattform verfügbar, und Sie können diese Bilder sogar als statischen Inhalt bereitstellen, was eine minimale Belastung Ihrer Anwendung bedeutet.

Aber was passiert, wenn Ihre Anwendung wächst und Sie zwei oder mehr Webserver hinter einem Load Balancer verwenden müssen? Obwohl Sie Ihren Datenbankspeicher, Ihre Sitzungsstatusserver und Webserver gut skaliert haben, scheitert Ihre Anwendungsskalierbarkeit an einfachen Dingen wie Profilbildern. Daher müssen Sie eine Art Dateisynchronisierungsdienst (der eine Verzögerung hat und vorübergehende 404-Fehler verursacht) oder eine andere Problemumgehung implementieren, um sicherzustellen, dass Dateien über Ihre Webserver verteilt werden.

Was Sie tun mussten, um das Problem von vornherein zu vermeiden, war, einfach einen gemeinsam genutzten Dateispeicherort, eine Datenbank oder eine andere Remote-Speicherlösung zu verwenden. Es hätte wahrscheinlich ein paar zusätzliche Arbeitsstunden gekostet, alles zu implementieren, aber es wäre die Mühe wert gewesen.

Häufiger Fehler Nr. 4: Falsches oder fehlendes SEO

Die Hauptursache für falsche oder fehlende SEO Best Practices auf Websites sind falsch informierte „SEO-Spezialisten“. Viele Webentwickler glauben, dass sie genug über SEO wissen und dass es nicht besonders komplex ist, aber das stimmt einfach nicht. Die Beherrschung der SEO erfordert viel Zeit für die Recherche nach Best Practices und den sich ständig ändernden Regeln, wie Google, Bing und Yahoo das Web indexieren. Wenn Sie nicht ständig experimentieren und über genaues Tracking + Analysen verfügen, sind Sie kein SEO-Spezialist, und Sie sollten nicht behaupten, einer zu sein.

Darüber hinaus wird SEO zu oft als eine Aktivität verschoben, die am Ende erledigt wird. Dies ist mit einem hohen Preis für Probleme bei der Webentwicklung verbunden. SEO bezieht sich nicht nur auf das Setzen von guten Inhalten, Tags, Schlüsselwörtern, Metadaten, Bild-Alt-Tags, Sitemap usw. Es umfasst auch das Eliminieren von doppelten Inhalten, eine crawlbare Website-Architektur, effiziente Ladezeiten, intelligente Backlinks usw.

Wie bei der Skalierbarkeit sollten Sie von dem Moment an, in dem Sie mit der Erstellung Ihrer Webanwendung beginnen, an SEO denken, oder Sie stellen möglicherweise fest, dass der Abschluss Ihres SEO-Implementierungsprojekts bedeutet, Ihr gesamtes System neu zu schreiben.

Häufiger Fehler Nr. 5: Zeit- oder prozessorintensive Aktionen in Request-Handlern

Eines der besten Beispiele für diesen Fehler ist das Versenden von E-Mails basierend auf einer Benutzeraktion. Zu oft denken Entwickler, dass das Ausführen eines SMTP-Aufrufs und das Senden einer Nachricht direkt vom Benutzeranforderungs-Handler die Lösung ist.

Angenommen, Sie haben einen Online-Buchladen eingerichtet und erwarten, täglich mit ein paar hundert Bestellungen zu beginnen. Als Teil Ihres Auftragseingangsprozesses senden Sie jedes Mal Bestätigungs-E-Mails, wenn ein Benutzer eine Bestellung aufgibt. Dies funktioniert zunächst problemlos, aber was passiert, wenn Sie Ihr System skalieren und plötzlich Tausende von Anfragen erhalten, die Bestätigungs-E-Mails senden? Sie erhalten entweder Zeitüberschreitungen bei SMTP-Verbindungen, Kontingente überschritten oder die Antwortzeit Ihrer Anwendung verschlechtert sich erheblich, da sie jetzt E-Mails statt Benutzer verarbeitet.

Jede zeit- oder prozessorintensive Aktion sollte von einem externen Prozess verarbeitet werden, während Sie Ihre HTTP-Anforderungen so schnell wie möglich freigeben. In diesem Fall sollten Sie einen externen Postdienst haben, der Bestellungen entgegennimmt und Benachrichtigungen versendet.

Häufiger Fehler Nr. 6: Bandbreitennutzung nicht optimieren

Die meisten Entwicklungen und Tests finden in einer lokalen Netzwerkumgebung statt. Wenn Sie also 5 Hintergrundbilder mit jeweils 3 MB oder mehr herunterladen, erkennen Sie möglicherweise kein Problem mit einer Verbindungsgeschwindigkeit von 1 Gbit in Ihrer Entwicklungsumgebung. Aber wenn Ihre Benutzer anfangen, eine 15-MB-Homepage über 3G-Verbindungen auf ihre Smartphones zu laden, sollten Sie sich auf eine Liste mit Beschwerden und Problemen vorbereiten.

Die Optimierung Ihrer Bandbreitennutzung könnte Ihnen einen großen Leistungsschub verschaffen, und um diesen Schub zu erzielen, brauchen Sie wahrscheinlich nur ein paar Tricks. Es gibt einige Dinge, die viele gute Webentwickler standardmäßig tun, darunter:

  1. Minimierung des gesamten JavaScripts
  2. Minifizierung aller CSS
  3. Serverseitige HTTP-Komprimierung
  4. Optimierung von Bildgröße und Auflösung

Häufiger Fehler Nr. 7: Nicht für unterschiedliche Bildschirmgrößen entwickeln

Responsive Design war in den letzten Jahren ein großes Thema. Die Verbreitung von Smartphones mit unterschiedlichen Bildschirmauflösungen hat viele neue Möglichkeiten für den Zugriff auf Online-Inhalte gebracht, was auch mit einer Vielzahl von Problemen bei der Webentwicklung einhergeht. Die Zahl der Website-Besuche, die von Smartphones und Tablets kommen, wächst täglich, und dieser Trend beschleunigt sich.

Um eine nahtlose Navigation und den Zugriff auf Website-Inhalte zu gewährleisten, müssen Sie Benutzern den Zugriff von allen Arten von Geräten ermöglichen.

Es gibt zahlreiche Muster und Praktiken zum Erstellen reaktionsschneller Webanwendungen. Jede Entwicklungsplattform hat ihre eigenen Tipps und Tricks, aber es gibt einige Frameworks, die plattformunabhängig sind. Am beliebtesten ist wahrscheinlich Twitter Bootstrap. Es ist ein quelloffenes und kostenloses HTML-, CSS- und JavaScript-Framework, das von allen großen Entwicklungsplattformen übernommen wurde. Halten Sie sich beim Erstellen Ihrer Anwendung einfach an Bootstrap-Muster und -Praktiken, und Sie erhalten problemlos eine reaktionsschnelle Webanwendung.

Häufiger Fehler Nr. 8: Cross-Browser-Inkompatibilität

Der Entwicklungsprozess steht in den meisten Fällen unter starkem Zeitdruck. Jede Anwendung muss so schnell wie möglich veröffentlicht werden, und selbst gute Webentwickler konzentrieren sich oft auf die Bereitstellung von Funktionalität statt Design. Ungeachtet der Tatsache, dass die meisten Entwickler Chrome, Firefox oder IE installiert haben, verwenden sie in 90 % der Fälle nur eines davon. Es ist üblich, während der Entwicklung nur einen Browser zu verwenden, und sobald sich die Anwendung der Fertigstellung nähert, beginnen Sie damit, sie in anderen Browsern zu testen. Dies ist vollkommen vernünftig – vorausgesetzt, Sie haben viel Zeit zum Testen und Beheben von Problemen, die in diesem Stadium auftreten.

Es gibt jedoch einige Webentwicklungstipps, die Ihnen viel Zeit sparen können, wenn Ihre Anwendung die Cross-Browser-Testphase erreicht:

  1. Sie müssen während der Entwicklung nicht in allen Browsern testen; es ist zeitaufwändig und ineffektiv. Das bedeutet jedoch nicht, dass Sie den Browser nicht häufig wechseln können. Verwenden Sie alle paar Tage einen anderen Browser, dann erkennen Sie größere Probleme zumindest früh in der Entwicklungsphase.
  2. Seien Sie vorsichtig, wenn Sie Statistiken verwenden, um zu rechtfertigen, dass Sie einen Browser nicht unterstützen. Es gibt viele Unternehmen, die bei der Einführung neuer Software oder Upgrades nur langsam vorgehen. Tausende von Benutzern, die dort arbeiten, benötigen möglicherweise weiterhin Zugriff auf Ihre Anwendung und können aufgrund interner Sicherheits- und Geschäftsrichtlinien den neuesten kostenlosen Browser nicht installieren.
  3. Vermeiden Sie browserspezifischen Code. In den meisten Fällen gibt es eine elegante Lösung, die browserübergreifend kompatibel ist.

Häufiger Fehler Nr. 9: Keine Planung für Portabilität

Annahme ist die Mutter aller Probleme! Wenn es um Portabilität geht, gilt dieses Sprichwort mehr denn je. Wie oft sind Ihnen Probleme in der Webentwicklung wie hartcodierte Dateipfade, Datenbankverbindungszeichenfolgen oder Annahmen, dass eine bestimmte Bibliothek auf dem Server verfügbar sein wird, begegnet? Anzunehmen, dass die Produktionsumgebung mit Ihrem lokalen Entwicklungscomputer übereinstimmt, ist einfach falsch.

Idealer Anwendungsaufbau sollte wartungsfrei sein:

  1. Stellen Sie sicher, dass Ihre Anwendung in einer Umgebung mit mehreren Servern mit Lastenausgleich skaliert und ausgeführt werden kann.
  2. Ermöglichen Sie eine einfache und übersichtliche Konfiguration – möglicherweise in einer einzigen Konfigurationsdatei.
  3. Behandeln Sie Ausnahmen, wenn die Webserverkonfiguration nicht wie erwartet ist.

Häufiger Fehler Nr. 10: RESTful Anti Patterns

RESTful-APIs haben ihren Platz in der Webentwicklung eingenommen und sind gekommen, um zu bleiben. Fast jede Webanwendung hat irgendeine Art von REST-Diensten implementiert, sei es für den internen Gebrauch oder die Integration in ein externes System. Aber wir sehen immer noch fehlerhafte RESTful-Muster und Dienste, die sich nicht an die erwarteten Praktiken halten.

Zwei der häufigsten Fehler beim Schreiben einer RESTful-API sind:

  1. Verwendung falscher HTTP-Verben. Verwenden Sie zum Beispiel GET zum Schreiben von Daten. HTTP GET wurde so konzipiert, dass es idempotent und sicher ist, was bedeutet, dass, egal wie oft Sie GET für dieselbe Ressource aufrufen, die Antwort immer gleich sein sollte und keine Änderung des Anwendungsstatus auftreten sollte.

  2. Es werden keine korrekten HTTP-Statuscodes gesendet. Das beste Beispiel für diesen Fehler ist das Senden von Fehlermeldungen mit dem Antwortcode 200.

     HTTP 200 OK { message:'there was an error' }

Sie sollten HTTP 200 OK nur senden, wenn die Anfrage keinen Fehler erzeugt hat. Im Fehlerfall sollten Sie 400, 401, 500 oder einen anderen Statuscode senden, der dem aufgetretenen Fehler entspricht.

Eine detaillierte Übersicht über Standard-HTTP-Statuscodes finden Sie hier.

Einpacken

Webentwicklung ist ein extrem weit gefasster Begriff, der die Entwicklung einer Website, eines Webdienstes oder einer komplexen Webanwendung rechtmäßig umfassen kann.

Der wichtigste Aspekt dieses Webentwicklungsleitfadens ist die Erinnerung, dass Sie immer vorsichtig mit der Authentifizierung und Autorisierung sein, die Skalierbarkeit planen und niemals etwas voreilig annehmen sollten – oder bereit sein sollten, sich mit einer langen Liste von Webentwicklungsproblemen auseinanderzusetzen!