Czy sanityzacja w React jest wbudowana?

Czy ktoś z tu obecnych orientuje się czy sanityzacja (ang. sanitizing) jest wbudowana w Reacta ? Z tego co zauważyłem to w Reacie jest na pewno wbudowane auto escaping. Jednak co z sanityzacją ? Czy można ją jedynie wykorzystać, gdy korzystamy z dangerouslySetInnerHTML={}?

Pojęcie "sanityzacji" nie ma specjalnego sensu w takich bibliotekach jak React.

Prześledźmy linię czasu wytwarzania takich aplikacji. Najpierw ludzie łączyli plaintekst z htmlem (np tak "<b>" + value + "</b>"), co powodowało masę problemów i luk w bezpieczeństwie. Nie każdy wiedział jak sobie z tym poprawnie poradzić (oczywiście wyjściem jest escape wartości w momencie budowania HTML'a), ale część ludzi wpadła na pomysł że to "wartości" same w sobie są niebezpieczne i zaczęły się pomysły żeby takie wartości już "zabezpieczać" (czyt. malformować) np w bazie - wtedy wymyślono określenie na taki zabieg - sanityzacja. Ale po pierwsze taki zabieg nie ma specjalnego sensu, bo to od początku nie ma sensu - jeśli tylko zrobimy poprawne budowanie wartości, to żadna sanityzacja nie jest potrzebna - po prostu poprawne traktowanie plaintekstu i HTML'a.

To jest jeśli sami budujemy HTMLa.

Jednak to nie specjalnie się odnosi do React'a, bo w reakcie korzystamy z interfejsu (albo JSX albo React.createElement()) który nawet nie przyjmuje HTML'a, a jedynie planetekst i dba o odpowiedni render tych wartości (oczywiście za wyjątkiem dangerouslySetInnerHTML={}). Żeby użyć dangerouslySetInnerHTML, musisz sam poprawnie zbudować markup HTML, a żeby to zrobić to musisz żonglować wartościami plain tekst oraz HTML, i tutaj lepiej poprawnie to zbudować - np escape'ując te plain tekstowe wartości.

No, ale co jeśli np. osoba atakująca chce wkleić jakiś niebezpieczny kod htmlowy/skryptowy do naszego inputa. To co z sanityzacją ? Ona jest wtedy defaultowo wykonywana ? Przecież wtedy auto escaping jest wykonywany, więc w którym momencie jest wykonywana sanityzacja w React ?

puchatek11 napisał(a):

No, ale co jeśli np. osoba atakująca chce wkleić jakiś niebezpieczny kod htmlowy/skryptowy do naszego inputa. To co z sanityzacją ? Ona jest wtedy defaultowo wykonywana ? Przecież wtedy auto escaping jest wykonywany, więc w którym momencie jest wykonywana sanityzacja w React ?

Pojęcie "niebezpiecznego kodu" to jest nie do końca mądre określenie wartości których można użyć do ekspoiltacji pewnych błędów popełnionych przez programistów - ale to nie jest tak że te wartości są niebezpieczne same w sobie, tylko zasdnicze oprogramowanie zostało niepoprawnie napisane.

Zróbmy krok wstecz:

Kiedy posługujesz się formatami tekstowymi (nie ważne jaki: HTML, JSON, Regexp, SQL, kod języka programowania, CSS, Markdown, jakikolwiek format tekstowy), to w momencie w którym zaczynasz go budować dynamicznie (np dynamiczne JSON'y, dynamiczne HTML'e), to zawsze budując go - musisz kierować się zasadami nałożonymi przez ten format. Kiedy budujesz HTML' musisz dbać o to by znaki <, >, " oraz & były poprawnie osadzone, jeśli chcesz dodać znak plaintekst ">" w HTML'u, to należy go zapiać jako >, podobnie z innymi formatami. Jeśli operujesz na takich tekstowych formatach niepoprawnie, to dostaniesz nieoczekiwane skutki - wartości albo się nie wyświetlą, albo wyświetlą się źle, albo zepsują inne wartości - a w najgorszym wypadku otworzą lukę w bezpieczeństwie. Ataki taki jak XSS lub SQLInjection dokładnie ilustrują skutki takiego niepoprawne obchodzenie się z formatami tekstowymi.

Ale kiedy korzystamy z Reacta, to nigdy nie walczymy z tekstowym formatem (HTML'em), a jedynie z interfejsem programistycznym: JSX lub React.createElement(), a więc ten błąd nie wystąpi.

Podsumowanie

Pojęcie "niebezpieczny kod htmlowy" to jest nietechniczna próba określenia wartości ilustrujących przypadek brzegowego naszej aplikacji, niepoprawnie radzącej sobie z formatami tekstowymi; i jako takie nie ma racji bytu poza takim kontekstem - jak np. React.

Sanityzacja rozumiana jako automatyczne eskejpowanie zmiennych wstawianych do widoków jest wbudowana.

Por. https://stackoverflow.com/a/51852579/941240

Wiktor Zychla napisał(a):

Sanityzacja rozumiana jako automatyczne eskejpowanie zmiennych wstawianych do widoków jest wbudowana.

Eskejpowanie zmiennych wstawianych do widoku to jest operacja konieczna podczas ręcznego budowania widoku; ale w Reacie nigdy nie mam takiej potrzeby - a więc takie eskejpowanie jest niepotrzebne.

To w jaki sposób React pod spodem umieszcza zbindowane wartości w Virtualnym DOM'ie, i w jaki sposób prezentuje je w przeglądarce to jest szczegół implementacyjny samej biblioteki.

Wiktor Zychla napisał(a):

Sanityzacja rozumiana jako automatyczne eskejpowanie zmiennych wstawianych do widoków jest wbudowana.

Por. https://stackoverflow.com/a/51852579/941240

Jak dla mnie automatyczne eskejpowanie i sanityzacja to dwa oddzielne pojęcia.

Riddle napisał(a):

puchatek11 napisał(a):

No, ale co jeśli np. osoba atakująca chce wkleić jakiś niebezpieczny kod htmlowy/skryptowy do naszego inputa. To co z sanityzacją ? Ona jest wtedy defaultowo wykonywana ? Przecież wtedy auto escaping jest wykonywany, więc w którym momencie jest wykonywana sanityzacja w React ?

Pojęcie "niebezpiecznego kodu" to jest nie do końca mądre określenie wartości których można użyć do ekspoiltacji pewnych błędów popełnionych przez programistów - ale to nie jest tak że te wartości są niebezpieczne same w sobie, tylko zasdnicze oprogramowanie zostało niepoprawnie napisane.

Zróbmy krok wstecz:

Kiedy posługujesz się formatami tekstowymi (nie ważne jaki: HTML, JSON, Regexp, SQL, kod języka programowania, CSS, Markdown, jakikolwiek format tekstowy), to w momencie w którym zaczynasz go budować dynamicznie (np dynamiczne JSON'y, dynamiczne HTML'e), to zawsze budując go - musisz kierować się zasadami nałożonymi przez ten format. Kiedy budujesz HTML' musisz dbać o to by znaki <, >, " oraz & były poprawnie osadzone, jeśli chcesz dodać znak plaintekst ">" w HTML'u, to należy go zapiać jako >, podobnie z innymi formatami. Jeśli operujesz na takich tekstowych formatach niepoprawnie, to dostaniesz nieoczekiwane skutki - wartości albo się nie wyświetlą, albo wyświetlą się źle, albo zepsują inne wartości - a w najgorszym wypadku otworzą lukę w bezpieczeństwie. Ataki taki jak XSS lub SQLInjection dokładnie ilustrują skutki takiego niepoprawne obchodzenie się z formatami tekstowymi.

Ale kiedy korzystamy z Reacta, to nigdy nie walczymy z tekstowym formatem (HTML'em), a jedynie z interfejsem programistycznym: JSX lub React.createElement(), a więc ten błąd nie wystąpi.

Podsumowanie

Pojęcie "niebezpieczny kod htmlowy" to jest nietechniczna próba określenia wartości ilustrujących przypadek brzegowego naszej aplikacji, niepoprawnie radzącej sobie z formatami tekstowymi; i jako takie nie ma racji bytu poza takim kontekstem - jak np. React.

No tak nie wystąpi, bo react ma wbudowane auto eskejpowanie w JSX. Jednak to nie odpowiada na moje pytanie. Czy w Reacie następuje w którymś momencie sanityzacja ? Czy jest to wbudowane w Reacta ?

puchatek11 napisał(a):

No tak nie wystąpi, bo react ma wbudowane auto eskejpowanie w JSX. Jednak to nie odpowiada na moje pytanie. Czy w Reacie następuje w którymś momencie sanityzacja ? Czy jest to wbudowane w Reacta ?

Ale nie ma potrzeby w ogóle taka operacja. React wystawia Ci interfejs, do którego po prostu wstawiasz wartości i tyle.

Pozwól, że przeczytam między wierszami. Mam wrażenie że pytając "Czy w React jest wbudowana sanityzacja?" tak na prawdę pytasz "Czy Ty musisz zrobić jakąś sanityzację?" - i na to pytanie odpowiedź brzmi: stanowcze nie.

Riddle napisał(a):

puchatek11 napisał(a):

No tak nie wystąpi, bo react ma wbudowane auto eskejpowanie w JSX. Jednak to nie odpowiada na moje pytanie. Czy w Reacie następuje w którymś momencie sanityzacja ? Czy jest to wbudowane w Reacta ?

Ale nie ma potrzeby w ogóle taka operacja. React wystawia Ci interfejs, do którego po prostu wstawiasz wartości i tyle.

Pozwól, że przeczytam między wierszami. Mam wrażenie że pytając "Czy w React jest wbudowana sanityzacja?" tak na prawdę pytasz "Czy Ty musisz zrobić jakąś sanityzację?" - i na to pytanie odpowiedź brzmi: stanowcze nie.

Ale czy w Reacie defaultowo występuje w którymś momencie sanityzacja, pomijając fakt, że jej nie trzeba robić ? Na stacku wyczytałem, że sanitizacja jest uruchamiana defaultowo w Reacie ?

puchatek11 napisał(a):

Ale czy w Reacie defaultowo występuje w którymś momencie sanityzacja, pomijając fakt, że jej nie trzeba robić ? Na stacku wyczytałem, że sanitizacja jest uruchamiana defaultowo w Reacie ?

Ale po co Ci wiedzieć to, po co zadajesz to pytanie?

W skrócie odpowiedź brzmi: nie jest uruchamiana, bo nie jest potrzebna. Sposób w jaki React buduje widok nie jest podatny na błedy, które sanityzacja ma naprawić.

Riddle napisał(a):

puchatek11 napisał(a):

Ale czy w Reacie defaultowo występuje w którymś momencie sanityzacja, pomijając fakt, że jej nie trzeba robić ? Na stacku wyczytałem, że sanitizacja jest uruchamiana defaultowo w Reacie ?

Ale po co Ci wiedzieć to, po co zadajesz to pytanie?

W skrócie odpowiedź brzmi: nie jest uruchamiana, bo nie jest potrzebna. Sposób w jaki React buduje widok nie jest podatny na błedy, które sanityzacja ma naprawić.

Po prostu tak z ciekawości chce wiedzieć. Ok, czyli sanityzacja nie jest defaultowo odpalana. Jedynie auto escapowanie jest defaultowo odpalane ? Wynika to np. z tego artykułu: https://pragmaticwebsecurity.com/articles/spasecurity/react-xss-part1.html "React applies auto-escaping"

"sanitizacja" html'a potrzebna ci jest tylko jeśli wstawiasz ręcznie html z zewnątrz (np poprzez innerHtml). Np chcesz wyświetlać email'e. Ale wtedy jest dużo więcej problemów jak np leak css'ów itd. I wtedy możesz to np boxować w iframie. Natomiast są to rzeczy niezwiązane z samym reactem.

puchatek11 napisał(a):

Ok, czyli sanityzacja nie jest defaultowo odpalana. Jedynie auto escapowanie jest defaultowo odpalane ?

jest tam gdzie jest to potrzebne, w większości miejsc nie jest to w ogóle potrzebne ze względu na sposób w jaki wartości są wstawiane do dokumentu (w sposób bezpieczny).
W skrócie w ogóle się tym nie powinieneś przejmować, jedyne co musisz wiedzieć to tak - react jest bezpieczny pod tym względem. Dopóki nie korzystasz z czegoś w stylu dangerouslySetInnerHTML. Jak coś ma w nazie dangerous to z jakiegoś powodu.