Bezpieczny sposób na umożliwienie użytkownikom używania własnych "templatek" na stronie

Hej,
Robię taki projekt, gdzie użytkownicy mogą do bazy danych wrzucić sobie dane w JSON, więc totalna dowolność typu danych i dostępnych "kolumn".

Na froncie chcę potem wyświetlać tabelkę z danymi tego użytkownika, gdzie użytkownik na widoku "listy" swoich danych widzi wiersze i wybrane przez siebie kolumny, ale chciałbym umożliwić użytkownikom renderowanie treści wewnątrz komórki w wybranej kolumnie wg własnego kodu.

Np. użytkownik doda sobie takie dane:

{
  name: "Jan",
  surname: "Kowalski",
  nick: "Janu$h",
}

I chciałbym, żeby mógł sobie zrobić komórkę wg np: takiej logiki (przykład jako template string w js, ale jęyzk templatki może w ogóle nie przypominać JS):

<strong>${data.nick ? data.nick : (data.name + " " + data.surname)}</strong>

Czyli potrzebuję w tym systemie templatek, żeby się dało:

• uzyskać kod HTML jako wynik (potem przejadę go sanitizerem, żeby pousuwać onclicki itd)
• mieć możliwość tworzenia warunków
• mieć możliwość podstawowej ewaluacji wartości (operacje matematyczne na liczbach, łączenie stringów, substring, itd)

Całość chcę uruchamiać już w przeglądarce klienta, ale chciałbym uniknąć jakichś "self-xssów": wywoływania alert()ów, modyfikacji globalnych zmiennych, dostępu do DOM itd.

Czy znacie jakiś system templatek w js, co coś takiego umożliwi? Jak widzę na jaki pomysł wpadłem to aż mi samemu się słabo robi i przypominają się dziury Angulara 1 i jego "piaskownicy", ale może jest już jakieś dojrzałe rozwiązanie?

mustache.js ?

http://mustache.github.io

Na samej górze:

Logic-less templates

Nie nada się z tego co przejrzałem README

dzek69 napisał(a):

http://mustache.github.io

Na samej górze:

Logic-less templates

Nie nada się z tego co przejrzałem README

Mój błąd. To handlebars.js było rozbudowaną o ify wersją mustache

@KamilAdam:a znasz jakiś dobry helper do matematyki? coś co pozwoli wykonać operację w stylu (x + y) / a * 100 ?

Szkoda, że nie ma tego wbudowane, może ktoś zna coś jeszcze?

Nunjucks
Aktualnie mój pierwszy wybór jako system templatek dla JS. Znacznie lepszy od handlebars czy pug.

Zapewniają sporo swobody, dlatego wyzwaniem może być, by użytkownik nie zrobił niczego głupiego.

m31 napisał(a):

Zapewniają sporo swobody, dlatego wyzwaniem może być, by użytkownik nie zrobił niczego głupiego.

No właśnie wydaje mi się, że musiałbym połowę tego "wyłączyć" i dobrze upilnować. Łatwo wtedy o błąd. Raczej się nie sprawdzi, po prostu coś budowane z zupełnie inną myślą niż moje potrzeby

Taka mała dygresja, dopóki ten templejt nie jest współdzielony z innymi użytkownikami to bym się nie przejmował self-xssami. Przeglądarki bez problemu pozwalają dokleić dowolny js i go wykonać w kontekście dowolnej strony np Tampermonkey. Jedyne co może ograniczyć trochę ten proceder to restrykcyjne ustawienie Content Security Policy.

dzek69 napisał(a):

(potem przejadę go sanitizerem, żeby pousuwać onclicki itd)

A za kilka lat w JS pojawi się obsługa nowych zdarzeń i będziesz miał w systemie zabezpieczeń dziury jak niektóre stare interfejsy, które nie przewidziały, że kiedyś pojawi się np. onerror. Jedyne bezpieczne podejście to coś w stylu np. BBCode. Stosujesz własne znaczniki, które twój własny algorytm tłumaczy do HTML-a i nie akceptuje niczego, co nie jest gołym i poprawnym znacznikiem.

Freja Draco napisał(a):

A za kilka lat w JS pojawi się obsługa nowych zdarzeń i będziesz miał w systemie zabezpieczeń dziury jak niektóre stare interfejsy, które nie przewidziały, że kiedyś pojawi się np. onerror. Jedyne bezpieczne podejście to coś w stylu np. BBCode. Stosujesz własne znaczniki, które twój własny algorytm tłumaczy do HTML-a i nie akceptuje niczego, co nie jest gołym i poprawnym znacznikiem.

@Freja Draco: Wystarczy stosować białą listę zamiast czarnej listy :)

neves napisał(a):

Taka mała dygresja, dopóki ten templejt nie jest współdzielony z innymi użytkownikami to bym się nie przejmował self-xssami. Przeglądarki bez problemu pozwalają dokleić dowolny js i go wykonać w kontekście dowolnej strony np Tampermonkey. Jedyne co może ograniczyć trochę ten proceder to restrykcyjne ustawienie Content Security Policy.

@neves: Być może chciałbym współdzielić właśnie, sam jeszcze nie wiem. Rozszerzenia to inny temat. CSP też można napisać rozszerzeniami, więc generalnie nie ma co wchodzić w te tematy - użytkownik może również sam wydać swoje hasło, bo go ktoś o nie poprosi (nawet bez podszywania się pod kogokolwiek, jeżeli użytkownik jest tępy).