@botiverse/porthole 0.1.8 → 0.2.0

package/dist/server/server.js

@@ -1,7 +1,8 @@
 import { compile } from "../compile/compile.js";
 import { hostOriginProblem, maybeSameSite, originMatchesSource, parseOrigin, } from "../isolation/served.js";
 import { sandboxProxyDocument } from "../mcp/proxy.js";
-import { createKeys, newTicket, ticketId } from "./keys.js";
+import { base32, createKeys, newTicket, ticketId } from "./keys.js";
+import { randomBytes } from "./crypto.js";
 import { isHostLabel, reservedLabels } from "./naming.js";
 import { enterPage, pageScript, SESSION_PATH, statusPage } from "./pages.js";
 import { memoryTicketStore } from "./tickets.js";
@@ -14,6 +15,15 @@ const PREFIX = "/__porthole/";
 const DOCUMENT_PATH = /^\/__porthole\/d\/([a-z2-7]{16})$/u;
 /** Where a url-mode app's ticket is taken, before the app's own landing path. */
 const ENTER_PATH = "/__porthole/enter";
+/** Where a redirect entry's code is redeemed, before its clean address (P068). */
+const ENTRY_PATH = "/__porthole/entry";
+/** How long a redirect entry may take (the person may sign in on the way), and its code. */
+const ENTRY_STATE_MS = 5 * 60_000;
+const ENTRY_CODE_SECONDS = 60;
+/** How long an entered path is remembered, so an entry that kept no cookie doesn't loop. */
+const ENTERED_SECONDS = 60;
+const NONCE = /^[a-z2-7]{16}$/u;
+const MAX_PATH = 2_048;
 const LABEL = /^[a-z2-7]{24}$/u;
 /** A host's opaque subject and reason codes. */
 const SUBJECT_MAX = 512;
@@ -210,6 +220,18 @@ export function createServer(options) {
         }
     }
     const frameAncestors = options.hostOrigins.join(" ");
