Jakie Dane techniczne powinien wziąć pod uwagę programista aplikacji webowej przed upublicznieniem strony?

Chodzi o to, że większość z nas powinna już znać większość tego, co jest na tej liście. Ale może być jedna lub dwie rzeczy, których tak naprawdę nie przyjrzałeś się wcześniej, nie do końca rozumiesz, a może nawet nigdy o nich nie słyszałeś.

Interfejs i doświadczenie użytkownika

• należy pamiętać, że przeglądarki wdrażają standardy niespójnie i upewnij się, że witryna działa rozsądnie dobrze we wszystkich głównych przeglądarkach. Przy minimalnym teście przeciwko niedawnemu Gecko engine (Firefox), silnik WebKit (Safari i niektóre przeglądarki mobilne), Chrome, obsługiwane przez Ciebie przeglądarki IE (skorzystaj z obrazów VPC kompatybilności aplikacji) i Opera. Zastanów się również, w jaki sposób przeglądarki renderują Twoją witrynę w różnych systemach operacyjnych.
• zastanów się, jak ludzie mogą korzystać z witryny innej niż z głównych przeglądarek: telefonów komórkowych, czytników ekranu i wyszukiwarek, dla przykład. - Niektóre informacje o dostępności: WAI I Section508 , rozwój mobilny: MobiForge.
• Staging: jak wdrażać aktualizacje bez wpływu na użytkowników. Udostępnij jedno lub więcej środowisk testowych lub stagingowych, aby wprowadzić zmiany w architekturze, kodzie lub zawartości i upewnić się, że można je wdrożyć w kontrolowany sposób bez niszczenia czegokolwiek. Zautomatyzowany sposób wdrażania zatwierdzonych zmian w witrynie NA ŻYWO. To jest najbardziej skutecznie zaimplementowane w połączeniu z wykorzystaniem systemu kontroli wersji (git, Subversion, itp.) oraz zautomatyzowany mechanizm budowania (Ant, NAnt itp.).
• nie wyświetlaj nieprzyjaznych błędów bezpośrednio użytkownikowi.
• nie umieszczaj adresów e-mail użytkowników w zwykłym tekście, ponieważ zostaną oni spamowani na śmierć.
• Dodaj atrybut {[0] } do linków generowanych przez użytkowników , aby uniknąć spamu .
• Zbuduj dobrze przemyślane limity na swojej stronie - to również należy do Ochrona.
• Naucz się robić progresywne Ulepszanie .
• Przekieruj po poście jeśli ten POST się powiódł, aby zapobiec ponownemu wysłaniu odświeżenia.
• nie zapomnij wziąć pod uwagę dostępności. To zawsze dobry pomysł i w pewnych okolicznościach jest to wymóg prawny {36]}. WAI-ARIA I WCAG 2 są dobrymi zasobami w tej dziedzinie.
• Czytaj nie zmuszaj mnie Myśl .

Bezpieczeństwo

• jest to dużo do przetrawienia, ale OWASP development guide obejmuje bezpieczeństwo stron internetowych od góry do dołu.
• wiedzieć o Injection szczególnie SQL injection i jak temu zapobiec.
• nigdy nie ufaj wejściom użytkownika, ani niczego innego, co pojawia się w żądaniu (które obejmuje Pliki cookie i ukryte wartości pól formularza!).
• Hash haseł za pomocą soli i używać różnych soli do rzędy, aby zapobiec atakom tęczy. Użyj powolnego algorytmu haszującego, takiego jak bcrypt (testowany w czasie) lub scrypt (jeszcze silniejszy, ale nowszy) (1, 2), do przechowywania haseł. (Jak Bezpiecznie Przechowywać Hasło ). PBKDF2 może być używany do tworzenia haseł hashowych (hashów), a także do tworzenia FIPS (FIPS). NET (więcej informacji tutaj ). unikaj używania rodziny MD5 lub SHA bezpośrednio.
• nie próbuj wymyślać własnych fantazji System Uwierzytelniania . Tak łatwo jest się pomylić w subtelny i nie do zniesienia sposób i nawet nie wiedziałbyś o tym, dopóki po zostaniesz zhakowany.
• poznaj zasady przetwarzania kart kredytowych . (Zobacz również to pytanie )
• użyj SSL / TLS/HTTPS dla wszelkich witryn, w których wprowadzane są dane wrażliwe (takie jak poświadczenia, dane osobowe, informacje o karcie kredytowej). Let ' s Encrypt jest darmowym urząd certyfikacji, który może pomóc.
• zapobiec porwaniu sesji .
• unikaj cross Site scripting (XSS).
• unikaj cross site request forgeries (CSRF).
• Uniknąć Clickjacking .
• Aktualizuj swój system na bieżąco z najnowszymi łatami.
• upewnij się, że informacje o połączeniu z bazą danych są zabezpieczone.
• Informuj się o najnowszych technikach ataku i lukach w zabezpieczeniach wpływ na Twoją platformę.
• Przeczytaj Podręcznik Bezpieczeństwa Przeglądarki Google .
• przeczytaj Podręcznik hakera aplikacji internetowych .
• rozważmy zasadę najmniejszego przywileju . Spróbuj uruchomić serwer aplikacji jako non-root. (przykład tomcat )
• umieść rel="noopener noreferrer" na wszystkich linkach podanych przez użytkownika z target="_blank", aby zapobiec przekierowaniu JavaScript na stronie docelowej do innego miejsca, takiego jak fałszywa strona logowania. Więcej Informacji
• rozważ użycie Ścisłej Polityki Bezpieczeństwa treści.

