Wpadki i wypadki #2

Dzisiaj zapraszam na drugi odcinek Wpadek i Wypadków! Będzie m.in. o głębokim ukryciu, portalu webmasterskim i nie do końca przemyślanych systemach głosowania.

  • Zacznijmy od… TVN-u, a dokładnie ich playera. Otóż ostatnimi czasy rozprawiałem sobie z moim kolegą, aż tu nagle zaczął marudzić, jakbyśmy się miejscami zamienili:

    Pan Maruda
    ogladamy strone tvn player na telewizorze
    bez myszki
    jak myslisz, widzisz gdzie jestesmy?
    tzn jaki link jest aktywny?
    Tomasz Jakut

    na pewno nie
    Pan Maruda
    to masz nastepna strone do shejcenia na swoim blogu
    Webkrytyk chyba
    udalo sie myszke wlaczyc w tv XD
    ja [cenzura]
    wlasnie dostrzegam urok outline

    Imiona i nazwiska osób zostały zmienione na potrzeby artykułu.

    Cóż, powtarzam to od zawsze: outline to ważna rzecz, zwłaszcza jeśli urządzenie, którego używamy ma tylko odpowiednik klawiatury (tak, pilot jest odpowiednikiem klawiatury).

  • Kolejna strona z niepotrzebnie rozwlekłym komunikatem o cookies – może trza zrobić galerię takich stron?
  • A teraz przejdźmy do znanego portalu webmasterskiego (jego nazwę pozwolę sobie pominąć – ciekawi mnie kto odkryje, o którym mowa szybciej: jego twórcy czy nasi czytelnicy), w którego kodzie można znaleźć taki kwiatuszek:

    <!--[if IE 8]>
    	<html class="ie ie8" lang="pl-PL">
    <![endif]-->
    <!--[if gt IE 9]>
    	<html class="no-js" lang="pl-PL">
    <![endif]-->

    Co to oznacza? Że znacznik otwierający html dostaną tylko IE 8+, a wraz z nim – deklarację języka. Wszystkie inne przeglądarki tego szczęścia mieć nie będą. Co więcej, jedynie najnowsze IE dostaną klasę .no-js – czyżby tylko te przeglądarki były godne braku FOUC?

  • Ostatnio powstaje bardzo dużo analizatorów SEO, a wśród nich – kicia. Cóż, nie jest to narzędzie najwyższych lotów – ma sporo błędów (de facto dla stron, które nie mają domeny .pl, narzędzie nie działa!), a wyniki dla stron są mało przydatne.

    Zidentyfikowaliśmy 31 błędów, które nie zostały jeszcze naprawione, jeśli dbasz o swój SEO ranking to powinieneś popracować nad tym.

    Cieszy mnie, że kotek umie sobie walidować HTML i CSS (serio – ktoś w ogóle jeszcze CSS waliduje?), ale nie sądzę, żeby robot Google sprawdzał sobie poprawność każdej strony. To całkowicie niepraktyczne i bez sensu – zwłaszcza, że Google może używać narzędzi typu PhantomJS, żeby uzyskać faktyczną stronę, a nie wydumaną wersję, jak walidator.

    No i moja strona wychodzi strasznie słabo, bo

    Wygląda na to, że kod html i/lub obrazki znajdują się w twoim h1, to jest błąd.

    Nie powiem jak bardzo to stwierdzenie nie ma sensu. Rozumiem, że wstawienie span w celu lepszego stylowania jest błędem? Pomijam już fakt, że według Google obrazek w nagłówku jest lepszy od image replacement.

    Title jest zbyt krótki

    Fakt, od dzisiaj tytuł mojej strony będzie taki: Comandeer’s Homepage – webdeveloper Kraków, tanie strony WWW, skrypty JS, projekty PHP, aplikacje realtime…

    Nagłównek H3 może być użyteczny.

    Uwielbiam traktowanie semantyki jako niewolnika SEO.

    Miałem nadzieję, że kicia zaryczy, ale jedynie cicho zamruczała.

  • Na FB rozgorzała mini-dyskusja o Angular.js, de facto wywołana linkiem do mojej krytyki tegoż frameworka. Pozwolę sobie zatem odpowiedzieć krótko na zalinkowany komentarz.

    Otóż Angular.js powstał około 2 lata po wprowadzeniu History API i nieużywanie go jako domyślnej metody routingu jest po prostu śmieszne. Obecnie jedynie stare IE musiałyby dostawać kalekie hashbangi, a cała reszta zawsze otrzymywałaby pełnoprawne URIs. Owszem, można to ustawić przy pomocy $locationProvider.html5Mode(true);, ale to powinno być opt-out, nie opt-in. BTW dalej twierdzę, że Angular.js jest do granic absurdu przeabstrahowany.

    Co do serwowania stron: przecież można bardzo łatwo wykryć żądanie Ajaksem, np. szukając nagłówka X-Requested-With, co pozwoli nam dla normalnych żądań serwować całą stronę, a dla Ajaksowych – wybraną część. Nie ma sensu serwować za każdym razem całej strony! Optymalizujmy swoje rozwiązania, a nie odwrotnie.

    W tym projekcie możemy zauważyć jeszcze jedną rzecz: redundantność modułów Angulara i kopiowanie de facto konwencji AMD. Kod JS wygląda po prostu… dziwnie. Pomijam tutaj kolejną dziwną decyzję: zostawienie modułów AMD bez optymalizacji. Kilkadziesiąt żądań HTTP nigdy nie jest dobrym pomysłem.

  • Ostatnimi czasy (jakiś miesiąc temu) zakończyły się 2 konkursy, w których istniało głosowanie internautów: konkurs o sprzęt i konkurs na wideoklip. Wszystko byłoby dobrze, gdyby te systemy głosowania nie były tragicznie zabezpieczone przed ponownym głosowaniem.

    Zacznijmy od konkursu na wideoklip – w regulaminie można przeczytać następującą rzecz:

    Zagłosować będzie mógł każdy Internauta, przy czym z jednego adresu IP można oddać tylko jeden głos.

    Otóż nie jest to do końca prawdą, bo jedynym zabezpieczeniem było… nadanie ciasteczka. Co to oznacza? Że w trybie incognito można było nabić sobie głosów w nieskończoność. Cały proces oddawania głosu sprowadzał się do kliknięcia łapki-linka, stąd prosty wniosek, że wystarczy odpalić bota, który nie zapisuje ciasteczek, podać mu adres i puścić go w nieskończonej pętli. Ilość głosów zależy wówczas od mocy przerobowej kompa (i serwera, który te głosy ma odbierać).

    W przypadku konkursu o sprzęt zabezpieczenia były lepsze, ale wciąż banalne do ominięcia. Można było bowiem głosować przez FB lub przez e-mail. Gdyby zastosowano głosowanie tylko przez FB, system dzięki temu byłby dość dobrze zabezpieczony (no bo w końcu FB nieźle radzi sobie z fikcyjnymi kontami!), ale opcja przez e-mail nie jest żadnym zabezpieczeniem. Zwłaszcza, jeśli nie blokuje się takich usług, jak yopmail.com czy mailinator.com. Dzięki temu znów starczy naskrobać bota, który będzie używał skrajnie losowych maili i… tyle.

    Jak zatem zabezpieczyć poprawnie głosowanie? Jeśli naprawdę musimy ograniczyć użytkownika do jednego głosu, należałoby zastosować coś typu evercookie + jakąś prostą heurystykę zachowań (zbyt częste żądania z jednego adresu IP raczej nie są normalne). No i oczywiście zablokować wszystkie efemeryczne maile – inaczej weryfikacja maili nie ma sensu. Ah – wypada też pamiętać, że przyklad@gmail.com, p.rzyklad@gmail.com i przyklad+etykieta@gmail.com to wciąż jeden i ten sam mail. Dobrym pomysłem jest też umożliwienie głosowania tylko z kont społecznościowych, co z automatu ogranicza pole manewru użyszkodnikowi (inna rzecz: jeśli już pozwalacie mi głosować przez FB, to nie spamujcie mnie potwierdzeniem głosu przez e-mail).

  • Ktoś mnie ostatnio spytał czy nie orientuję się kto jest autorem strony Sztuka Yogi. Cóż, trzeba przyznać, że standardowe metody ustalania autorstwa w tym wypadku zawiodły – nie ma nic konkretnego ani na stronie informacyjnej, ani w stopce… ale jest ukryty pewien przekaz w kodzie:

    <link rel="stylesheet" href="css/styleKatila.css" type='text/css'>
    <link rel="stylesheet" href="css/styleKatilaWeb.css" type='text/css'>
    […]
    <script src="js/KatilaSlider.js"></script>
    <script src="js/KatilaInterface.js"></script>

    Taka zbieżność nazw nie może być przypadkiem, prawda? Jeszcze pełniej przemawia fragment kodu na podstronie http://sztukayogi.com/create, gdzie znajdujemy w kodzie komentarz:

    Realizacja: FFW Communication & Katila Games | kontakt: zgloszenia@sztukayogi.com | Copyright 2014 © Sztuka Yogi

    I w sumie to sprawę rozwiązuje. Dla kompletności: strona Katila Games oraz strona FFW Communication. Wniosek: jeśli się czegoś wstydzisz, nie zostawiaj poszlak w kodzie!

    Inna rzecz, że na tej podstronie wcześniej był edytor obrazków, z którego zostało… pełno JS. Autorom tego kodu polecę poczytanie o UMD i zawierzenie jQuery w sprawach crossbrowserowego piekła.

