--- name: datalens-html-pages description: >- Use this skill to build or fix a standalone HTML page or report in DataLens. DataLens takes a whole self-contained HTML document — often an AI-generated report with tables, charts, and a CSV/download button — and renders it in a sandboxed, CSP-locked iframe, so normal web code silently breaks. Reach for it when generating such a page from scratch, and when one already in DataLens misbehaves: images, fonts, scripts, or CDN libraries blocked or throwing Content-Security-Policy errors; fetch/XHR/localStorage failing; charts blank; a download or Export button doing nothing; an upload rejected as too large or the wrong encoding; or the page needing to match the user's DataLens theme (light/dark) and language (ru/en). Also covers which CDNs and hosts are allowed and making the page fully self-contained. Not for DataLens chart cells or HTML-markup table columns. license: Apache-2.0 metadata: domain: datalens --- # DataLens HTML pages DataLens serves standalone HTML pages — whole documents, usually AI-generated reports — by storing them in a private bucket and rendering them in a **locked-down sandboxed iframe** from a **short-TTL presigned URL**, with a **Content-Security-Policy injected as a `` tag at upload**. You author a complete `` page; scripts run, but only from an allowlist of CDNs, and most browser APIs are blocked. > **Not this skill:** HTML *inside a chart* — markup functions, HTML-markup table cells, > `ChartEditor.generateHtml`. That is a different feature with a strict tag/attribute allowlist > and **no scripts at all**. This skill is only for standalone HTML *pages*. ## The runtime in one picture - **Sandboxed iframe:** `sandbox="allow-scripts"`, `allow=""`, `referrerpolicy="no-referrer"`, and crucially **no `allow-same-origin`** — the page runs in an opaque origin (parent also sends `Cross-Origin-Opener-Policy: same-origin`). Same-origin isolation depends on this; never assume same-origin access. - **Injected CSP** (you do **not** write it — the platform prepends it, idempotently): `default-src 'none'` with a small allowlist for `script`/`style`/`font`/`img`/`media`, and `connect-src`, `form-action`, `frame-src`, `object-src`, `worker-src`, `base-uri` all `'none'`. Full policy in [references/csp-and-sandbox.md](references/csp-and-sandbox.md). - **Served** from a presigned GET that expires in **10–30 seconds**, after a server-side permission check. Theme/language ride along as signed query params. The net effect: **make the page fully self-contained.** Inline your own CSS/JS (the CSP allows `'unsafe-inline'`/`'unsafe-eval'`), pull libraries only from allowlisted CDNs, and never rely on network, storage, or the parent page. ## Authoring rules **Allowed external resources** (everything else is blocked by the CSP): | Resource | Allowed from | |----------|--------------| | Scripts | `cdn.jsdelivr.net`, `cdnjs.cloudflare.com`, `cdn.tailwindcss.com`, `yastatic.net` (+ inline) | | Styles | the above **+** `fonts.googleapis.com` (+ inline) | | Fonts | `cdn.jsdelivr.net`, `cdnjs.cloudflare.com`, `fonts.gstatic.com`, `data:` | | Images | `yastatic.net`, `data:`, `blob:` | | Media | `data:`, `blob:` only | Load Google Fonts the standard way (`` CSS from `fonts.googleapis.com`, font files from `fonts.gstatic.com`). Mirror off-allowlist libraries (unpkg, plot.ly, d3js.org, jQuery) through jsdelivr/cdnjs. **Blocked — do not use** (they throw or silently fail): - **Storage:** `localStorage`, `sessionStorage`, `indexedDB`, `document.cookie`, Cache API → keep all state in memory. - **Network:** `fetch`, `XMLHttpRequest`, `WebSocket`, `EventSource`, `sendBeacon` — `connect-src` is `'none'`. **Inline your data into the page** instead of fetching it. - **Frames/objects/forms:** nested `