Objektový WYSIWYM

V předchozím kvízu, Kvíz - Objektově orientované programování v PHP, jsme si ověřili nabyté zkušenosti z kurzu.

Ukázka editoru WYSIWYM v PHP. Aplikace byla vytvořena do soutěže Machr na PHP za týden 24 v roce 2015. Aplikace je psaná objektově a využívá principu polymorfismu. Aplikace obsahuje ochranu proti útoku XSS.

WYSIWYM

WYSIWYM je editor textu, který ukazuje obsah tak jak bude vypadat a různé prvky textu jsou v něm označeny. Ve vstupu pro WYSIWYM lze vidět jednotlivě označené části textu. Krom WYSIWYM existuje ještě WYSIWYG (G na konci místo M) který funguje podobně, akorát přímo vidíte to,co bude výsledkem (nastylovány text).

Prvky WYSIWYM

Existuje několik variant,jak jsou prvky textu označovány. Zadání soutěže řeklo, že máme využít formátu Texy, který říká, že text by měl být označován následovně:

Nadpis1
#######

Odstavec
další řádek odstavce se neodřádkuje.

**Tučné** písmo a *kurzíva*

Nadpis 2
========

- položka seznamu1
- položka seznamu2

"http://www.itnetwork.cz":itnetwork

[* obrazek.png .(Obrázek) *]

Tady tento formát se má převést na formát HTML, který se pak zobrazí uživateli. Vstupem tedy bude na HTML stránce víceřádkové textové políčko.

Polymorfismus

Polymorfismus zde najdeme u rozhraní IConvertor což zastupuje převodník nějakého prvku. Implementovány jsou prvky nadpisu, odkazu, tučného písma, atd.

Dědičnost

Najdeme zde využité dědičnosti, přece nebudeme zvlášť implementovat nadpis1 a nadpis2 nebo tučný text a kurzívu. Vždyť to je přece úplně stejné!

Ochrana proti XSS

V článku Obrana proti útoku XSS v PHP si můžete přečíst jak XSS funguje. V jednoduchosti jde o to, že když se ve vstupu objeví <script>blablabla</script>, tak to samozřejmě nemůže fungovat, protože pak by si na naší stránce mohl pouštět, kdo chce, co chce.

Implementované to mám tak, že celý dokument naparsuju jako XML a pak rekurzivně projdu všechny elementy a ověřím jejich tag. Whitelist s tagy lze volitelně předat metodě pro ověřování, pokud udán nebude, strážce XSS si ho zjistí sám, tak že všechny převaděče požádá o seznam jimi povolených elementů (právě jsme narazili na druhou potřebnou metodu v rozhraní IConvertor).

Pokud rekurzí procházený element není na whitelistu jeho tag bude nahrazen elementem span, což je neutrální element.

Ke stažení je kompletně funkční WYSIWYM editor, který je také dočasně dostupný na jednom z mých webů .

Galerie