trust(html)

Leírás

HTML vagy SVG karakterláncot alakít át nem escapelt HTML-lé vagy SVG-vé. Ne használja az m.trust függvényt nem tisztított felhasználói bemeneten!

Mindig próbáljon meg egy alternatív módszert alkalmazni, mielőtt az m.trust használatát megfontolná.

Szignatúra

vnode = m.trust(html)

Argumentum	Típus	Kötelező	Leírás
html	String	Igen	Egy HTML vagy SVG szöveget tartalmazó karakterlánc.
visszatérési érték	Vnode		Egy megbízható HTML vnode, amely a bemeneti karakterláncot reprezentálja.

Hogyan kell olvasni a szignatúrákat

Hogyan működik

Alapértelmezés szerint a Mithril.js minden értéket escape-el, hogy megelőzze a XSS injekciók nevű biztonsági problémák egy csoportját.

var userContent = "<script>alert('evil')</script>";
var view = m('div', userContent);

m.render(document.body, view);

// ekvivalens HTML
// <div>&lt;script&gt;alert('evil')&lt;/script&gt;</div>

Azonban néha kívánatos a formázott szöveg és formázási jelölések megjelenítése. Ennek az igénynek a kielégítésére az m.trust megbízható HTML vnode-okat hoz létre, amelyek HTML-ként jelennek meg.

var view = m('div', [m.trust("<h1>Itt van egy kis <em>HTML</em></h1>")]);

m.render(document.body, view);

// ekvivalens HTML
// <div><h1>Itt van egy kis <em>HTML</em></h1></div>

A megbízható HTML vnode-ok objektumok, nem karakterláncok; ezért nem lehet őket reguláris karakterláncokkal összefűzni.

Biztonsági szempontok

Győződjön meg arról, hogy az m.trust bemenete nem tartalmaz felhasználó által generált, rosszindulatú kódot. Ha egy nem tisztított HTML karakterláncot megbízhatónak jelöl meg, a benne lévő aszinkron JavaScript hívások a felhasználó engedélyeivel futnak.

Számos módja van annak, hogy egy HTML karakterláncba futtatható kódot helyezzenek el. A biztonsági támadások leggyakoribb módja az onload vagy onerror attribútumok hozzáadása az <img> vagy <iframe> tagekhez, valamint a kiegyensúlyozatlan idézőjelek, például a " onerror="alert(1) használata a futtatható kontextusok injektálására a nem tisztított karakterlánc interpolációkban.

var data = {};

// Példa sebezhető HTML karakterláncra
var description =
  "<img alt='" + data.title + "'> <span>" + data.description + '</span>';

// Támadás JavaScript-hez kapcsolódó attribútumok használatával
data.description = "<img onload='alert(1)'>";

// Támadás kiegyensúlyozatlan tagek használatával
data.description = "</span><img onload='alert(1)'><span";

// Támadás kiegyensúlyozatlan idézőjelek használatával
data.title = "' onerror='alert(1)";

// Támadás egy másik attribútum használatával
data.title = "' onmouseover='alert(1)";

// Támadás, amely nem használ JavaScriptet
data.description =
  "<a href='https://evil.com/login-page-that-steals-passwords.html'>Kattintson ide a további olvasáshoz</a>";

Számtalan nem nyilvánvaló módja van a rosszindulatú kód létrehozásának, ezért erősen ajánlott, hogy engedélyezett HTML tagek, attribútumok és attribútumértékek whitelistjét használja a blacklist helyett a felhasználói bemenet tisztításához. Erősen ajánlott, hogy megfelelő HTML parsert használjon a reguláris kifejezések helyett a tisztításhoz, mert a reguláris kifejezéseket rendkívül nehéz tesztelni minden határhelyzetre.

Szkriptek, amelyek nem futnak

Annak ellenére, hogy sok homályos módja van annak, hogy egy HTML karakterlánc JavaScriptet futtasson, a <script> tagek nem futnak, amikor egy HTML karakterláncban jelennek meg.

