@chidchanun/bcp 0.1.5 → 0.1.7

package/packages/server/src/critical-css-proxy.ts

@@ -0,0 +1,559 @@
+import * as http from "node:http";
+import {
+    brotliCompressSync,
+    brotliDecompressSync,
+    deflateSync,
+    gunzipSync,
+    gzipSync,
+    inflateSync,
+} from "node:zlib";
+
+import {
+    canInlineStylesheet,
+    inlineSmallStylesheet,
+} from "./critical-css.js";
+
+export interface CriticalCssProxyOptions {
+    port: number;
+    hostname: string;
+    upstreamPort: number;
+    upstreamHostname: string;
+    cssFile: string;
+}
+
+type SupportedContentEncoding =
+    | "identity"
+    | "gzip"
+    | "br"
+    | "deflate";
+
+export function createCriticalCssProxy(
+    options: CriticalCssProxyOptions
+) {
+    const server =
+        http.createServer(
+            (
+                req,
+                res
+            ) => {
+                const upstream =
+                    http.request({
+                        hostname:
+                            options.upstreamHostname,
+                        port:
+                            options.upstreamPort,
+                        method:
+                            req.method ??
+                            "GET",
+                        path:
+                            req.url ??
+                            "/",
+                        headers: {
+                            ...req.headers,
+                            host:
+                                req.headers.host ??
+                                `${options.hostname}:${options.port}`,
+                        },
+                    });
+
+                upstream.on(
+                    "response",
+                    (upstreamResponse) => {
+                        const encoding =
+                            getSupportedContentEncoding(
+                                upstreamResponse
+                            );
+
+                        if (
+                            !canInlineStylesheet(
+                                options.cssFile
+                            ) ||
+                            !encoding ||
+                            !shouldTransformHtml(
+                                req,
+                                upstreamResponse
+                            )
+                        ) {
+                            writeUpstreamHead(
+                                res,
+                                upstreamResponse
+                            );
+                            upstreamResponse.pipe(
+                                res
+                            );
+                            return;
+                        }
+
+                        void transformHtmlResponse(
+                            res,
+                            upstreamResponse,
+                            options.cssFile,
+                            encoding
+                        );
+                    }
+                );
+
+                upstream.on(
+                    "error",
+                    (error) => {
+                        if (
+                            res.headersSent
+                        ) {
+                            res.destroy(
+                                error
+                            );
+                            return;
+                        }
+
+                        res.writeHead(
+                            502,
+                            {
+                                "Content-Type":
+                                    "text/plain; charset=utf-8",
+                                "Cache-Control":
+                                    "no-store",
+                            }
+                        );
+                        res.end(
+                            "Bad Gateway"
+                        );
+                    }
+                );
+
+                req.pipe(
+                    upstream
+                );
+            }
+        );
+
+    server.keepAliveTimeout =
+        65_000;
+    server.headersTimeout =
+        66_000;
+
+    return {
+        async start(): Promise<void> {
+            await listen(
+                server,
+                options.port,
+                options.hostname
+            );
+        },
+
+        async stop(): Promise<void> {
+            if (
+                !server.listening
+            ) {
+                return;
+            }
+
+            await new Promise<void>(
+                (
+                    resolve,
+                    reject
+                ) => {
+                    server.close(
+                        (error) => {
+                            if (error) {
+                                reject(
+                                    error
+                                );
+                                return;
+                            }
+
+                            resolve();
+                        }
+                    );
+                }
+            );
+        },
+    };
+}
+
+function shouldTransformHtml(
+    req: http.IncomingMessage,
+    response: http.IncomingMessage
+): boolean {
+    if (
+        (req.method ?? "GET").toUpperCase() !==
+        "GET"
+    ) {
+        return false;
+    }
+
+    if (
+        response.statusCode !== 200
+    ) {
+        return false;
+    }
+
+    const contentType =
+        response.headers[
+            "content-type"
+        ];
+    const value =
+        Array.isArray(
+            contentType
+        )
+            ? contentType[0]
+            : contentType;
+
+    return (
+        typeof value === "string" &&
+        /^text\/html\b/i.test(
+            value
+        ) &&
+        allowsInlineStyles(
+            response
+        )
+    );
+}
+
+function allowsInlineStyles(
+    response: http.IncomingMessage
+): boolean {
+    const header =
+        response.headers[
+            "content-security-policy"
+        ];
+    const policies =
+        Array.isArray(
+            header
+        )
+            ? header
+            : header
+                ? [header]
+                : [];
+
+    if (
+        policies.length === 0
+    ) {
+        return true;
+    }
+
+    return policies.every(
+        (policy) =>
+            policyAllowsInlineStyles(
+                policy
+            )
+    );
+}
+
+function policyAllowsInlineStyles(
+    policy: string
+): boolean {
+    const directives =
+        new Map<string, string[]>();
+
+    for (
+        const rawDirective
+        of policy.split(";")
+    ) {
+        const parts =
+            rawDirective
+                .trim()
+                .split(/\s+/)
+                .filter(Boolean);
+
+        if (
+            parts.length === 0
+        ) {
+            continue;
+        }
+
+        directives.set(
+            parts[0].toLowerCase(),
+            parts.slice(1)
+        );
+    }
+
+    for (
+        const name
+        of [
+            "style-src-elem",
+            "style-src",
+            "default-src",
+        ]
+    ) {
+        const sources =
+            directives.get(
+                name
+            );
+
+        if (!sources) {
+            continue;
+        }
+
+        return sources.some(
+            (source) =>
+                source.toLowerCase() ===
+                "'unsafe-inline'"
+        );
+    }
+
+    return true;
+}
+
+async function transformHtmlResponse(
+    res: http.ServerResponse,
+    upstreamResponse: http.IncomingMessage,
+    cssFile: string,
+    encoding: SupportedContentEncoding
+): Promise<void> {
+    try {
+        const chunks:
+            Buffer[] = [];
+
+        for await (
+            const chunk
+            of upstreamResponse
+        ) {
+            chunks.push(
+                Buffer.isBuffer(
+                    chunk
+                )
+                    ? chunk
+                    : Buffer.from(
+                        chunk
+                    )
+            );
+        }
+
+        const decodedBody =
+            decodeBody(
+                Buffer.concat(
+                    chunks
+                ),
+                encoding
+            );
+
+        const html =
+            inlineSmallStylesheet(
+                decodedBody.toString(
+                    "utf8"
+                ),
+                cssFile
+            );
+
+        const responseBody =
+            encodeBody(
+                Buffer.from(
+                    html,
+                    "utf8"
+                ),
+                encoding
+            );
+
+        const headers:
+            http.OutgoingHttpHeaders = {
+                ...upstreamResponse.headers,
+                "content-length":
+                    responseBody.length,
+            };
+
+        delete headers[
+            "transfer-encoding"
+        ];
+        delete headers[
+            "etag"
+        ];
+        delete headers[
+            "content-md5"
+        ];
+
+        if (
+            encoding === "identity"
+        ) {
+            delete headers[
+                "content-encoding"
+            ];
+        }
+
+        writeUpstreamHead(
+            res,
+            upstreamResponse,
+            headers
+        );
+        res.end(
+            responseBody
+        );
+    } catch (error) {
+        if (
+            res.headersSent
+        ) {
+            res.destroy(
+                error instanceof Error
+                    ? error
+                    : undefined
+            );
+            return;
+        }
+
+        res.writeHead(
+            500,
+            {
+                "Content-Type":
+                    "text/plain; charset=utf-8",
+                "Cache-Control":
+                    "no-store",
+            }
+        );
+        res.end(
+            "Internal Server Error"
+        );
+    }
+}
+
+function getSupportedContentEncoding(
+    response: http.IncomingMessage
+): SupportedContentEncoding | null {
+    const header =
+        response.headers[
+            "content-encoding"
+        ];
+    const value =
+        (
+            Array.isArray(
+                header
+            )
+                ? header[0]
+                : header
+        )
+            ?.trim()
+            .toLowerCase();
+
+    if (
+        !value ||
+        value === "identity"
+    ) {
+        return "identity";
+    }
+
+    if (
+        value === "gzip" ||
+        value === "br" ||
+        value === "deflate"
+    ) {
+        return value;
+    }
+
+    return null;
+}
+
+function decodeBody(
+    body: Buffer,
+    encoding: SupportedContentEncoding
+): Buffer {
+    switch (encoding) {
+        case "gzip":
+            return gunzipSync(
+                body
+            );
+        case "br":
+            return brotliDecompressSync(
+                body
+            );
+        case "deflate":
+            return inflateSync(
+                body
+            );
+        default:
+            return body;
+    }
+}
+
+function encodeBody(
+    body: Buffer,
+    encoding: SupportedContentEncoding
+): Buffer {
+    switch (encoding) {
+        case "gzip":
+            return gzipSync(
+                body
+            );
+        case "br":
+            return brotliCompressSync(
+                body
+            );
+        case "deflate":
+            return deflateSync(
+                body
+            );
+        default:
+            return body;
+    }
+}
+
+function writeUpstreamHead(
+    res: http.ServerResponse,
+    upstreamResponse: http.IncomingMessage,
+    headers:
+        http.OutgoingHttpHeaders =
+        upstreamResponse.headers
+): void {
+    const statusCode =
+        upstreamResponse.statusCode ??
+        502;
+
+    if (
+        upstreamResponse.statusMessage
+    ) {
+        res.writeHead(
+            statusCode,
+            upstreamResponse.statusMessage,
+            headers
+        );
+        return;
+    }
+
+    res.writeHead(
+        statusCode,
+        headers
+    );
+}
+
+async function listen(
+    server: http.Server,
+    port: number,
+    hostname: string
+): Promise<void> {
+    await new Promise<void>(
+        (
+            resolve,
+            reject
+        ) => {
+            const onError =
+                (error: Error) => {
+                    server.off(
+                        "listening",
+                        onListening
+                    );
+                    reject(
+                        error
+                    );
+                };
+
+            const onListening =
+                () => {
+                    server.off(
+                        "error",
+                        onError
+                    );
+                    resolve();
+                };
+
+            server.once(
+                "error",
+                onError
+            );
+            server.once(
+                "listening",
+                onListening
+            );
+            server.listen(
+                port,
+                hostname
+            );
+        }
+    );
+}

