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

Bartosz Szewczyk

Używanie stylów w konsoli przeglądarki internetowej
Październik 26, 2017 Katarzyna Sobczak

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.

developer tools
developer tools

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.

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.

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:

komunikat po uruchomieniu przeglądarki

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).

gif

Pełen kod aplikacji znajduje się w repozytorium GitHub

Podziel się

Autor: Bartosz Szewczyk

Bartosz Szewczyk

Bartosz Szewczyk

Zespół: Apps

Ostatnie artykuły autora

Rozliczanie przebiegów aut w przedsiębiorstwie w 5 minut

Rozliczanie przebiegów aut w przedsiębiorstwie w 5 minut

Bartosz Szewczyk przedstawia rozwiązanie, które pomaga zarządzać w samochodami w przedsiębiorstwie, zapewniając komfort i szybkość pracy użytkowników.

Synchronizator poczty z Exchange do SharePoint

Synchronizator poczty z Exchange do SharePoint

W artykule przedstawiono rozwiązanie pozwalające na synchronizację wiadomości w czasie rzeczywistym z Exchange do SharePoint w celu dostarczenia użytkownikowi dodatkowych, niedostępnych w programie Outlook możliwości pracy nad załącznikami oraz przyspieszenie dostępu do danych.

Routing w Angular

Routing w Angular

Routing umożliwia nawigowanie między komponentami w aplikacji bez jej przeładowywania. W artykule przestawiam, jak we frameworku Angular4 zaimplementować przykładowy routing.

Skontaktuj się z Bartoszem

 

Administratorem danych gromadzonych z wykorzystaniem formularza jest A.P.N. Promise S.A. Podane przez Ciebie dane będą przetwarzane w zakresie niezbędnym do podjęcia kontaktu lub realizacji określonego żądania zgodnie z art. 6 ust. 1 lit. b RODO przez okres niezbędny dla realizacji Twojego zgłoszenia. Wszelkie informacje w zakresie przetwarzania podanych przez Ciebie w formularzu danych oraz posiadanych uprawnieniach znajdziesz w Polityce prywatności. Kliknij i dowiedz się więcej jeżeli informacje podane powyżej nie są dostatecznie jasne!