feat(analytics): export dashboard to pdf

[jordojordo]

Summary

POC

This will add an available function to the DashboardRenderer for exporting a dashboard as a PDF. It's very bare-bones at the moment, no header/footer, timestamp, etc.

It uses snapdom to create a canvas of the dom, then provides the canvas to jspdf to generate a PDF from the canvas. Some calculation is performed to ensure tiles aren't split between pages but attempts to retain the layout of a dashboard.

Sandbox demo

export-pdf.webm

One thing that is immediately apparent is the inability of snapdom to properly capture the Map chart into a canvas, some investigation would be needed to fix this.

Snapdom seemed the most capable and well maintained when comparing with html2canvas. jsPDF is probably not the best library as it's a bit out of date, but there are plenty of alternatives that could be considered.

[kongponents-bot]

🔴 PR audit failed. 🔴

🔥 PNPM Audit issues detected.

┌─────────────────────┬────────────────────────────────────────────────────────┐
│ critical            │ jsPDF has Local File Inclusion/Path Traversal          │
│                     │ vulnerability                                          │
├─────────────────────┼────────────────────────────────────────────────────────┤
│ Package             │ jspdf                                                  │
├─────────────────────┼────────────────────────────────────────────────────────┤
│ Vulnerable versions │ <=3.0.4                                                │
├─────────────────────┼────────────────────────────────────────────────────────┤
│ Patched versions    │ >=4.0.0                                                │
├─────────────────────┼────────────────────────────────────────────────────────┤
│ Paths               │ packages__analytics__dashboard-renderer>jspdf          │
├─────────────────────┼────────────────────────────────────────────────────────┤
│ More info           │ https://github.com/advisories/GHSA-f8cm-6447-x5h2      │
└─────────────────────┴────────────────────────────────────────────────────────┘
┌─────────────────────┬────────────────────────────────────────────────────────┐
│ critical            │ jsPDF has HTML Injection in New Window paths           │
├─────────────────────┼────────────────────────────────────────────────────────┤
│ Package             │ jspdf                                                  │
├─────────────────────┼────────────────────────────────────────────────────────┤
│ Vulnerable versions │ <=4.2.0                                                │
├─────────────────────┼────────────────────────────────────────────────────────┤
│ Patched versions    │ >=4.2.1                                                │
├─────────────────────┼────────────────────────────────────────────────────────┤
│ Paths               │ packages__analytics__dashboard-renderer>jspdf          │
├─────────────────────┼────────────────────────────────────────────────────────┤
│ More info           │ https://github.com/advisories/GHSA-wfv2-pwc8-crg5      │
└─────────────────────┴────────────────────────────────────────────────────────┘
┌─────────────────────┬────────────────────────────────────────────────────────┐
│ high                │ jsPDF Bypass Regular Expression Denial of Service      │
│                     │ (ReDoS)                                                │
├─────────────────────┼────────────────────────────────────────────────────────┤
│ Package             │ jspdf                                                  │
├─────────────────────┼────────────────────────────────────────────────────────┤
│ Vulnerable versions │ <3.0.1                                                 │
├─────────────────────┼────────────────────────────────────────────────────────┤
│ Patched versions    │ >=3.0.1                                                │
├─────────────────────┼────────────────────────────────────────────────────────┤
│ Paths               │ packages__analytics__dashboard-renderer>jspdf          │
├─────────────────────┼────────────────────────────────────────────────────────┤
│ More info           │ https://github.com/advisories/GHSA-w532-jxjh-hjhj      │
└─────────────────────┴────────────────────────────────────────────────────────┘
┌─────────────────────┬────────────────────────────────────────────────────────┐
│ high                │ jsPDF Denial of Service (DoS)                          │
├─────────────────────┼────────────────────────────────────────────────────────┤
│ Package             │ jspdf                                                  │
├─────────────────────┼────────────────────────────────────────────────────────┤
│ Vulnerable versions │ <=3.0.1                                                │
├─────────────────────┼────────────────────────────────────────────────────────┤
│ Patched versions    │ >=3.0.2                                                │
├─────────────────────┼────────────────────────────────────────────────────────┤
│ Paths               │ packages__analytics__dashboard-renderer>jspdf          │
├─────────────────────┼────────────────────────────────────────────────────────┤
│ More info           │ https://github.com/advisories/GHSA-8mvj-3j78-4qmw      │
└─────────────────────┴────────────────────────────────────────────────────────┘
┌─────────────────────┬────────────────────────────────────────────────────────┐
│ high                │ jsPDF has PDF Injection in AcroFormChoiceField that    │
│                     │ allows Arbitrary JavaScript Execution                  │
├─────────────────────┼────────────────────────────────────────────────────────┤
│ Package             │ jspdf                                                  │
├─────────────────────┼────────────────────────────────────────────────────────┤
│ Vulnerable versions │ <=4.0.0                                                │
├─────────────────────┼────────────────────────────────────────────────────────┤
│ Patched versions    │ >=4.1.0                                                │
├─────────────────────┼────────────────────────────────────────────────────────┤
│ Paths               │ packages__analytics__dashboard-renderer>jspdf          │
├─────────────────────┼────────────────────────────────────────────────────────┤
│ More info           │ https://github.com/advisories/GHSA-pqxr-3g65-p328      │
└─────────────────────┴────────────────────────────────────────────────────────┘
┌─────────────────────┬────────────────────────────────────────────────────────┐
│ high                │ jsPDF Vulnerable to Denial of Service (DoS) via        │
│                     │ Unvalidated BMP Dimensions in BMPDecoder               │
├─────────────────────┼────────────────────────────────────────────────────────┤
│ Package             │ jspdf                                                  │
├─────────────────────┼────────────────────────────────────────────────────────┤
│ Vulnerable versions │ <=4.0.0                                                │
├─────────────────────┼────────────────────────────────────────────────────────┤
│ Patched versions    │ >=4.1.0                                                │
├─────────────────────┼────────────────────────────────────────────────────────┤
│ Paths               │ packages__analytics__dashboard-renderer>jspdf          │
├─────────────────────┼────────────────────────────────────────────────────────┤
│ More info           │ https://github.com/advisories/GHSA-95fx-jjr5-f39c      │
└─────────────────────┴────────────────────────────────────────────────────────┘
┌─────────────────────┬────────────────────────────────────────────────────────┐
│ high                │ jsPDF has a PDF Object Injection via Unsanitized Input │
│                     │ in addJS Method                                        │
├─────────────────────┼────────────────────────────────────────────────────────┤
│ Package             │ jspdf                                                  │
├─────────────────────┼────────────────────────────────────────────────────────┤
│ Vulnerable versions │ <4.2.0                                                 │
├─────────────────────┼────────────────────────────────────────────────────────┤
│ Patched versions    │ >=4.2.0                                                │
├─────────────────────┼────────────────────────────────────────────────────────┤
│ Paths               │ packages__analytics__dashboard-renderer>jspdf          │
├─────────────────────┼────────────────────────────────────────────────────────┤
│ More info           │ https://github.com/advisories/GHSA-9vjf-qc39-jprp      │
└─────────────────────┴────────────────────────────────────────────────────────┘
┌─────────────────────┬────────────────────────────────────────────────────────┐
│ high                │ jsPDF Affected by Client-Side/Server-Side Denial of    │
│                     │ Service via Malicious GIF Dimensions                   │
├─────────────────────┼────────────────────────────────────────────────────────┤
│ Package             │ jspdf                                                  │
├─────────────────────┼────────────────────────────────────────────────────────┤
│ Vulnerable versions │ <4.2.0                                                 │
├─────────────────────┼────────────────────────────────────────────────────────┤
│ Patched versions    │ >=4.2.0                                                │
├─────────────────────┼────────────────────────────────────────────────────────┤
│ Paths               │ packages__analytics__dashboard-renderer>jspdf          │
├─────────────────────┼────────────────────────────────────────────────────────┤
│ More info           │ https://github.com/advisories/GHSA-67pg-wm7f-q7fj      │
└─────────────────────┴────────────────────────────────────────────────────────┘
┌─────────────────────┬────────────────────────────────────────────────────────┐
│ high                │ jsPDF has a PDF Injection in AcroForm module allows    │
│                     │ Arbitrary JavaScript Execution                         │
│                     │ (RadioButton.createOption and "AS" property)           │
├─────────────────────┼────────────────────────────────────────────────────────┤
│ Package             │ jspdf                                                  │
├─────────────────────┼────────────────────────────────────────────────────────┤
│ Vulnerable versions │ <4.2.0                                                 │
├─────────────────────┼────────────────────────────────────────────────────────┤
│ Patched versions    │ >=4.2.0                                                │
├─────────────────────┼────────────────────────────────────────────────────────┤
│ Paths               │ packages__analytics__dashboard-renderer>jspdf          │
├─────────────────────┼────────────────────────────────────────────────────────┤
│ More info           │ https://github.com/advisories/GHSA-p5xg-68wr-hm3m      │
└─────────────────────┴────────────────────────────────────────────────────────┘
┌─────────────────────┬────────────────────────────────────────────────────────┐
│ high                │ jsPDF has a PDF Object Injection via FreeText color    │
├─────────────────────┼────────────────────────────────────────────────────────┤
│ Package             │ jspdf                                                  │
├─────────────────────┼────────────────────────────────────────────────────────┤
│ Vulnerable versions │ <=4.2.0                                                │
├─────────────────────┼────────────────────────────────────────────────────────┤
│ Patched versions    │ >=4.2.1                                                │
├─────────────────────┼────────────────────────────────────────────────────────┤
│ Paths               │ packages__analytics__dashboard-renderer>jspdf          │
├─────────────────────┼────────────────────────────────────────────────────────┤
│ More info           │ https://github.com/advisories/GHSA-7x6v-j9x4-qf24      │
└─────────────────────┴────────────────────────────────────────────────────────┘
10 vulnerabilities found
Severity: 8 high | 2 critical

PR with those issues cannot be merged.

How to resolve:

• Check open renovate PRs for updates to the dependencies mentioned in the audit report
• try to update dependencies listed in the audit report to the latest versions
• use pnpm audit --fix to automatically fix issues

🔥 No test coverage detected.

This PR does not include any test coverage changes, but it modifies source code. Please add appropriate tests to cover the changes made in this PR.

If you believe this is a false positive or if there are valid reasons for not including test coverage changes, please request an exemption by adding the test-coverage-exempt label to the PR and ensure it is approved by one of those managers jillztom, nateslo, erichsend, lahabana, hangrao, ryanmoore, elen4, DaniellaFreese, mfollett, ValeryG.

[kongponents-bot]

Preview components from this PR in consuming application

In consuming application project install preview versions of shared packages generated by this PR:

@kong-ui-public/dashboard-renderer@pr-3055