الأمن

Pivotick يعمل بالكامل في المتصفح: لا يوجد خادم ولا جلسة ولا استمرار له الخاصة. الحدود المهمة هي الحدود بين بيانات الرسم البياني الخاصة بك وDOM لصفحتك — Pivotick يعرض البيانات التي قمت بتسليمها في المستند الذي يمتلكه تطبيقك.

إذا كانت هذه البيانات تأتي من مكان لا يمكنك التحكم فيه بشكل كامل - تغذية معلوماتية عن التهديدات، أو مرآة CVE، أو مجموعة البيانات المستوردة، وتحميل مستخدم آخر - تعامل معها على أنها غير موثوق بها، واقرأ بقية هذه الصفحة.

ماذا Pivotick يضمن

يتم إدراج كل ما تعرضه المكتبة من بياناتك كـ نص، وليس ترميزًا. هذا يغطي تسميات العقدة والحافة والأوصاف والمعرفات ومفاتيح الخصائص والقيم ومحتوى الملاحظة:

• تتم كتابة التسميات والأوصاف وأسماء/قيم الخصائص بـ textContent.
• محتوى الملاحظة هو Markdown، ويتم عرضه بـ marked ثم تطهيره باستخدام DOMPurify ضد القائمة المسموح بها من العلامات تخفيض السعر نفسها تنتج. <style>، عناصر النموذج والسمات المضمنة style ليست موجودة عليه.
• يتم تعقيم علامة style.svgIcon (ملف تعريف SVG) قبل أن تصل إلى المستند، لذا حدث يتم تجريد المعالجات <script> و<foreignObject>، وكذلك <style> و<a>. ان السطر <style> لا يتم تحديد نطاقه على الأيقونة، وسيحول <a> تحديد العقدة إلى الملاحة. السمات التي بقيت على قيد الحياة هي قائمة السماح SVG الإضافية الخاصة بـ DOMPurify dominant-baseline وalignment-baseline، لذلك يمكن توسيط النص بالطريقة Pivotick مراكز الحروف الرسومية الخاصة بها. تمت إزالة <use> تمامًا، لذا فإن رموز الكائنات المضمنة بدلاً من ذلك الرجوع إليهم.
• يقتصر style.imagePath على المخططات http: وhttps: وdata: وblob:.
• الألوان من البيانات، العقدة style.color والملاحظة color، يجب تحليلها كـ CSS الألوان قبل أن تصل إلى المستند، لذا لا يمكنهم تهريب url() إلى background.
• قيم الخاصية المقدمة كروابط تحمل rel="noopener noreferrer"، وأي قيم تتركك الأصل، //host/path متضمن، افتحه في علامة تبويب جديدة بدلاً من استبدال علامة تبويبك.

لذلك يتم عرض string دائمًا كنص. أينما يقبل الخيار string | HTMLElement، يؤدي إرجاع السلسلة إلى الحصول على نص؛ لتقديم HTML الخاصة بك، وبناء و إرجاع 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
} }

تم التغيير في 1.4.0 / 1.5.0

قامت الإصدارات السابقة بتحليل سلاسل مثل HTML — قيم الخاصية في الإصدار 1.3.0 والإصدارات الأقدم، كل أخرى خيار string | HTMLElement (اللوحات الإضافية، وإدخالات قائمة السياق، والعارضين المخصصين) حتى 1.4.0. إذا كنت تعتمد على ذلك لإدخال العلامات، فانتقل إلى إرجاع عنصر.

موثوق-HTML أحواض

توجد بعض الخيارات على وجه التحديد حتى تتمكن من توفير العلامات الخاصة بك. Pivotick يدخل ما لك أعطها حرفيًا، لذا لا تقم أبدًا ببناء هذه البيانات من بيانات غير موثوقة:

الخيار	أين
rawHeader / rawBody	خيارات Modal وSlidePanel
render.defaultNodeStyle.html	محتويات العقدة مرسومة في <foreignObject>

إذا كنت بحاجة إلى بيانات داخل أحد هذه العناصر، فضعها باستخدام textContent على العنصر الذي قمت بإنشائه، بدلاً من استيفاءها في سلسلة ترميزية:

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

الطلبات الصادرة

يمكن للعقد الرجوع إلى الصور عبر style.imagePath أو <image href> بالداخل style.svgIcon. يؤدي عرض مثل هذه العقدة إلى جعل متصفحات المستخدمين لديك تجلب عنوان URL هذا. إذا جاء عنوان URL من مصدر غير موثوق به البيانات، ومن كتبها يعلم أنه تم عرض الرسم البياني، بالإضافة إلى عنوان IP الخاص بالعارض، التوقيت وUser-Agent — بكسل التتبع.

لا يمكن لقيود النظام أن تمنع ذلك، لأنه يجب السماح بـ https: حتى تتمكن الميزة من ذلك العمل على الإطلاق. إذا كانت بياناتك غير موثوقة وهذا يهمك، فقم إما بتجريد الصورة أو إعادة كتابتها المراجع قبل تسليم البيانات، أو تقييدها بسياسة أمان المحتوى.

سياسة أمان المحتوى الموصى بها

Pivotick لا يحتاج إلى eval ولا مضمّن <script>، لذا فهو يعمل بموجب سياسة صارمة. CSP هو أرخص طريقة لتخفيف أي حقنة — في المكتبة، أو في الكود الخاص بك، أو في أي مكان آخر التبعية:

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 بدون 'unsafe-inline' هو ما يحيد معالجات الأحداث المحقونة.
• img-src هو المكان الذي يمكنك من خلاله تحديد صور عقدة المضيفين التي قد تأتي منها.
• form-action الحدود التي يمكن أن ينشر فيها أي نموذج محقون، مهما كان ما يقوله action.
• style-src 'unsafe-inline' مطلوب حاليًا: يقوم العارض بتعيين الأنماط المضمنة، و عادةً ما يتم إدخال ورقة أنماط Pivotick بواسطة أداة التجميع الخاصة بك. قم بتقديم CSS كملف واستخدم ملفًا nonce أو hash إذا كنت بحاجة إلى إسقاطه.

الإبلاغ عن ثغرة أمنية

يرجى الإبلاغ عن نقاط الضعف المشتبه بها من خلال GitHub نصائح أمنية بل من قضية عامة.