Történelmi okokból a böngészők figyelmen kívül hagyják a <script> tageket, amelyek az innerHTML-en keresztül kerülnek a DOM-ba. Ezt azért teszik, mert amint az elem kész (és így hozzáférhető innerHTML tulajdonsággal rendelkezik), a renderelő motorok nem tudnak visszalépni a parsing fázisba, ha a szkript valami olyasmit hív, mint a document.write("</body>").

Ez a böngésző viselkedés meglepő lehet egy jQuery-ből érkező fejlesztő számára. A Mithril.js követi a böngésző viselkedését. Ha a jQuery viselkedés kívánatos, akkor fontolja meg, hogy a kódot áthelyezi a HTML karakterláncból egy oncreate lifecycle methodba, vagy használja a jQuery-t (vagy implementálja újra a szkript parsing kódját).

Kerülje a HTML megbízását

Általános ökölszabályként kerülnie kell az m.trust használatát, kivéve, ha kifejezetten formázott szöveget jelenít meg, és nincs más módja a kívánt eredmények elérésének.

// KERÜLJE
m('div', m.trust('hello world'));

// INKÁBB
m('div', 'hello world');

Kerülje a vak másolást és beillesztést

Az m.trust gyakran helytelenül használják harmadik féltől származó szolgáltatásokkal való munka során, amikor az oktatóanyagok HTML kódot tartalmaznak, amit másolni és beilleszteni kell. A legtöbb esetben a HTML-t vnode-ok segítségével kell megírni (általában az m() segédeszközön keresztül).

Itt van a Facebook Like button példakódja:

<!-- Load Facebook SDK for JavaScript -->
<div id="fb-root"></div>
<script>
  (function (d, s, id) {
    var js,
      fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s);
    js.id = id;
    js.src = '//connect.facebook.net/en_US/sdk.js#xfbml=1';
    fjs.parentNode.insertBefore(js, fjs);
  })(document, 'script', 'facebook-jssdk');
</script>

<!-- Your like button code -->
<div
  class="fb-like"
  data-href="https://www.your-domain.com/your-page.html"
  data-layout="standard"
  data-action="like"
  data-show-faces="true"
></div>

És itt van, hogyan lehet refaktorálni egy Mithril.js komponenssé úgy, hogy elkerülje az m.trust használatát:

var FacebookLikeButton = {
  oncreate: function () {
    (function (d, s, id) {
      var js,
        fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s);
      js.id = id;
      js.src = '//connect.facebook.net/en_US/sdk.js#xfbml=1';
      fjs.parentNode.insertBefore(js, fjs);
    })(document, 'script', 'facebook-jssdk');
  },
  view: function () {
    return [
      m('#fb-root'),
      m(
        '.fb-like[data-href=https://www.your-domain.com/your-page.html][data-layout=standard][data-action=like][data-show-faces=true]'
      ),
    ];
  },
};

A fenti Mithril.js komponens egyszerűen átmásolja a script-tag kódját az oncreate hookba, és a fennmaradó HTML tageket a Mithril.js m() szintaxisával deklarálja.

Kerülje a HTML entitásokat

Az m.trust egyik gyakori helytelen használata az, hogy HTML entitásokhoz használják. Egy jobb megközelítés a megfelelő Unicode karakterek használata.

// KERÜLJE
m('h1', 'Coca-Cola', m.trust('™'));

// INKÁBB
m('h1', 'Coca-Cola™');

Az ékezetes karakterek Unicode karakterei megadhatók a megfelelő billentyűzetkiosztással, vagy használhatók billentyűparancsok a gyakori szimbólumokhoz (pl. Alt+0153 Windowsban, Option+2 Mac-en a ™ szimbólumhoz). Egy másik kapcsolódó módszer egy escapelt unicode kódpont beírása (pl. "\u2122" a ™ szimbólumhoz).

Minden karakternek, amely HTML entitásként ábrázolható, van Unicode megfelelője, beleértve a nem látható karaktereket is, mint például az   és az ­.

A kódolással kapcsolatos problémák elkerülése érdekében állítsa a fájl kódolását UTF-8-ra a JavaScript fájlban, valamint adja hozzá a <meta charset="utf-8"> meta tag-et a host HTML fájlban.