Wydajność

• zaimplementuj buforowanie w razie potrzeby, zrozum i użyj buforowania HTTP poprawnie, a także manifestu HTML5.
• Optymalizacja obrazów - nie używaj obrazu 20 KB do powtarzania tła.
• Kompresuj zawartość dla szybkości, zobacz brotli, gzip / deflate (deflate jest lepiej).
• Połącz / połącz wiele arkuszy stylów lub wiele plików skryptów, aby zmniejszyć liczbę połączeń przeglądarki i poprawić zdolność gzip do kompresji duplikatów między plikami.
• spójrz na stronę Yahoo Exceptional Performance , wiele świetnych wytycznych, w tym poprawa wydajności front-endu i ich narzędzia YSlow (wymaga Firefoksa, Safari, Chrome lub Opery). Ponadto, Google page speed (użyj z przeglądarka extension ) to kolejne narzędzie do profilowania wydajności i optymalizuje również obrazy.
• użyj CSS Image Sprites dla małych powiązanych obrazów, takich jak paski narzędzi (zobacz punkt "Minimalizuj żądania HTTP")
• użyj Sprite obrazów SVG dla małych powiązanych obrazów, takich jak paski narzędzi. Kolorowanie SVG jest trochę trudne. Możesz o tym przeczytać tutaj .
• zajęte strony internetowe powinny rozważyć dzielenie komponentów między domeny. Konkretnie...
• zawartość statyczna (tj. obrazy, CSS, JavaScript i ogólnie zawartość, która nie wymaga dostępu do plików cookie) powinna znajdować się w oddzielnej domenie która nie używa plików cookie, ponieważ wszystkie pliki cookie dla domeny i jej subdomen są wysyłane z każdym żądaniem do domeny i jej subdomen. Dobrym rozwiązaniem jest użycie sieci dostarczania treści (CDN), ale rozważ przypadek, w którym CDN może zawieść, włączając alternatywne CDN lub lokalne kopie, które mogą być serwowane zamiast.
• zminimalizuj całkowitą liczbę żądań HTTP wymaganych przez przeglądarkę do renderowania strony.
W tym celu należy wybrać silnik szablonu i renderować / wstępnie skompilować go za pomocą runnerów zadań, takich jak gulp lub grunt
• upewnij się, że w katalogu głównym serwisu znajduje się plik favicon.ico, czyli /favicon.ico. przeglądarki automatycznie zażądają tego , nawet jeśli ikona nie jest wymieniona w HTML. Jeśli nie masz /favicon.ico, spowoduje to wiele 404, wyczerpujących Twoje przepustowość serwera.

SEO (Search Engine Optimization)

• używaj adresów URL "przyjaznych wyszukiwarkom", tzn. używaj example.com/pages/45-article-title zamiast example.com/index.php?page=45
• podczas korzystania z # dla dynamicznej zawartości Zmień # na #!, a następnie na serwerze $_REQUEST["_escaped_fragment_"] jest to, czego używa googlebot zamiast #!. Innymi słowy, ./#!page=1 staje się ./?_escaped_fragments_=page=1. Również dla użytkowników, którzy mogą używać FF.b4 lub Chrom, {[15] } jest wielkim poleceniem. Więc mimo że pasek adresu zmienił się strona robi nie przeładować. Pozwala to na użycie ? zamiast #!, aby zachować dynamiczną zawartość, a także powiedzieć serwerowi, gdy wysyłasz link, że jesteśmy po tej stronie, a AJAX nie musi składać kolejnego dodatkowego żądania.
• nie używaj linków, które mówią "kliknij tutaj" . Marnujesz okazję SEO, a to utrudnia ludziom z czytnikami ekranu.
W tym celu prosimy o zapoznanie się z naszą polityką prywatności.
• użycie <link rel="canonical" ... /> jeśli masz wiele adresów URL, które prowadzą do tej samej treści, problem ten można rozwiązać również z Google Webmaster Tools .
• użyj Google Webmaster Tools i Bing Webmaster Tools .
Na początku zainstaluj Google Analytics (lub narzędzie do analizy open source, takie jak Matomo (295)).
• Know how roboty.txt i pająki wyszukiwarek działają.
• żądania przekierowania (za pomocą 301 Moved Permanently) Prośba o www.example.com do example.com (lub odwrotnie), aby zapobiec podziałowi rankingu google między obie strony.
• wiedz, że mogą tam być źle zachowujące się pająki.
• jeśli masz treść nietekstową, zajrzyj do rozszerzeń Mapy Google dla wideo itp. Jest kilka dobrych informacji na ten temat wTim Farley ' s answer .

Technologia

