Developers
Page sandbox protocol
A page is one self-contained HTML document. The console runs it in an iframe with sandbox="allow-scripts": no same-origin access, no network, and a content security policy that blocks outside requests. The page talks to the console only through postMessage.
Messages
| Direction | Message | Meaning |
|---|---|---|
| Page → console | saveslot:ready | The page has loaded and asks for theme variables |
| Console → page | saveslot:theme | Current theme colours as CSS variables |
| Page → console | saveslot:query | Run one of the page's declared queries |
| Console → page | saveslot:result | The query result |
| Page → console | saveslot:height | Content height, so the console can size the frame |
Queries that were not declared when the page was published are ignored.
Example
<script>
parent.postMessage({ type: 'saveslot:ready' }, '*');
addEventListener('message', (e) => {
const m = e.data || {};
if (m.type === 'saveslot:theme') Object.assign(document.documentElement.style, m.vars);
if (m.type === 'saveslot:result' && m.query === 'sleep_14d') draw(m.rows);
});
parent.postMessage({ type: 'saveslot:query', query: 'sleep_14d' }, '*');
new ResizeObserver(() => parent.postMessage({ type: 'saveslot:height', height: document.body.scrollHeight }, '*'))
.observe(document.body);
</script>