logo

Únik X InnerHTML

jakékoli komentáře VYSOCE oceňovány; zpětná vazba/dotazy vítány!

Únikové a datové kanály

Co je únikový kód? Proč to používáme?

Únikový kód se pokouší vyřešit složitý, ale základní problém, jak počítač čte a zpracovává data jako proud, jako je tisk nebo spouštění. Když vidíme „ citát , jen jeden, je to jen nějaký text, ale pro počítač je to celý příkaz, deklarace dat! Když chceme předávat data, je nutné určit, jaký typ a jak potřebujeme, aby je počítač četl.

Příklad únikového kódu:
'<imgsrc="x"onerror="alert(1)">';

Při poskytování vstupního pole uživateli musí počítač převzít vstup a nějak jej uložit do toho, co známe jako proměnnou. Potom, když se vrátíme a řekneme počítači, aby načetl proměnnou; nazýváme uvedenou proměnnou a máme smyčku přiřazení/volání. Když přiřadíme vstup PŘÍMO proměnné a zavoláme ji, provádíme kód.

V chytré komponentě se nemůžeme vyhnout manipulaci s daty prostřednictvím těchto streamů, a proto MUSÍME použít nějakou formu únikového kódu . Náš únikový kód nám může pomoci správně interpretovat řetězce a vstupy, nejen že nám umožňuje volně psát kód, ale také chrání uživatele před xSS

innerHTML a Injection

počkej, co?

  • Nejprve potřebujeme vědět, jak innerHTML funguje, a poté přejdeme k tomu, proč můžeme do tohoto prvku vložit JS.

  • Za druhé, Injection je definován jako spouštění JavaScriptu ze strany klienta vyvolané klientem

Nyní, když náš zdroj JS pro web čte data innerHTML, neodesílá jen nějaká data pro soubor HTML, který se má spustit. Vnitřní HTML provede hodnotu definovanou výrazem, to znamená, pokud použijete

element.innerHTML = <input />

Když vložíme <script> </script> tagy uvnitř našeho vstupu, můžeme VELMI snadno vložit kód přímo na web, například:
const HACKS= <script deferred> alert("xScriptatK");</script>
Musíte odložit, protože při načítání stránky již byl DOM spuštěn

Tímto způsobem většina hackerů krade data webu:soubory cookie, localStorage, někdy požadují fetch() o změnu dat a poté data vracejí do vzdáleného umístění.

ÚNIK X INNERHTML

Teď všichni spolu:

Když chceme dynamicky nastavit webová data a obsah, musíme použít označení escaped znaky.

Máme několik možností:

  1. textContent
    Vykreslí řetězec znaků s escapováním, naše předchozí var HACKS se vykreslí jako řetězec a nespustí se.

  2. Dezinfikujte obsah třetích stran
    Řekněme, že máme vstupní pole a uživatel jej vyplní následujícím, '<img src="x" onerror=HACKS()>' To by odeslalo chybu a umožnilo jim vložit kód z chybového volání, v tomto případě jeho HACKS() Místo toho u obsahu zavoláme dezinfekční prostředek pomocí metody escape, z níž se stane:

`app.innerHTML =
'';

Toto je zakódovaná syntaxe
<img src="x" onerror="HACKS">

(naše hacky)

a odstraníme jakékoli označení a získáme náš zdroj zpět bez jakékoli injekce.

var sanitizeHTML = function (str) {
return str.replace(/[^\w. ]/gi, function (c) {
return '&#' + c.charCodeAt(0) + ';';
});
};

Tento kód vezme uživatelem odeslaný (str) a zakóduje jej (vyčistí) a vrátí další řetězec (str) vyčištěné verze.

const Hac = '" onerror="alert(\'XSS Attack\')"';

//Inject our dynamic element into the UI
app.innerHTML = '<img src="' + sanitizeHTML(thirdPartySrc) + '">';
Toto je jen příklad kódování vlastnosti, pokud chcete povolit nějaké značkování, budete potřebovat knihovnu prvků/metod ze seznamu povolených.

  1. Používejte rámec/knihovnu Používání knihovny jako REACT, Angular nebo jQuery. Knihovny obvykle používají číslo 2 pod kapotou a používají srozumitelnou syntaxi, aby byl váš kód srozumitelnější a zapisovatelný. Toto je podle mého názoru nejlepší možnost, protože jsou VELMI dobře otestované a každý kodér by je měl považovat za spolehlivé.

Otočit kredity
Nyní, až příště použijete knihovnu/rámec, můžete ocenit veškerou práci, kterou za vás udělá únikový kód, který knihovna zpracuje.
VELKÉ DÍKY:
Element.innerHTML
gomakethings
Dekodér
Bez těchto zdrojů bych neměl ponětí, kde s tím začít, a byly velmi informativní v tomto procesu učení.