O webu
Varování v JS konsoli
JS konsole

Tzv. console je nástroj ve vývojářských nástrojích (dostupný zpravidla po stisknutí F12), který slouží ke dvěma věcem:

  1. Prostor pro vypsání testovacích dat z JavaScriptu na stránce. Nejčastěji se používá něco jako:

    console.log("Proměnná x: " + x);
  2. Prostor pro spouštění JS kódu. Napíše-li se do konsole:

    alert(1);

    Vyskočí na stránce příslušná hláška.

Právě druhý případ přináší bezpečnostní risiko, protože kód vložený do konsole má nad stránkou prakticky absolutní moc.

Varování proti vložení kódu

Populární webové služby často čelily situacím, kdy někdo šířil JS kód, který měl zajistit nějakou funkčnost: třeba automatické označení všech přátel pro pozvání k události na Facebooku.

Tento kód se vkládal právě do JS konsole ve vývojářských nástrojích.

Některé kódy tak skutečně fungovaly, problém je, že do nich mohl útočník přidat ještě něco škodlivého, co laik neodhalí.

Útok tímto způsobem se nazývá jako self XSS – tj. varianta Cross-site scriptingu, kterou oběť provede sama na sebe.

Známé webové služby proto typicky po stisku F12 a otevření konsole zobrazují upozornění:

Tato funkce prohlížeče je určena pro vývojáře. Pokud vám někdo řekl, ať sem něco zkopírujete, abyste tím aktivovali nějakou funkci Facebooku nebo hackovali něčí účet, pak byste měli vědět, že jde o podvod a že danému člověku poskytnete přístup ke svému Facebook účtu.
Varování na Facebooku
Prostřednictvím této konzole můžou útočníci provést takzvaný útok typu Self-XSS, pomocí kterého můžou předstírat vaši identitu a odcizit vaše údaje.
Do konzole proto nezadávejte ani nevkládejte kód, kterému nerozumíte.
Upozornění na Google Plus

Vlastní upozornění

Pro přidání obdobného upozornění na své stránky stačí přidat vhodně formátovanou zprávu pomocí console.log.

Formátování se provádí pomocí CSS při uvedení %c na začátku textu a přidáním druhým argumentem s CSS pravidly:

console.log(
  "%cZpráva formátovaná pomocí CSS", 
  "color: blue; font-size: x-large"
);

Pro zajímavost jsem něco formátovaného přidal i na tuto stránku.

Další formátování

Kromě změny CSS jde výpis formátovat i jinými způsoby. Všechny možné postupy, jak vypisovat něco do chybové konsole, jsou popsány na: