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

0

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?

0

http://mustache.github.io

Na samej górze:

Logic-less templates

Nie nada się z tego co przejrzałem README

1
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

0

@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?

1

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.

0
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

2

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.

1
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.

0
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).

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0