セキュリティ

Pivotick は完全にブラウザ内で実行されます。サーバー、セッション、永続性はありません。自分のもの。重要な境界は、グラフデータ と ページの DOM の間の境界です。 Pivotick は、渡されたデータをアプリケーションが所有するドキュメントにレンダリングします。

そのデータが、完全には制御できない場所 (脅威情報フィード、CVE ミラー、インポートされたデータセット、別のユーザーのアップロード — 信頼できないものとして扱い、このページの残りの部分を読んでください。

Pivotick が保証するもの

ライブラリがデータからレンダリングするものはすべて、マークアップではなく text として挿入されます。それはカバーしますノードとエッジのラベル、説明、ID、プロパティのキーと値、メモの内容:

ラベル、説明、プロパティ名/値は textContent で記述されます。
メモの内容は Markdown であり、marked でレンダリングされ、次にでサニタイズされます。タグ Markdown の許可リストに対して DOMPurify それ自体が生み出します。 <style>、フォーム要素とインライン style 属性は含まれていません。
style.svgIcon マークアップはドキュメントに到達する前にサニタイズ (SVG プロファイル) されるため、イベントハンドラー、<script> と <foreignObject> は、<style> と <a> と同様に削除されます。アンインライン <style> はアイコンにスコープされておらず、<a> はノードの選択をナビゲーション。生き残る属性は DOMPurify の SVG 許可リストに加えて 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 以前のプロパティ値は 1 つおきに 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 または style.svgIcon 内の <image href> を介してピクチャを参照できます。このようなノードをレンダリングすると、ユーザーのブラウザがその URL を取得します。 URL が信頼できないものからのものである場合データを作成した人は、グラフが閲覧されたことを閲覧者の IP アドレスとともに知ります。タイミングと User-Agent — 追跡ピクセル。

機能には https: を許可する必要があるため、スキームの制限によってこれを防ぐことはできません。まったく仕事をする。データが信頼できず、これが重要な場合は、イメージを削除または書き換えてくださいデータを引き渡す前に参照するか、Content-Security-Policy で制限します。

推奨されるコンテンツセキュリティポリシー

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';

'unsafe-inline' のない script-src は、挿入されたイベントハンドラーを無効化します。
img-src は、どのホストのノード画像が取得されているかを特定する場所です。
form-action は、action の内容に関係なく、挿入されたフォームが投稿できる境界です。
現在、style-src 'unsafe-inline' が必要です: レンダラーはインラインスタイルを設定し、 Pivotick のスタイルシートは通常、バンドラーによって挿入されます。 CSS をファイルとして提供し、削除する必要がある場合は、ノンスまたはハッシュを使用します。

脆弱性の報告

脆弱性の疑いがある場合は、次の方法で報告してください。むしろGitHubセキュリティ勧告公共の問題よりも。

セキュリティ ​

Pivotick が保証するもの ​

信頼できる-HTML シンク ​

アウトバウンドリクエスト ​

推奨されるコンテンツ セキュリティ ポリシー ​