Don't emit favicons for LAN hosts (fix Local Network Access prompt)

Records with .local / localhost / private-IP domains (e.g. vtex.local x34)
were producing https://<host>/favicon.ico img requests, which the browser
treats as accessing the user's local network — triggering a permission
prompt on integrations.sh. Add a shared faviconUrl() guard that returns
null for non-public hosts; those fall back to the monogram everywhere
(pipeline + domain/detail pages + homepage client).

Author: RhysSullivan

output/index.json

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:d30bedeedaccbe52d41ae5191bb8f964c36c1f7aba6c803c86095e72384e0e1e
-size 58961348
+oid sha256:7d0b60f9d8ddc2fe01f481554f540d2d37e3886d48f0c3c782d1a02cb0192dfa
+size 58957466

output/openapi.json

@@ -3,6 +3,7 @@ import { join, dirname } from "node:path";
 import { fileURLToPath } from "node:url";
 import { getDomain } from "tldts";
 import type { Integration, Feed, Kind, ExtractedTool } from "../src/lib/types.ts";
+import { faviconUrl } from "../src/lib/favicon.ts";
 
 const ROOT = join(dirname(fileURLToPath(import.meta.url)), "..");
 const SOURCES = join(ROOT, "sources");
@@ -309,7 +310,7 @@ function buildCli(): Integration[] {
       name: c.name,
       description: c.description ?? "",
       url: c.docs,
-      icon: `https://${c.domain}/favicon.ico`,
+      icon: faviconUrl(c.domain) ?? undefined,
       categories: [],
       feeds: ["cli-seed" as Feed],
       cli: { install: c.install, domain: c.domain, docs: c.docs, repo: c.repo },
@@ -387,7 +388,7 @@ function applyFavicons(recs: Integration[]): Integration[] {
     if (!domain) return { ...r, icon: undefined };
     return {
       ...r,
-      icon: `https://${domain}/favicon.ico`,
+      icon: faviconUrl(domain) ?? undefined,
     };
   });
 }
