Seguridad

Pivotick se ejecuta completamente en el navegador: no hay servidor, ni sesión ni persistencia de su propio. El límite que importa es el que existe entre los datos de tu gráfico y el DOM de tu página. Pivotick representa los datos que le entrega en el documento que posee su aplicación.

Si esos datos provienen de algún lugar que no controlas completamente (una fuente de información sobre amenazas, un espejo CVE, un conjunto de datos importado, carga de otro usuario: trátelo como si no fuera de confianza y lea el resto de esta página.

Qué garantiza Pivotick

Todo lo que la biblioteca representa a partir de sus datos se inserta como text, no como marcado. eso cubre etiquetas de nodo y borde, descripciones, identificadores, claves y valores de propiedad y contenido de notas:

• Las etiquetas, descripciones y nombres/valores de propiedades se escriben con textContent.
• El contenido de la nota es Markdown, se representa con marked y luego se desinfecta con DOMPurify contra una lista permitida de etiquetas Markdown él mismo produce. <style>, los elementos del formulario y los atributos style en línea no están en él.
• style.svgIcon el marcado se desinfecta (perfil SVG) antes de llegar al documento, por lo que el evento Los controladores, <script> y <foreignObject> se eliminan, al igual que <style> y <a>. un <style> en línea no tiene como alcance el ícono, y un <a> convertiría la selección del nodo en una navegación. Los atributos que sobreviven son la lista de permitidos SVG plus de DOMPurify. dominant-baseline y alignment-baseline, para que el texto se pueda centrar en la forma Pivotick centra sus propios glifos. <use> se elimina por completo, por lo que los símbolos de sprites en línea en lugar de haciendo referencia a ellos.
• style.imagePath está restringido a los esquemas http:, https:, data: y blob:.
• Los colores de los datos, el style.color de un nodo y el color de una nota, deben analizarse como CSS colores antes de que lleguen al documento, por lo que no pueden pasar de contrabando un url() a un background.
• Los valores de propiedad representados como enlaces llevan rel="noopener noreferrer", y cualquiera que salga de su origen, //host/path incluido, se abre en una nueva pestaña en lugar de reemplazar la tuya.

Por lo tanto, A string siempre se representa como texto. Siempre que una opción acepte string | HTMLElement, al devolver una cadena se obtiene un mensaje de texto; para renderizar el tuyo propio HTML, construir y devolver un 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
} }

Modificado en 1.4.0 / 1.5.0

Las versiones anteriores analizaban cadenas como HTML: valores de propiedad en 1.3.0 y versiones anteriores, uno por medio string | HTMLElement opción (paneles adicionales, entradas del menú contextual, renderizadores personalizados) hasta 1.4.0. Si confiaba en eso para inyectar marcado, cambie a devolver un elemento.

Confiable-HTML sumideros

Existen algunas opciones específicamente para que pueda proporcionar su propio marcado. Pivotick inserta lo que dale verbatim, así que nunca los crees a partir de datos que no sean de confianza:

Opción	donde
rawHeader / rawBody	Opciones Modal y SlidePanel
render.defaultNodeStyle.html	contenido del nodo dibujado en un <foreignObject>

Si necesita datos dentro de uno de estos, póngalos con textContent en un elemento que creó, en lugar de interpolarlo en una cadena de marcado:

// 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 })

Solicitudes salientes

Los nodos pueden hacer referencia a imágenes, a través de style.imagePath o un <image href> dentro de style.svgIcon. Representar un nodo de este tipo hace que los navegadores de sus usuarios busquen esa URL. Si la URL proviene de no confiable datos, quienquiera que lo haya escrito se entera de que se vio el gráfico, junto con la dirección IP del espectador, sincronización y User-Agent: un píxel de seguimiento.

Las restricciones del esquema no pueden evitar esto, porque se debe permitir https: para que la función funcione. trabajar en absoluto. Si sus datos no son de confianza y esto es importante para usted, elimine/reescriba la imagen referencias antes de entregar los datos, o restringirlos con una Política de Seguridad de Contenido.

Política de seguridad de contenido recomendada

Pivotick no necesita eval ni <script> en línea, por lo que funciona bajo una política estricta. Un CSP es la forma más barata de mitigar cualquier inyección: en la biblioteca, en su propio código o en otro dependencia:

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 sin 'unsafe-inline' es lo que neutraliza los controladores de eventos inyectados.
• img-src es donde determina de qué pueden provenir las imágenes del nodo host.
• form-action límites donde cualquier formulario inyectado podría publicarse, independientemente de lo que diga action.
• Actualmente se requiere style-src 'unsafe-inline': el renderizador establece estilos en línea y La hoja de estilo de Pivotick normalmente la inyecta su paquete. Sirva el CSS como un archivo y use un nonce o hash si es necesario eliminarlo.

Informar una vulnerabilidad

Informe las vulnerabilidades sospechosas a través de GitHub avisos de seguridad en lugar que un asunto público.