Ποιες τεχνικές λεπτομέρειες πρέπει να λάβει υπόψη του ο προγραμματιστής μιας διαδικτυακής εφαρμογής πριν δημοσιοποιήσει τον ιστότοπο;

Η ιδέα εδώ είναι ότι οι περισσότεροι από εμάς θα πρέπει να γνωρίζουμε ήδη τα περισσότερα από αυτά που περιέχονται σε αυτόν τον κατάλογο. Αλλά μπορεί να υπάρχουν ένα ή δύο στοιχεία που δεν έχετε ψάξει πραγματικά πριν, δεν τα καταλαβαίνετε πλήρως ή ίσως δεν έχετε καν ακούσει ποτέ γι' αυτά. Επαφή και εμπειρία χρήστη

• Λάβετε υπόψη ότι τα προγράμματα περιήγησης εφαρμόζουν τα πρότυπα με ασυνέπεια και βεβαιωθείτε ότι ο ιστότοπός σας λειτουργεί λογικά καλά σε όλα τα κύρια προγράμματα περιήγησης. Δοκιμάστε τουλάχιστον με μια πρόσφατη μηχανή [Gecko][1] ([Firefox][2]), μια μηχανή WebKit ([Safari][3] και ορισμένα προγράμματα περιήγησης για κινητά), [Chrome][4], τα υποστηριζόμενα προγράμματα περιήγησης [IE][5] (εκμεταλλευτείτε τις εικόνες [Application Compatibility VPC Images][6]) και [Opera][7]. Λάβετε επίσης υπόψη σας τον τρόπο με τον οποίο τα [προγράμματα περιήγησης αποδίδουν τον ιστότοπό σας][8] σε διαφορετικά λειτουργικά συστήματα.
• Εξετάστε πώς οι άνθρωποι μπορεί να χρησιμοποιούν τον ιστότοπο εκτός από τα κύρια προγράμματα περιήγησης: κινητά τηλέφωνα, προγράμματα ανάγνωσης οθόνης και μηχανές αναζήτησης, για παράδειγμα. — Μερικές πληροφορίες προσβασιμότητας: [WAI][9] και [Section508][10], Ανάπτυξη για κινητά τηλέφωνα: [MobiForge][11].
• Στάδιο: Πώς να αναπτύσσετε ενημερώσεις χωρίς να επηρεάζετε τους χρήστες σας. Διαθέστε ένα ή περισσότερα περιβάλλοντα δοκιμών ή σταδιοποίησης για την υλοποίηση αλλαγών στην αρχιτεκτονική, τον κώδικα ή το περιεχόμενο σάρωσης και εξασφαλίστε ότι μπορούν να αναπτυχθούν με ελεγχόμενο τρόπο χωρίς να καταστραφεί τίποτα. Διαθέστε έναν αυτοματοποιημένο τρόπο για την επακόλουθη ανάπτυξη των εγκεκριμένων αλλαγών στη ζωντανή τοποθεσία. Αυτό υλοποιείται αποτελεσματικότερα σε συνδυασμό με τη χρήση ενός συστήματος ελέγχου εκδόσεων (git, Subversion κ.λπ.) και ενός αυτοματοποιημένου μηχανισμού κατασκευής (Ant, NAnt κ.λπ.).
• Μην εμφανίζετε μη φιλικά σφάλματα απευθείας στον χρήστη.
• Μην βάζετε τις διευθύνσεις ηλεκτρονικού ταχυδρομείου των χρηστών σε απλό κείμενο, καθώς θα τους στείλετε spam μέχρι θανάτου.
• Προσθέστε το χαρακτηριστικό rel="nofollow" στους συνδέσμους που δημιουργούνται από τους χρήστες [για να αποφύγετε το spam][12].
• [Φτιάξτε καλά μελετημένα όρια στον ιστότοπό σας][13] - Αυτό ανήκει επίσης στην ενότητα Ασφάλεια.
• Μάθετε πώς να κάνετε [προοδευτική βελτίωση][14].
• [Ανακατεύθυνση μετά από ένα POST][15] αν αυτό το POST ήταν επιτυχές, για να αποτρέψετε μια ανανέωση από το να υποβληθεί ξανά.
• Μην ξεχνάτε να λαμβάνετε υπόψη την προσβασιμότητα. Είναι πάντα μια καλή ιδέα και σε ορισμένες περιπτώσεις αποτελεί [νομική απαίτηση][10]. Οι [WAI-ARIA][16] και [WCAG 2][17] είναι καλές πηγές σε αυτόν τον τομέα.
• Διαβάστε [Don't Make Me Think][18]. Ασφάλεια
• Είναι πολλά για να τα αφομοιώσετε, αλλά ο [OWASP development guide][19] καλύπτει την ασφάλεια ιστοτόπων από την αρχή μέχρι το τέλος.
• Γνωρίστε για την έγχυση, ιδίως την [SQL injection][20] και πώς να την αποτρέψετε.
• Ποτέ μην εμπιστεύεστε την είσοδο του χρήστη, ούτε οτιδήποτε άλλο έρχεται στο αίτημα (το οποίο περιλαμβάνει cookies και κρυφές τιμές πεδίων φόρμας!).
• Κατακερματίστε τους κωδικούς πρόσβασης χρησιμοποιώντας [salt][21] και χρησιμοποιήστε διαφορετικά άλατα για τις σειρές σας για να αποτρέψετε τις επιθέσεις ουράνιου τόξου. Χρησιμοποιήστε έναν αργό αλγόριθμο κατακερματισμού, όπως ο bcrypt (δοκιμασμένος στο χρόνο) ή ο scrypt (ακόμη ισχυρότερος, αλλά νεότερος) ([1][22], [2][23]), για την αποθήκευση κωδικών πρόσβασης. ([Πώς να αποθηκεύετε με ασφάλεια έναν κωδικό πρόσβασης][24]). Το [NIST εγκρίνει επίσης το PBKDF2 για τον κατακερματισμό κωδικών πρόσβασης][25]", και είναι [FIPS approved in .NET][26] (περισσότερες πληροφορίες [εδώ][27]). Αποφύγετε την άμεση χρήση της οικογένειας MD5 ή SHA.
• Μην προσπαθήσετε να επινοήσετε το δικό σας φανταχτερό σύστημα ελέγχου ταυτότητας. Είναι τόσο εύκολο να κάνετε λάθος με λεπτούς και μη ελέγξιμους τρόπους και δεν θα το καταλάβετε καν μέχρι αφού σας χακάρουν.
• Γνωρίστε τους [κανόνες για την επεξεργασία πιστωτικών καρτών][28]. ([Δείτε και αυτή την ερώτηση][29])
• Χρησιμοποιήστε [SSL/TLS][30]/[HTTPS][31] για όλους τους ιστότοπους όπου εισάγονται ευαίσθητα δεδομένα (όπως διαπιστευτήρια, προσωπικές πληροφορίες, πληροφορίες πιστωτικών καρτών). Το [Let's Encrypt][32] είναι μια δωρεάν αρχή πιστοποιητικών που μπορεί να βοηθήσει.
• [Αποτροπή πειρατείας συνόδου][31].
• Αποφυγή [cross site scripting][33] (XSS).
• Αποφυγή [cross site request forgeries][34] (CSRF).
• Αποφυγή [Clickjacking][35].
• Διατηρήστε τα συστήματά σας ενημερωμένα με τις τελευταίες επιδιορθώσεις.
• Βεβαιωθείτε ότι οι πληροφορίες σύνδεσης με τη βάση δεδομένων σας είναι ασφαλείς.
• Ενημερωθείτε για τις τελευταίες τεχνικές επιθέσεων και τα τρωτά σημεία που επηρεάζουν την πλατφόρμα σας.
• Διαβάστε το [The Google Browser Security Handbook][36].
• Διαβάστε [The Web Application Hacker's Handbook][37].
• Εξετάστε το [The principle of least privilege][38]. Προσπαθήστε να εκτελέσετε τον διακομιστή της εφαρμογής σας [ως μη root][39]. ([παράδειγμα tomcat][40])
• Βάλτε rel="noopener noreferrer" σε όλους τους συνδέσμους που παρέχονται από τον χρήστη με target="_blank" για να αποτρέψετε τη JavaScript στη σελίδα προορισμού από το να ανακατευθύνει τη σελίδα σας κάπου αλλού, όπως για παράδειγμα σε μια ψεύτικη σελίδα σύνδεσης. Περισσότερες πληροφορίες
• Εξετάστε το ενδεχόμενο χρήσης μιας [αυστηρής πολιτικής ασφάλειας περιεχομένου][41]. Απόδοση
• Εφαρμόστε προσωρινή αποθήκευση δεδομένων εάν είναι απαραίτητο, κατανοήστε και χρησιμοποιήστε σωστά το [HTTP caching][42] καθώς και το [HTML5 Manifest][43].
• Βελτιστοποίηση εικόνων - μην χρησιμοποιείτε μια εικόνα 20 KB για ένα επαναλαμβανόμενο φόντο.
• Συμπιέστε το περιεχόμενο για ταχύτητα, δείτε [brotli][44], [gzip/deflate][45] ([deflate is better][46]).
• Συνδυάστε/συνδυάστε πολλαπλά φύλλα στυλ ή πολλαπλά αρχεία δέσμης ενεργειών για να μειώσετε τον αριθμό των συνδέσεων του προγράμματος περιήγησης και να βελτιώσετε την ικανότητα gzip να συμπιέζει τις επαναλήψεις μεταξύ των αρχείων.
• Ρίξτε μια ματιά στον ιστότοπο [Yahoo Exceptional Performance][47], πολλές σπουδαίες οδηγίες, συμπεριλαμβανομένης της βελτίωσης της απόδοσης του front-end και του εργαλείου [YSlow][48] (απαιτεί Firefox, Safari, Chrome ή Opera). Επίσης, το [Google page speed][49] (χρήση με [browser extension][50]) είναι ένα άλλο εργαλείο για τη σκιαγράφηση των επιδόσεων και βελτιστοποιεί και τις εικόνες σας.
• Χρησιμοποιήστε το [CSS Image Sprites][51] για μικρές σχετικές εικόνες όπως οι γραμμές εργαλείων (δείτε το σημείο "ελαχιστοποίηση των αιτήσεων HTTP")