@@ -528,8 +529,9 @@ function buildIndex(all: Integration[]) {
       name: remapped ? r.name.replace(/^.*?[–-]\s*/, "") : r.name,
       description: r.description.slice(0, 240),
       url: r.url,
-      // Icon is the provider's own apex-domain favicon — never a third-party host.
-      icon: domain ? `https://${domain}/favicon.ico` : undefined,
+      // Icon is the provider's own apex-domain favicon — never a third-party host,
+      // and never a LAN address (.local/private hosts return null).
+      icon: faviconUrl(domain) ?? undefined,
       domain,
       categories: r.categories,
       feeds: r.feeds,

public/api.json

@@ -0,0 +1,14 @@
+// Private/non-routable host ranges. We must NOT emit favicon URLs for these:
+// a public page requesting a LAN address (`.local`, localhost, private IP)
+// triggers the browser's Local Network Access permission prompt.
+const PRIVATE_IP = /^(10|127)\.\d|^192\.168\.|^172\.(1[6-9]|2\d|3[01])\./;
+
+/** Favicon URL for a domain, or null when the host isn't publicly routable. */
+export function faviconUrl(domain: string | null | undefined): string | null {
+  if (!domain) return null;
+  const d = domain.toLowerCase();
+  if (!d.includes(".")) return null; // single-label host (not a public FQDN)
+  if (d === "localhost" || d.endsWith(".local") || d.endsWith(".internal") || d.endsWith(".localhost")) return null;
+  if (PRIVATE_IP.test(d)) return null;
+  return `https://${domain}/favicon.ico`;
+}

scripts/normalize.ts

@@ -3,6 +3,7 @@ import Base from "~/layouts/Base.astro";
 import Breadcrumb from "~/components/Breadcrumb.astro";
 import Markdown from "~/components/Markdown.tsx";
 import { byKind, kindLabel, domainById } from "~/lib/data.ts";
+import { faviconUrl } from "~/lib/favicon.ts";
 import type { Kind } from "~/lib/types.ts";
 
 export function getStaticPaths() {
@@ -17,7 +18,7 @@ export function getStaticPaths() {
 
 const { item } = Astro.props;
 const domain = domainById.get(item.id) ?? item.slug;
-const favicon = `https://${domain}/favicon.ico`;
+const favicon = faviconUrl(domain);
 const letter = (item.name[0] ?? "?").toUpperCase();
 let specHost: string | null = null;
 if (item.openapi?.specUrl) {
@@ -50,7 +51,7 @@ const description = (item.description || `${item.name} ${kindLabel[item.kind]} d
       <header class="head">
         <div class="favicon">
           <span class="fav-letter">{letter}</span>
-          <img src={favicon} width="22" height="22" alt="" loading="lazy" onerror="this.remove()" />
+          {favicon && <img src={favicon} width="22" height="22" alt="" loading="lazy" onerror="this.remove()" />}
         </div>
         <div class="head-body">
           <h1>{item.name}</h1>

src/lib/favicon.ts

@@ -1,6 +1,7 @@
 ---
 import Base from "~/layouts/Base.astro";
 import Breadcrumb from "~/components/Breadcrumb.astro";
+import { faviconUrl } from "~/lib/favicon.ts";
 import { index, byId } from "~/lib/data.ts";
 import type { IndexRecord } from "~/lib/data.ts";
 import type { Kind } from "~/lib/types.ts";
@@ -48,7 +49,7 @@ const sections = KIND_ORDER.map((kind) => ({
     ),
 })).filter((s) => s.items.length > 0);
 
-const icon = `https://${domain}/favicon.ico`;
+const icon = faviconUrl(domain);
 const letter = (domain[0] ?? "?").toUpperCase();
 
 const formatList = sections.map((s) => SECTION_LABEL[s.kind].replace(" · ", "/")).join(", ");
@@ -83,7 +84,7 @@ const metaFor = (r: IndexRecord): string => {
       <header class="head">
         <div class="favicon">
           <span class="fav-letter">{letter}</span>
-          <img src={icon} width="22" height="22" alt="" loading="lazy" onerror="this.remove()" />
+          {icon && <img src={icon} width="22" height="22" alt="" loading="lazy" onerror="this.remove()" />}
         </div>
         <div class="head-body">
           <h1>{domain}</h1>

src/pages/[kind]/[slug].astro

@@ -72,7 +72,14 @@ const counts = {
 
   const esc = (s) =>
     String(s).replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" }[c]));
-  const fav = (d) => `https://${d}/favicon.ico`;
+  // Favicon URL, or "" for non-public hosts (.local / localhost / private IP)
+  // — requesting those from a public page triggers a Local Network Access prompt.
+  const fav = (d) => {
+    const h = String(d).toLowerCase();
+    if (!h.includes(".") || h === "localhost" || h.endsWith(".local") || h.endsWith(".internal") ||
+        h.endsWith(".localhost") || /^(10|127)\.\d|^192\.168\.|^172\.(1[6-9]|2\d|3[01])\./.test(h)) return "";
+    return `https://${d}/favicon.ico`;
+  };
   const dpath = (d) => `/d/${encodeURIComponent(d)}/`;
 
   const buildGroups = (recs) => {
@@ -93,7 +100,10 @@ const counts = {
 
   const groupRowHtml = (g) => {
     const ph = esc((g.domain[0] || "?").toUpperCase());
-    const icon = `<img class="c-fav" src="${esc(g.icon || fav(g.domain))}" alt="" loading="lazy" width="18" height="18" onerror="this.outerHTML='<span class=&quot;ph&quot;>${ph}</span>'">`;
+    const src = g.icon || fav(g.domain);
+    const icon = src
+      ? `<img class="c-fav" src="${esc(src)}" alt="" loading="lazy" width="18" height="18" onerror="this.outerHTML='<span class=&quot;ph&quot;>${ph}</span>'">`
+      : `<span class="ph">${ph}</span>`;
     const chips = TORDER.filter((t) => g.types[t]).map((t) => {
       const c = g.types[t];
       return `<a class="chip" href="${dpath(g.domain)}#${t}">${TLABEL[t]}${c.count > 1 ? `<span class="n">${c.count}</span>` : ""}</a>`;