• zrozumieć HTTP I takie rzeczy jak GET, POST, sesje, ciasteczka i co to znaczy być "bezpaństwowcem".
• Write your XHTML/HTML I CSS zgodnie ze specyfikacją W3C i upewnij się, że walidują. Celem jest uniknięcie trybów dziwactwa przeglądarki i jako bonus znacznie ułatwić pracę z nietradycyjnymi przeglądarkami, takimi jak czytniki ekranu i urządzenia mobilne.
• zrozumieć, jak JavaScript jest przetwarzany w przeglądarce.
• zrozumieć, jak JavaScript, arkusze stylów i inne zasoby używane przez Twoją stronę są ładowane i uwzględniają ich wpływ na postrzeganą wydajność. Obecnie powszechnie uważa się, że właściwe jest przenoszenie skryptów na dół Twoich stron, z wyjątkiem zazwyczaj rzeczy takich jak aplikacje analityczne lub shims HTML5.
• Zrozum, jak działa piaskownica JavaScript, zwłaszcza jeśli zamierzasz używać ramek iFrame.
• należy pamiętać, że JavaScript może i będzie wyłączony, a zatem AJAX jest rozszerzeniem, a nie linią bazową. Nawet jeśli większość użytkowników zostawia go teraz włączony, pamiętaj, że NoScript staje się coraz bardziej popularny. Mimo że nowoczesne boty indeksujące obsługują indeksowanie treści generowanych przez JavaScript, rozważ użycie renderowania po stronie serwera dla innych botów indeksujących lub użytkowników, którzy wyłączyli JavaScript.
• poznaj różnicę między przekierowaniami 301 i 302 (jest to również problem SEO).
• dowiedz się jak najwięcej o swojej platformie wdrożeniowej.
• rozważ użycie Zresetuj arkusz stylów lub znormalizuj.css .
• rozważ frameworki JavaScript (takie jak jQuery, MooTools, Prototype, Dojo lub YUI 3 ), które ukryje wiele różnic w przeglądarce podczas korzystania z JavaScript do manipulacji DOM.
[34]} biorąc postrzeganą wydajność i frameworki JS razem, rozważ użycie usługi, takiej jak Google Libraries API do ładowania frameworków, aby przeglądarka mogła używaj kopii frameworka, który już został zbuforowany, zamiast pobierać duplikaty kopii z witryny. Nie odkrywaj koła na nowo. Przed zrobieniem czegokolwiek poszukaj komponentu lub przykładu, jak to zrobić. Istnieje 99% szansa, że ktoś to zrobił i wydał wersję kodu OSS.
• Z drugiej strony, nie zaczynaj z 20 bibliotekami, zanim nie zdecydujesz, jakie są Twoje potrzeby. Szczególnie w sieci po stronie klienta, gdzie prawie zawsze jest bardziej ważne, aby rzeczy były lekkie, szybkie i elastyczne.

Naprawianie błędów

• zrozum, że poświęcisz 20% swojego czasu na kodowanie i 80% na utrzymanie, więc koduj odpowiednio.
• Skonfiguruj dobre rozwiązanie do raportowania błędów.
• mieć system dla ludzi, aby kontaktować się z sugestiami i krytyką.
• udokumentuj, jak aplikacja działa dla przyszłych pracowników wsparcia i osób wykonujących konserwację.
Rób częste kopie zapasowe! (I upewnij się, że kopie zapasowe działają) mają strategię przywracania, a nie tylko strategię tworzenia kopii zapasowych.
• Użyj systemu kontroli wersji do przechowywania plików, takiego jak Subversion, Mercurial lub Git .
Nie zapomnij zrobić testu akceptacyjnego. Frameworki takie jak selen mogą pomóc. Szczególnie jeśli w pełni zautomatyzujesz swoje testy, być może za pomocą narzędzia do ciągłej integracji, takiego jak Jenkins .
• upewnij się, że masz wystarczające logowanie za pomocą frameworków takich jak log4j, log4net lub log4r . Jeśli coś pójdzie nie tak w Twojej witrynie NA ŻYWO, będziesz potrzebował sposobu, aby dowiedzieć się, co.
• podczas logowania upewnij się, że rejestrujesz zarówno obsługiwane wyjątki, jak i nieobsługiwane wyjątki. Zgłoś / przeanalizuj wyjście dziennika, ponieważ pokaże ci, gdzie znajdują się kluczowe problemy w Twojej witrynie.

Inne

• zaimplementuj monitorowanie zarówno po stronie serwera, jak i po stronie klienta i analityki (należy być proaktywnym, a nie reaktywnym).
• korzystaj z usług takich jak UserVoice i Intercom (lub innych podobnych narzędzi), aby stale utrzymywać kontakt z użytkownikami.
• Follow Vincent Driessen ' s Model rozgałęzienia Gita

Wiele rzeczy pominiętych niekoniecznie dlatego, że nie są użytecznymi odpowiedziami, ale dlatego, że albo są zbyt szczegółowe, poza zakresem, albo idą trochę za daleko dla kogoś, kto chce uzyskać przegląd rzeczy powinni wiedzieć. Proszę również edytować to, prawdopodobnie przegapiłem kilka rzeczy lub popełniłem kilka błędów.