+    let authorizeUrl = null;
+    if (options.entry !== undefined) {
+        try {
+            authorizeUrl = new URL(options.entry.authorizeUrl);
+        }
+        catch {
+            throw new TypeError("entry.authorizeUrl must be an absolute URL");
+        }
+        if (!options.hostOrigins.includes(authorizeUrl.origin) || authorizeUrl.hash !== "") {
+            throw new TypeError(`entry.authorizeUrl must be on one of the host origins (${options.hostOrigins.join(", ")}), without a fragment`);
+        }
+    }
     const compiled = new Map();
     for (const [name, config] of Object.entries(options.configs)) {
         compiled.set(name, compile(config));
@@ -351,7 +373,7 @@ export function createServer(options) {
      * page that frames it; on a tab of its own, `Lax`. (Engines that keep no cookie in a cross-site
      * frame, measured: WebKit, still get the document, which comes with the ticket's answer.)
      */
-    function sessionCookie(request, record) {
+    function sessionCookie(request, record, path) {
         const sessionSeconds = record.sessionSeconds ?? DEFAULT_SESSION_SECONDS;
         const session = {
             i: record.instance,
@@ -359,18 +381,27 @@ export function createServer(options) {
             x: Date.now() + sessionSeconds * 1_000,
             ...(record.anonymous === true ? { a: 1 } : {}),
             ...(record.subject === undefined ? {} : { s: record.subject }),
+            ...(path === undefined ? {} : { p: path }),
         };
-        const framed = request.headers.get("sec-fetch-dest") !== "document";
         return [
             `${cookieName(keys.instanceKey(record.instance))}=${keys.sign(session)}`,
             "Path=/",
             "HttpOnly",
             `Max-Age=${sessionSeconds}`,
-            ...(framed
-                ? ["Secure", "SameSite=None", "Partitioned"]
-                : [...(secure ? ["Secure"] : []), "SameSite=Lax"]),
+            ...cookieContext(request),
         ].join("; ");
     }
+    /** A cookie's context: a third party's in a frame (partitioned), first-party `Lax` on a tab. */
+    function cookieContext(request) {
+        const framed = request.headers.get("sec-fetch-dest") !== "document";
+        return framed
+            ? ["Secure", "SameSite=None", "Partitioned"]
+            : [...(secure ? ["Secure"] : []), "SameSite=Lax"];
+    }
+    /** The cookie a redirect entry's browser holds while it is away (P068), by its nonce. */
+    const nonceCookie = (nonce) => cookieName(`n-${nonce}`);
+    /** What an entered path's nonce cookie says after its code was redeemed: the loop guard. */
+    const enteredMark = (pathname) => `e.${keys.instanceKey({ entered: pathname })}`;
     /** The access a request's own cookies give on `label`'s origin, for `key`'s instance or the app. */
     function accessOf(request, label, key) {
         let best = null;
@@ -417,6 +448,45 @@ export function createServer(options) {
         }
         return best;
     }
+    /** The access a request's cookies give to the document entered at `pathname` (P068). */
+    function accessAtPath(request, label, pathname) {
+        let best = null;
+        for (const [name, value] of cookiesOf(request)) {
+            if (!ourCookie(name)) {
+                continue;
+            }
+            const session = keys.verify(value);
+            if (!isRecord(session) ||
+                session.p !== pathname ||
+                typeof session.w !== "string" ||
+                typeof session.x !== "number" ||
+                session.x <= Date.now() ||
+                (session.s !== undefined && typeof session.s !== "string")) {
+                continue;
+            }
+            let instance;
+            try {
+                instance = cleanInstance(session.i);
+                if (instance.document.kind === "external" || nameOf(instance.scope) !== label) {
+                    continue;
+                }
+            }
+            catch {
+                continue;
+            }
+            if (best === null || session.x > best.expiresAt) {
+                best = {
+                    instance,
+                    viewer: session.w,
+                    origin: originOfLabel(label),
+                    expiresAt: session.x,
+                    ...(session.a === 1 ? { anonymous: true } : {}),
+                    ...(typeof session.s === "string" ? { subject: session.s } : {}),
+                };
+            }
+        }
+        return best;
+    }
     /** A taken ticket, if it is good for `label`'s origin. */
     async function take(ticket, label) {
         if (ticket === null || ticket.length === 0 || ticket.length > 128) {
@@ -471,6 +541,11 @@ export function createServer(options) {
         if (access === null) {
             return page(401, "This link has been used", "Content here opens once per link. Open it again from the app that showed it.", method, "session");
         }
+        return serveAccess(request, access, cookie);
+    }
+    /** The document an access opens, once the host's check lets it in. */
+    async function serveAccess(request, access, cookie) {
+        const method = request.method.toUpperCase();
         const refusal = await denied(request, access);
         if (refusal !== null) {
             return refusal;
@@ -485,6 +560,103 @@ export function createServer(options) {
         }
         return new Response(method === "HEAD" ? null : served.html, { status: 200, headers });
     }
+    /**
+     * A clean address without a cookie for it (P068): off to the host's authorize route with a
+     * signed state, the browser holding the state's nonce in a cookie of this origin. A path just
+     * entered whose cookie still didn't come back is a browser that keeps none here: no loop.
+     */
+    function beginEntry(request, url, label, to) {
+        const method = request.method.toUpperCase();
+        if (method !== "GET" && method !== "HEAD") {
+            return page(401, "Open this from the app", "Open this address in a browser.", method, "session");
+        }
+        const path = `${url.pathname}${url.search}`;
+        if (path.length > MAX_PATH) {
+            return page(414, "Address too long", "This address is too long to open.", method);
+        }
+        const mark = enteredMark(url.pathname);
+        if (cookiesOf(request).some(([name, value]) => ourCookie(name) && value === mark)) {
+            return page(401, "Open this in a new tab", "This browser keeps no sign-in for it inside a frame.", method, "cookies");
+        }
+        const nonce = base32(randomBytes(10));
+        const framed = request.headers.get("sec-fetch-dest") !== "document";
+        const state = keys.sign({
+            e: 1,
+            l: label,
+            p: path,
+            n: nonce,
+            x: Date.now() + ENTRY_STATE_MS,
+            f: framed ? 1 : 0,
+        });
+        const location = new URL(to);
+        location.searchParams.set("state", state);
+        return new Response(null, {
+            status: 302,
+            headers: {
+                location: location.href,
+                "set-cookie": [
+                    `${nonceCookie(nonce)}=1`,
+                    "Path=/",
+                    "HttpOnly",
+                    `Max-Age=${ENTRY_STATE_MS / 1_000}`,
+                    ...cookieContext(request),
+                ].join("; "),
+                "cache-control": "no-store",
+                "referrer-policy": "no-referrer",
+                "x-robots-tag": "noindex, nofollow",
+            },
+        });
+    }
+    /**
+     * Redeems a redirect entry's code (P068): once, on its own label, in the browser that began it
+     * (its nonce cookie comes with it). Sets the session and goes to the clean address, the code
+     * gone from the address bar and from any referrer.
+     */
+    async function redeem(request, url, label) {
+        const method = request.method.toUpperCase();
+        if (method !== "GET") {
+            return page(405, "Not allowed", "Open this link in a browser.", method);
+        }
+        const record = await take(url.searchParams.get("code"), label);
+        if (record?.entry === undefined) {
+            return page(403, "This sign-in link has been used", "It works once, for a short time. Open the address again.", method, "session");
+        }
+        const { nonce, path } = record.entry;
+        const named = nonceCookie(nonce);
+        if (!cookiesOf(request).some(([name, value]) => name === named && value === "1")) {
+            return page(401, "Open this in a new tab", "This browser keeps no sign-in for it inside a frame.", method, "cookies");
+        }
+        const origin = originOfLabel(label);
+        const target = new URL(path, origin);
+        const access = {
+            instance: record.instance,
+            viewer: record.viewer,
+            origin,
+            expiresAt: Date.now() + (record.sessionSeconds ?? DEFAULT_SESSION_SECONDS) * 1_000,
+            ...(record.anonymous === true ? { anonymous: true } : {}),
+            ...(record.subject === undefined ? {} : { subject: record.subject }),
+        };
+        const refusal = await denied(request, access);
+        if (refusal !== null) {
+            return refusal;
+        }
+        const external = record.instance.document.kind === "external";
+        const headers = new Headers({
+            location: `${origin}${target.pathname}${target.search}`,
+            "cache-control": "no-store",
+            "referrer-policy": "no-referrer",
+            "x-robots-tag": "noindex, nofollow",
+        });
+        headers.append("set-cookie", sessionCookie(request, record, external ? undefined : target.pathname));
+        headers.append("set-cookie", [
+            `${named}=${enteredMark(target.pathname)}`,
+            "Path=/",
+            "HttpOnly",
+            `Max-Age=${ENTERED_SECONDS}`,
+            ...cookieContext(request),
+        ].join("; "));
+        return new Response(null, { status: 303, headers });
+    }
     async function enter(request, url, label) {
         const method = request.method.toUpperCase();
         if (method !== "GET") {
@@ -574,6 +746,55 @@ export function createServer(options) {
             return page(502, "The app didn't answer", "Its server couldn't be reached.", method);
         }
     }
+    /** A one-time ticket (or entry code) for an instance the host decided a viewer may see. */
+    async function mint(instance, grant, entry) {
+        const clean = cleanInstance(instance);
+        check(clean);
+        const anonymous = grant.anonymous === true;
+        if (anonymous) {
+            if (grant.viewer !== undefined) {
+                throw new TypeError("An anonymous grant names no viewer");
+            }
+            if (clean.document.kind === "external") {
+                throw new TypeError("A url-mode app is never opened anonymously (P046)");
+            }
+        }
+        else if (typeof grant.viewer !== "string" ||
+            grant.viewer.length === 0 ||
+            grant.viewer.length > 512) {
+            throw new TypeError("A grant's viewer is 1 to 512 characters (or the grant is anonymous)");
+        }
+        if (grant.subject !== undefined &&
+            (typeof grant.subject !== "string" || grant.subject.length > SUBJECT_MAX)) {
+            throw new TypeError(`A grant's subject is a string of at most ${SUBJECT_MAX} characters`);
+        }
+        const ttl = seconds(grant.ttlSeconds, DEFAULT_TICKET_SECONDS, MAX_TICKET_SECONDS, "ttlSeconds");
+        const sessionSeconds = seconds(grant.sessionSeconds, DEFAULT_SESSION_SECONDS, MAX_SESSION_SECONDS, "sessionSeconds");
+        const key = keys.instanceKey(clean);
+        const viewer = anonymous ? "" : grant.viewer;
+        const probe = keys.sign({
+            i: clean,
+            w: viewer,
+            x: Number.MAX_SAFE_INTEGER,
+            ...(anonymous ? { a: 1 } : {}),
+            ...(grant.subject === undefined ? {} : { s: grant.subject }),
+            ...(entry === undefined ? {} : { p: entry.path }),
+        });
+        if (cookieName(key).length + probe.length + 120 > MAX_COOKIE_BYTES) {
+            throw new TypeError("This instance is too large to carry in a cookie (fewer origins?)");
+        }
+        const ticket = newTicket();
+        await tickets.put(ticketId(ticket), {
+            instance: clean,
+            viewer,
+            expiresAt: Date.now() + ttl * 1_000,
+            ...(grant.sessionSeconds === undefined ? {} : { sessionSeconds }),
+            ...(anonymous ? { anonymous: true } : {}),
+            ...(grant.subject === undefined ? {} : { subject: grant.subject }),
+            ...(entry === undefined ? {} : { entry }),
+        });
+        return { clean, key, ticket };
+    }
     const underDomain = (host) => host === domain || host.endsWith(`.${domain}`);
     /**
      * The label a request is for: null when it isn't under the content domain at all (or is in a
@@ -620,55 +841,55 @@ export function createServer(options) {
         contentSource,
         originFor: (scope) => originOfLabel(nameOf(scope)),
         async issue(instance, grant) {
-            const clean = cleanInstance(instance);
-            check(clean);
-            const anonymous = grant.anonymous === true;
-            if (anonymous) {
-                if (grant.viewer !== undefined) {
-                    throw new TypeError("An anonymous grant names no viewer");
-                }
-                if (clean.document.kind === "external") {
-                    throw new TypeError("A url-mode app is never opened anonymously (P046)");
-                }
-            }
-            else if (typeof grant.viewer !== "string" ||
-                grant.viewer.length === 0 ||
-                grant.viewer.length > 512) {
-                throw new TypeError("A grant's viewer is 1 to 512 characters (or the grant is anonymous)");
-            }
-            if (grant.subject !== undefined &&
-                (typeof grant.subject !== "string" || grant.subject.length > SUBJECT_MAX)) {
-                throw new TypeError(`A grant's subject is a string of at most ${SUBJECT_MAX} characters`);
-            }
-            const ttl = seconds(grant.ttlSeconds, DEFAULT_TICKET_SECONDS, MAX_TICKET_SECONDS, "ttlSeconds");
-            const sessionSeconds = seconds(grant.sessionSeconds, DEFAULT_SESSION_SECONDS, MAX_SESSION_SECONDS, "sessionSeconds");
-            const key = keys.instanceKey(clean);
-            const viewer = anonymous ? "" : grant.viewer;
-            const probe = keys.sign({
-                i: clean,
-                w: viewer,
-                x: Number.MAX_SAFE_INTEGER,
-                ...(anonymous ? { a: 1 } : {}),
-                ...(grant.subject === undefined ? {} : { s: grant.subject }),
-            });
-            if (cookieName(key).length + probe.length + 120 > MAX_COOKIE_BYTES) {
-                throw new TypeError("This instance is too large to carry in a cookie (fewer origins?)");
-            }
-            const ticket = newTicket();
-            await tickets.put(ticketId(ticket), {
-                instance: clean,
-                viewer,
-                expiresAt: Date.now() + ttl * 1_000,
-                ...(grant.sessionSeconds === undefined ? {} : { sessionSeconds }),
-                ...(anonymous ? { anonymous: true } : {}),
-                ...(grant.subject === undefined ? {} : { subject: grant.subject }),
-            });
+            const { clean, key, ticket } = await mint(instance, grant);
             const origin = originOfLabel(nameOf(clean.scope));
             const path = clean.document.kind === "external"
                 ? `${ENTER_PATH}?ticket=${ticket}`
                 : `${PREFIX}d/${key}?ticket=${ticket}`;
             return { url: `${origin}${path}`, origin, reports: true };
         },
+        urlOf(scope, path = "/") {
+            if (!path.startsWith("/") || path.startsWith("//") || path.startsWith(PREFIX)) {
+                throw new TypeError("A clean address's path starts with one / and isn't Porthole's own");
+            }
+            return `${originOfLabel(nameOf(scope))}${path}`;
+        },
+        entryState(token) {
+            const state = token.length > 8_192 ? null : keys.verify(token);
+            if (!isRecord(state) ||
+                state.e !== 1 ||
+                typeof state.l !== "string" ||
+                !ours(state.l) ||
+                typeof state.p !== "string" ||
+                !state.p.startsWith("/") ||
+                typeof state.n !== "string" ||
+                !NONCE.test(state.n) ||
+                typeof state.x !== "number" ||
+                (state.f !== 0 && state.f !== 1)) {
+                return null;
+            }
+            return {
+                label: state.l,
+                path: state.p,
+                nonce: state.n,
+                framed: state.f === 1,
+                expired: state.x <= Date.now(),
+            };
+        },
+        async enterBy(state, instance, grant) {
+            if (state.expired) {
+                throw new TypeError("This entry's state has expired: start again from the clean address");
+            }
+            const clean = cleanInstance(instance);
+            if (nameOf(clean.scope) !== state.label) {
+                throw new TypeError("The instance isn't served on the address the entry began at");
+            }
+            const { ticket } = await mint(clean, { ...grant, ttlSeconds: ENTRY_CODE_SECONDS }, {
+                path: state.path,
+                nonce: state.nonce,
+            });
+            return `${originOfLabel(state.label)}${ENTRY_PATH}?code=${ticket}`;
+        },
         async access(request) {
             const at = labelOf(request);
             if (at === null || at === "mismatch" || !ours(at.label)) {
@@ -694,6 +915,9 @@ export function createServer(options) {
                 if (url.pathname === ENTER_PATH) {
                     return await enter(request, url, label);
                 }
+                if (url.pathname === ENTRY_PATH && authorizeUrl !== null) {
+                    return await redeem(request, url, label);
+                }
                 const script = pageScript(url.pathname);
                 if (script !== null) {
                     return script;
@@ -708,8 +932,21 @@ export function createServer(options) {
                 if (document?.[1] !== undefined) {
                     return await serveDocument(request, url, label, document[1]);
                 }
+                if (url.pathname.startsWith(PREFIX)) {
+                    return page(404, "Nothing here", "This address names no content.", method);
+                }
+                // A clean address (P068): the document entered here, else the app, else entry.
+                if (authorizeUrl !== null) {
+                    const entered = accessAtPath(request, label, url.pathname);
+                    if (entered !== null) {
+                        return await serveAccess(request, entered, null);
+                    }
+                    if (options.upstream === undefined || accessOf(request, label, null) === null) {
+                        return beginEntry(request, url, label, authorizeUrl);
+                    }
+                }
                 // Without an upstream, only Porthole's own paths are served here: any other is nothing.
-                if (url.pathname.startsWith(PREFIX) || options.upstream === undefined) {
+                if (options.upstream === undefined) {
                     return page(404, "Nothing here", "This address names no content.", method);
                 }
                 return await serveApp(request, label);

package/dist/server/types.d.ts

@@ -66,6 +66,14 @@ export interface TicketRecord {
     readonly expiresAt: number;
     /** The grant's `sessionSeconds`, if it set one. */
     readonly sessionSeconds?: number;
+    /**
+     * An entry code's (P068): the clean path it returns to, and the nonce of the browser that asked
+     * (its cookie must come with the code). A ticket from `issue` has none.
+     */
+    readonly entry?: {
+        readonly path: string;
+        readonly nonce: string;
+    };
 }
 /** Where tickets live between `issue` and their one use. Default: in memory (one process). */
 export interface TicketStore {
@@ -146,6 +154,26 @@ export interface ServerOptions {
     readonly upstream?: Upstream;
     /** The host's per-request check (P050). Absent: a good cookie is enough until it ends. */
     readonly authorize?: Authorizer;
+    /**
+     * Redirect entry (P068): a request on a clean address (`urlOf`) without a cookie for it is sent
+     * to the host's authorize route, on a host origin, which decides and sends it back with a
+     * one-time code (`enterBy`). Absent: a clean address without a cookie is refused, as before.
+     */
+    readonly entry?: {
+        readonly authorizeUrl: string;
+    };
+}
+/** A redirect entry's state, as the host's authorize route reads it (`PortholeServer.entryState`). */
+export interface EntryState {
+    /** The label the clean address is on. */
+    readonly label: string;
+    /** The path (and query) it asked for. */
+    readonly path: string;
+    /** Whether it was asked from a frame. */
+    readonly framed: boolean;
+    /** Older than five minutes: start again from the clean address. */
+    readonly expired: boolean;
+    readonly nonce: string;
 }
 export interface PortholeServer {
     /**
@@ -168,4 +196,13 @@ export interface PortholeServer {
     access(request: Request): Promise<Access | null>;
     /** The frame source every content origin matches (`https://*.example-usercontent.com`). */
     readonly contentSource: string;
+    /** A clean address on a scope's origin (P068): what a tab, a link, a bookmark opens. */
+    urlOf(scope: string, path?: string): string;
+    /** A redirect entry's state, signature checked; null for one this server didn't make. */
+    entryState(token: string): EntryState | null;
+    /**
+     * Once the host decided (its authorize route): a one-time code for `instance`, which must be
+     * served on the state's label, and the URL that redeems it there (`/__porthole/entry`).
+     */
+    enterBy(state: EntryState, instance: InstanceRef, grant: Grant): Promise<string>;
 }

package/dist/transport/post-message.d.ts

@@ -6,4 +6,12 @@ import type { Transport } from "./types.ts";
  * Messages go to the frame's window addressed to that origin; an opaque frame can only be
  * addressed as `"*"`, so nothing secret is ever sent.
  */
-export declare function postMessageTransport(frameWindow: () => Window | null, expectedOrigin: string, host?: Window): Transport;
+export declare function postMessageTransport(frameWindow: () => Window | null, expectedOrigin: string, host?: Window, 
+/**
+ * Another origin the frame's window may say some things from: the host's own, whose pages a
+ * served frame passes through on a redirect entry (P068), for their frame status only.
+ */
+also?: {
+    readonly origin: string;
+    readonly accept: (data: unknown) => boolean;
+}): Transport;

package/dist/transport/post-message.js

@@ -5,12 +5,21 @@
  * Messages go to the frame's window addressed to that origin; an opaque frame can only be
  * addressed as `"*"`, so nothing secret is ever sent.
  */
-export function postMessageTransport(frameWindow, expectedOrigin, host = window) {
+export function postMessageTransport(frameWindow, expectedOrigin, host = window, 
+/**
+ * Another origin the frame's window may say some things from: the host's own, whose pages a
+ * served frame passes through on a redirect entry (P068), for their frame status only.
+ */
+also) {
     const listeners = new Set();
     let closed = false;
     const onMessage = (event) => {
         const source = frameWindow();
-        if (closed || source === null || event.source !== source || event.origin !== expectedOrigin) {
+        if (closed || source === null || event.source !== source) {
+            return;
+        }
+        if (event.origin !== expectedOrigin &&
+            (also === undefined || event.origin !== also.origin || !also.accept(event.data))) {
             return;
         }
         for (const listener of listeners) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@botiverse/porthole",
-  "version": "0.1.8",
+  "version": "0.2.0",
   "description": "A host-side sandbox for agent-made HTML: isolation, egress hardening, a themed shell, gated host functions, and the agent manual, from one config.",
   "license": "Apache-2.0",
   "files": [
@@ -29,6 +29,10 @@
     "./server": {
       "types": "./dist/server/index.d.ts",
       "default": "./dist/server/index.js"
+    },
+    "./node": {
+      "types": "./dist/node/index.d.ts",
+      "default": "./dist/node/index.js"
     }
   },
   "devDependencies": {
@@ -58,7 +62,7 @@
     "node": ">=24"
   },
   "scripts": {
-    "build": "tsc -p tsconfig.build.json",
+    "build": "tsc -p tsconfig.build.json && node scripts/build-harness.ts",
     "test:leak": "playwright test -c leak/playwright.config.ts"
   }
 }

package/src/conformance/clipboard.ts

@@ -12,14 +12,17 @@ import { settle } from "./oracles.ts";
 
 const SEED = "porthole-seed";
 
-/** A text area of the oracle's own on the host's page. */
+/**
+ * A text area of the oracle's own on the host's page: in the conformance harness's layer where
+ * there is one (over an app's own page, P066), else at the top of the page.
+ */
 async function area(page: Page, id: string): Promise<void> {
   await page.evaluate((each) => {
     if (document.getElementById(each) === null) {
       const element = document.createElement("textarea");
       element.id = each;
       element.style.cssText = "display:block;width:200px;height:40px";
-      document.body.prepend(element);
+      (document.getElementById("porthole-conformance") ?? document.body).prepend(element);
     }
   }, id);
 }