Używanie stylów w konsoli przeglądarki internetowej

W poniższym artykule przedstawię jak zrobić czytelny komunikat, który ostrzeże użytkowników przed wklejaniem obcego kodu do narzędzi deweloperskich przeglądarki internetowej.

W dzisiejszych czasach jednym z zagrożeń czyhających w sieci są cyberprzestępcy. Zabezpieczenia systemów są tak silne, jak ich najsłabsze ogniwo, a bardzo często owym najsłabszym ogniwem okazują się właśnie użytkownicy końcowi.

Przestępcy ogłaszają się, że stworzyli genialny sposób, dzięki któremu zobaczysz, kto przeglądał Twój profil na portalach społecznościowych. Wystarczy jedynie przekopiować jedną linijkę do konsoli przeglądarki i wcisnąć Enter. Tak naprawdę jest to złośliwy kod, który może zawirusować nasz komputer, przejąć nasze konto lub wysłać kompromitujące zdjęcia do naszych znajomych. Na niektórych stronach internetowych (między innymi na Facebooku), kiedy wejdziemy w narzędzia deweloperskie przeglądarki możemy zobaczyć komunikat ostrzegający nas, aby nic nie robić w konsoli.

Używanie kolorów w konsoli nie jest dostępne dla wszystkich przeglądarek, ale te najpopularniejsze to umożliwiają. Wyświetlanie stylów w narzędziach deweloperskich jest wspierane przez:

• Google Chrome
• Firefox (bez obrazów)
• Opera

Przeglądarki, które nie wspierają tej funkcjonalności, to:

• Internet Explorer
• Edge
• Safari

Implementacja

Na samym początku potrzebujemy utworzyć czysty szkielet strony WWW.

Funkcja init() zostanie wywołana przy wczytaniu strony WWW. W tej funkcji dodajemy:

setInterval(function(){    message();   }, 3000);

Funkcja ta co 3 sekundy będzie wywoływać funkcję message(), która będzie odpowiedzialna za wyświetlanie nam komunikatu. W funkcji message() wpisujemy nasz komunikat:

console.log("Uwaga");
console.log("Ta konsola służy wyłącznie dla twórców strony internetowej");
console.log("Jeżeli ktoś polecił Ci skopiować i wkleić tu coś");
console.log("jest to oszustwo, które ma na celu okradzenie Ciebie");
console.log("w razie pytań skontaktuj się z administracją");
console.log("xyz@xyz.xyz");

Po uruchomieniu naszej strony internetowej oraz narzędzi deweloperskich możemy zobaczyć nasz komunikat, który będzie wypisywany co 3 sekundy.

Mamy już komunikat, teraz trzeba zrobić wersje kolorową logów dla Firefoxa, Opery i Chroma. Najpierw musimy sprawdzić, z jakiej przeglądarki korzysta użytkownik:

var isFirefox= /Firefox/.test(navigator.userAgent);
var isChrome= /Google Inc/.test(navigator.vendor);
var isOpera= /OPR/.test(navigator.userAgent);

Następnie, jeżeli użytkownik korzysta z któreś z tych przeglądarek, możemy używać stylów w console.log.

console.log("%c Uwaga", 'color: red; font-size:48px');

Flaga %c mówi przeglądarce, że drugim argumentem funkcji log będzie styl CSS zapisany jako string. W tym przypadku chcemy, aby tekst Uwaga był czerwony i miał rozmiar 48 pikseli.

Poniżej przedstawiam przykładowe formatowanie tekstu informującego użytkownika o niebezpieczeństwie wynikającym z korzystania z konsoli przeglądarki internetowej:

console.log("%c Uwaga", 'color: red; font-size:48px');
console.log("%c ta konsola służy wyłącznie dla twórców strony internetowej", 'background: red; color: white;font-size:20px');
console.log("%c jeżeli ktoś polecił ci skopiować i wkleić tu coś", 'background: red; color: white;font-size:20px');
console.log("%c jest to oszustwo, które ma na celu okradzenie ciebie", 'background: red; color: white;font-size:20px');
console.log("%c w razie pytań skontaktuj się z administracją", 'background: red; color: white;font-size:20px');
console.log("%c xyz@xyz.xyz", 'background: yellow; color: black;font-size:20px');

Po uruchomieniu przeglądarki i otwarciu narzędzi deweloperskich powinniśmy zobaczyć następujący komunikat:

Dodatkowo, możemy wyświetlić gifa w konsoli (funkcjonalność ta jest obecnie obsługiwana jedynie przez Google Chrome i Operę). Aby to zrobić, musimy dodać poniższą linijkę kodu:

console.log("%c     ", "background-image: url('https://media.tenor.com/images/bf2553d895448f25a5c5fbad86a3e985/tenor.gif');font-size: 180px;no-repeat;");

Wartość parametru font-size będzie definiowała wysokość obrazka, a liczba spacji w pierwszym parametrze funkcji conosle.log będzie informować o szerokości. Po uruchomieniu konsoli możemy zobaczyć, że nasz gif został wygenerowany (należy pamiętać, że dla innych gif’ów wartość font-sizei liczba spacji będą musiały być zmienione, w innym wypadku obrazek może zostać ucięty lub powielony).

Pełen kod aplikacji znajduje się w repozytorium GitHub