Objektový WYSIWYM

V predchádzajúcom cvičení, Riešené úlohy k 24.-26. lekciu OOP v PHP, sme si precvičili získané skúsenosti z predchádzajúcich lekcií.

Ukážka editora WYSIWYM v PHP. Aplikácia bola vytvorená do súťaže Machr na PHP za týždeň 24 v roku 2015. Aplikácia je písaná objektovo a využíva princíp polymorfizmu. Aplikácia obsahuje ochranu proti útoku XSS.

WYSIWYM

WYSIWYM je editor textu, ktorý ukazuje obsah tak ako bude vyzerať a rôzne prvky texte sú v ňom označené. Vo vstupe pre WYSIWYM možno vidieť jednotlivo označené časti textu. Okrem WYSIWYM existuje ešte WYSIWYG (G na konci miesto M) ktorý funguje podobne, akurát priamo vidíte to, čo bude výsledkom (nastylovány text).

Prvky WYSIWYM

Existuje niekoľko variantov, ako sú prvky textu označované. Zadanie súťaže povedalo, že máme využiť formátu Texy, ktorý hovorí, že text by mal byť označovaný nasledovne:

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) *]

Tu tento formát sa má previesť na formát HTML, ktorý sa potom zobrazí používateľovi. Vstupom teda bude na HTML stránke viacriadkové textové políčko.

Polymorfizmus

Polymorfizmus tu nájdeme pri rozhraní IConvertor čo zastupuje prevodník nejakého prvku. Implementované sú prvky nadpisu, odkazu, tučného písma, atď.

Dedičnosť

Nájdeme tu využité dedičnosti, predsa nebudeme zvlášť implementovať nadpis1 a nadpis2 alebo tučný text a kurzíva. Veď to je predsa úplne rovnaké!

Ochrana proti XSS

V článku Obrana proti útoku XSS v PHP si môžete prečítať ako XSS funguje. V jednoduchosti ide o to, že keď sa vo vstupe objaví <script>blablabla</script>, tak to samozrejme nemôže fungovať, pretože potom by si na našej stránke mohol púšťať, kto chce, čo chce.

Implementované to mám tak, že celý dokument naparsuju ako XML a potom rekurzívne prejdem všetky elementy a overím ich tag. Whitelist s tagy možné voliteľne odovzdať metóde pre overovanie, ak udaný nebude, strážca XSS si ho zistí sám, tak že všetky prevádzača požiada o zoznam nimi povolených elementov (práve sme narazili na druhú potrebnú metódu v rozhraní IConvertor).

Ak rekurzia prechádzanie element nie je na whitelistu jeho tag bude nahradený elementom span, čo je neutrálny element.

Na stiahnutie je kompletne funkčný WYSIWYM editor, ktorý je tiež dočasne dostupný na jednom z mojich webov.

V nasledujúcom kvíze, Záverečný test - Objektovo orientované programovanie v PHP, si vyskúšame nadobudnuté skúsenosti z kurzu.

Galéria