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

Bartosz Szewczyk

Używanie stylów w konsoli przeglądarki internetowej
26 października, 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.

Zarejestruj się i przetestuj APN Meeting Room

Wypróbuj system rezerwacji sal w praktyce, na Twojej infrastrukturze.
Wersja demonstracyjna umożliwia Ci instalację oprogramowania na 3 urządzeniach.

Chcę otrzymywać treści marketingowe od A.P.N. Promise S.A. drogą elektroniczną
Chcę otrzymywać treści marketingowe od A.P.N. Promise S.A. telefonicznie

Administratorem danych osobowych gromadzonych z wykorzystaniem formularza jest A.P.N. Promise S.A. z siedzibą w Warszawie. Kontakt z osobą odpowiedzialną za ochronę danych osobowych jest możliwy za pośrednictwem adresu e-mail: iodo@promise.pl. Podane dane będą przetwarzane w zakresie niezbędnym do realizacji określonego żądania zgodnie z art. 6 ust. 1 lit. b RODO, w zakresie niezbędnym dla prawidłowej realizacji żądania oraz oferowania i świadczenia usług, marketingu produktów i usług własnych oraz przeprowadzenia ankiet i oceny satysfakcji zgodnie z art. 6 ust. 1 lit. f RODO przez okres niezbędny dla realizacji celów oraz w przypadku wyrażenia zgody na podstawie art. 6 ust. 1 lit. a RODO w celu dostarczenia treści marketingowych środkami komunikacji elektronicznej lub za pomocą urządzeń telefonicznych.

Przysługuje Ci prawo do żądania dostępu do danych osobowych, ich sprostowania, usunięcia lub ograniczenia przetwarzania, jak również prawo sprzeciwu wobec przetwarzania, prawo do przenoszenia danych, a także prawo złożenia skargi do organu nadzorczego, którym w Polsce jest Prezes Urzędu Ochrony Danych Osobowych. Podanie danych jest dobrowolne, jednak niezbędne dla realizacji powyżej wskazanych celów. Odbiorcami danych mogą być podmioty lub osoby obsługujące administratora w zakresie w zakresie hostingu, komunikatorów internetowych, usług IT, księgowości, archiwizacji. Więcej informacji w Polityce Prywatności oraz Regulaminie.

Register and test the APN Meeting Room booking system.

Registering and installing the trial version you are allowed to install the software on 3 devices.

I want to receive marketing content from A.P.N. Promise S.A. electronically
I want to receive marketing content from A.P.N. Promise S.A. by phone

The data controller of personal data collected using the form is A.P.N. Promise S.A. with its registered office in Warsaw. Contact with the person responsible for the personal data protection is possible via following e-mail address: iodo@promise.pl. The given data shall be processed to the extent necessary to carry out specified request in accordance with art. 6(1)(b) of GDPR and to the extent necessary for the correct realization of the request and offer and provision of services, own product and services marketing and conducting surveys and satisfaction ratings in accordance with art. 6(1)(f) of GDPR for the period necessary to achieve the purposes and in the event of consent in accordance with art. 6(1)(a) of the GDPR to provide marketing content by electronic means or by telephone devices.

You have the right to request access to your personal data, rectification, deletion or limitation of processing, as well as the right to object to processing, the right to transfer data and the right to lodge a complaint with a supervisory authority, i.e. the President of the Personal Data Protection Office in Poland. Providing data is voluntary but necessary for the realization of the above-mentioned purposes. Recipients of data may be entities or persons servicing the data controller in the field of hosting, instant messengers, IT services, accounting, archiving. More information in the Privacy Policy and Regulations.

Cybersecurity w obszarze zarządzania zasobami oprogramowania

Napisz do nas, a skontaktujemy się z Tobą i bezpłatnie porozmawiamy o Twoim poziomie cyberbezpieczeństwa w obszarze SAM.

 

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!

Zostaw adres mailowy i nie przegap kolejnego szkolenia!

[contact-form-7 404 "Not Found"]