I to by było na tyle! Do przeczytania następnym razem!

5 komentarzy do “Wpadki i wypadki #2”

  1. Ja odkryłem, ja! I to za pierwszym razem 🙂 Może nie będę głośno mówił o jakim portalu mowa. Napiszę tylko, że wczoraj pojawił się tam ciekawy wpis Twojego autorstwa. A to całe kombinowanie z przydzielaniem odpowiedniego tagu html odpowiedniej przeglądarce uważam za całkowicie bezsensowne.

    Jeśli chodzi o komunikaty o cookies, to mam wrażenie, jakby ostatnio zniknęły z wielu miejsc w Sieci. Czyżby webmasterzy w końcu się obudzili?

    Kolejny wpis z serii akurat w moje urodziny. Miło 🙂

    I co by tu dodać… Oby częstotliwość pojawiających się wpisów została zachowana.

  2. >A to całe kombinowanie z przydzielaniem odpowiedniego tagu html odpowiedniej przeglądarce uważam za całkowicie bezsensowne.
    Ma sens, jeśli serio musimy dla prastarego IE dodać jakiś dziwny styl… Ale kto wspiera prastare IE 😉

    >Czyżby webmasterzy w końcu się obudzili?
    Szkoda, że to nie po tej stronie ludzie powinni się obudzić…

    >Kolejny wpis z serii akurat w moje urodziny
    Najlepszego! 😀

    >Oby częstotliwość pojawiających się wpisów została zachowana.
    Pracuję nad tym… a sesja idzie, więc pewnie będą się często pojawiać, przynajmniej do połowy lutego 😉

  3. Ciekawy artykuł, bardzo podoba mi się ta seria, mam nadzieję, że będzie pojawiać się na bieżąco. 😉

  4. Cześć,

    Dziękujemy za „rozszyfrowanie” tego, kto stał za produkcją oraz za polecenie jQuery i UMD 🙂

    Zgadzam się, że wiele rzeczy mogliśmy zrobić lepiej w przypadku tego projektu, ale czas realizacji był bardziej niż napięty, więc może choć troszkę będzie to usprawiedliwieniem w tym wypadku. A jeśli nie jest, to nic więcej nie mam na nasze usprawiedliwienie.

    Nie oznacza to jednak, że się owego projektu wstydzimy. Wręcz odwrotnie. Jesteśmy dumni, że mogliśmy go zrealizować. A że nie mogliśmy się pod nim podpisać, to już kwestia umowy z klientem, a nie wstydu. Jak widać, poszlaki były wystarczające, by się zorientować. Gdybyśmy naprawdę chcieli to ukryć, to postaralibyśmy się lepiej 😉

    Jeśli w przyszłości będziecie coś pisali o kolejnych naszych realizacjach, dajcie znać. Chętnie poczytamy! Może się czegoś przy okazji nauczymy. Teraz przypadkiem znalazłem ten wpis, analizując ruch na stronie.

    Pozdrawiam serdecznie

Skomentuj Comandeer Anuluj pisanie odpowiedzi

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

Witryna wykorzystuje Akismet, aby ograniczyć spam. Dowiedz się więcej jak przetwarzane są dane komentarzy.