Beveiliging

Pivotick draait volledig in de browser: er is geen server, geen sessie en geen persistentie ervan eigen. De grens die ertoe doet, is die tussen uw grafiekgegevens en de DOM van uw pagina — Pivotick geeft de gegevens die u inlevert weer in het document waarvan uw toepassing eigenaar is.

Als die gegevens ergens vandaan komen waar u geen volledige controle over heeft: een feed met informatie over bedreigingen, een CVE-spiegel, een... geïmporteerde dataset, upload van een andere gebruiker – behandel deze als niet-vertrouwd en lees de rest van deze pagina.

Wat Pivotick garandeert

Alles wat de bibliotheek op basis van uw gegevens weergeeft, wordt ingevoegd als tekst, niet als opmaak. Dat dekt knooppunt- en randlabels, beschrijvingen, ID's, eigenschapssleutels en -waarden, en notitie-inhoud:

• Labels, beschrijvingen en namen/waarden van eigenschappen worden geschreven met textContent.
• De inhoud van de notitie is Markdown, weergegeven met marked en vervolgens opgeschoond met DOMPurify tegen een toelatingslijst met tags Markdown zelf produceert. <style>, de formulierelementen en inline style attributen staan ​​er niet op.
• style.svgIcon markup wordt opgeschoond (SVG profiel) voordat deze het document bereikt, dus gebeurtenis handlers, <script> en <foreignObject> worden gestript, evenals <style> en <a>. Een inline <style> heeft geen betrekking op het pictogram, en een <a> zou het selecteren van het knooppunt veranderen in een navigatie. De attributen die overblijven zijn de SVG allow-list plus van DOMPurify dominant-baseline en alignment-baseline, zodat tekst gecentreerd kan worden zoals Pivotick centreert zijn eigen symbolen. <use> wordt volledig verwijderd, dus inline sprite-symbolen in plaats van ernaar verwijzen.
• style.imagePath is beperkt tot de schema's http:, https:, data: en blob:.
• Kleuren uit de gegevens, de style.color van een knooppunt en de color van een notitie, moeten worden ontleed als CSS kleuren voordat ze het document bereiken, zodat ze een url() niet in een background kunnen smokkelen.
• Eigenschapswaarden die als links worden weergegeven, dragen rel="noopener noreferrer" en alle waarden die uw verlaten origin, //host/path inbegrepen, open in een nieuw tabblad in plaats van het jouwe te vervangen.

Een string wordt daarom altijd weergegeven als tekst. Waar een optie ook accepteert string | HTMLElement, als je een string retourneert, krijg je tekst; om je eigen HTML weer te geven, te bouwen en retourneer een HTMLElement:

// Renders the literal characters "<b>hi</b>"
propertiesPanel: { render: () => '<b>hi</b>' }

// Renders bold text
propertiesPanel: { render: () => {
    const el = document.createElement('b')
    el.textContent = 'hi'
    return el
} }

Gewijzigd in 1.4.0 / 1.5.0

Eerdere versies parseerden strings als HTML – eigenschapswaarden in 1.3.0 en eerder, elke andere string | HTMLElement optie (extra panelen, contextmenu-items, aangepaste renderers) tot 1.4.0. Als u daarop vertrouwde om markup te injecteren, schakel dan over naar het retourneren van een element.

Trusted-HTML zinkt

Er zijn een paar opties specifiek, zodat u uw eigen opmaak kunt opgeven. Pivotick voegt in wat jij geef het verbatim, dus bouw deze nooit op basis van niet-vertrouwde gegevens:

Optie	Waar
rawHeader / rawBody	Modal en SlidePanel opties
render.defaultNodeStyle.html	knooppuntinhoud getekend in een <foreignObject>

Als je gegevens nodig hebt in een van deze, plaats deze dan met textContent op een element dat je hebt gemaakt, in plaats van het te interpoleren in een opmaaktekenreeks:

// Unsafe: node.data.label lands in innerHTML
uiManager.createModal({ rawBody: true, body: `<h1>${node.getData().label}</h1>` })

// Safe
const title = document.createElement('h1')
title.textContent = node.getData().label
uiManager.createModal({ body: title })

Uitgaande verzoeken

Knooppunten kunnen verwijzen naar afbeeldingen, via style.imagePath of een <image href> binnen style.svgIcon. Door een dergelijk knooppunt weer te geven, halen de browsers van uw gebruikers die URL op. Als de URL afkomstig is van niet-vertrouwd gegevens, degene die het heeft geschreven, leert dat de grafiek is bekeken, samen met het IP-adres van de kijker, timing en User-Agent — een trackingpixel.

Schemabeperkingen kunnen dit niet voorkomen, omdat https: moet worden toegestaan voor de functie überhaupt werken. Als uw gegevens niet worden vertrouwd en dit voor u belangrijk is, kunt u de afbeelding verwijderen/herschrijven referenties voordat u de gegevens overdraagt, of beperk ze met een Content-Security-Policy.

Aanbevolen inhoudbeveiligingsbeleid

Pivotick heeft geen eval en geen inline <script> nodig, dus het werkt volgens een strikt beleid. Een CSP wel de goedkoopste manier om elke injectie af te zwakken – in de bibliotheek, in je eigen code of in een andere afhankelijkheid:

Content-Security-Policy:
    default-src 'self';
    script-src 'self';
    img-src 'self' data: blob: https://images.example.com;
    style-src 'self' 'unsafe-inline';
    form-action 'self';

• script-src zonder 'unsafe-inline' neutraliseert geïnjecteerde gebeurtenishandlers.
• img-src is waar u vastlegt van welke hosts-knooppuntafbeeldingen deze afkomstig kunnen zijn.
• form-action grenzen waar elk geïnjecteerd formulier kan worden geplaatst, wat de action ook zegt.
• style-src 'unsafe-inline' is momenteel vereist: de renderer stelt inline-stijlen in, en Het stylesheet van Pivotick wordt normaal gesproken door uw bundelprogramma geïnjecteerd. Serveer de CSS als bestand en gebruik a nonce of hash als je het wilt laten vallen.

Een kwetsbaarheid melden

Meld vermoedelijke kwetsbaarheden via GitHub beveiligingsadviezen liever dan een publieke kwestie.