package/packages/server/src/critical-css.ts

@@ -0,0 +1,132 @@
+import fs from "node:fs";
+import path from "node:path";
+
+export const DEFAULT_INLINE_STYLESHEET_LIMIT =
+    8 * 1024;
+
+export interface InlineStylesheetOptions {
+    href?: string;
+    maxBytes?: number;
+}
+
+export function canInlineStylesheet(
+    cssFile: string,
+    maxBytes =
+        DEFAULT_INLINE_STYLESHEET_LIMIT
+): boolean {
+    assertValidMaxBytes(
+        maxBytes
+    );
+
+    try {
+        const stat =
+            fs.statSync(
+                cssFile
+            );
+
+        return (
+            stat.isFile() &&
+            stat.size <= maxBytes
+        );
+    } catch {
+        return false;
+    }
+}
+
+export function inlineSmallStylesheet(
+    html: string,
+    cssFile: string,
+    options: InlineStylesheetOptions = {}
+): string {
+    const href =
+        options.href ??
+        "/bcp.css";
+    const maxBytes =
+        options.maxBytes ??
+        DEFAULT_INLINE_STYLESHEET_LIMIT;
+
+    assertValidMaxBytes(
+        maxBytes
+    );
+
+    const stylesheetPattern =
+        createStylesheetPattern(
+            href
+        );
+
+    if (
+        !stylesheetPattern.test(
+            html
+        ) ||
+        !canInlineStylesheet(
+            cssFile,
+            maxBytes
+        )
+    ) {
+        return html;
+    }
+
+    const css =
+        fs.readFileSync(
+            cssFile,
+            "utf8"
+        );
+
+    const safeCss =
+        css.replace(
+            /<\/style/gi,
+            "<\\/style"
+        );
+
+    return html.replace(
+        stylesheetPattern,
+        `<style data-bcp-inline-css>${safeCss}</style>`
+    );
+}
+
+export function resolveBcpStylesheetFile(
+    publicDirectory: string
+): string {
+    return path.join(
+        publicDirectory,
+        "bcp.css"
+    );
+}
+
+function assertValidMaxBytes(
+    maxBytes: number
+): void {
+    if (
+        !Number.isFinite(
+            maxBytes
+        ) ||
+        maxBytes < 0
+    ) {
+        throw new Error(
+            "BCP Framework: inline stylesheet maxBytes must be a non-negative finite number."
+        );
+    }
+}
+
+function createStylesheetPattern(
+    href: string
+): RegExp {
+    const escapedHref =
+        escapeRegExp(
+            href
+        );
+
+    return new RegExp(
+        `<link\\b(?=[^>]*\\brel=["']stylesheet["'])(?=[^>]*\\bhref=["']${escapedHref}(?:\\?[^"']*)?["'])[^>]*>`,
+        "i"
+    );
+}
+
+function escapeRegExp(
+    value: string
+): string {
+    return value.replace(
+        /[.*+?^${}()|[\]\\]/g,
+        "\\$&"
+    );
+}