jskelet 0.4.3 → 0.4.5

package/src/config/index.js

@@ -37,6 +37,7 @@ import {
   DEFAULT_DEV_GATE_BYPASS,
   DEFAULT_DIRS,
   DEFAULT_HTML_CACHE_MAX_ENTRIES,
+  DEFAULT_IMAGES,
   DEFAULT_LOGS,
   DEFAULT_NAVIGATION,
   DEFAULT_NAVIGATION_EXCLUDE,
@@ -130,10 +131,29 @@ const CONFIG_FILE = "jskelet.config.mjs";
  * @property {string[]} watch Dev sunucusunun izlediği ek dizinler.
  * @property {{ family: string, slug?: string, weights: number[] }[]} fonts
  * @property {{ scan?: string[] } | false} icons
- * @property {{ widths?: number[], quality?: number, skip?: string[] } | false} images
+ * @property {ImagesConfig | false} images
  * @property {string[]} clientEnv Client bundle'a gömülecek env anahtarları.
  */
 
+/**
+ * @typedef {object} ImagesRemoteConfig
+ * @property {boolean} enabled
+ * @property {string[]} allowHosts
+ * @property {string} path
+ * @property {number} maxWidth
+ * @property {number} cacheMaxAge
+ * @property {number} fetchTimeoutMs
+ * @property {number} maxBytes
+ */
+
+/**
+ * @typedef {object} ImagesConfig
+ * @property {number[]} widths
+ * @property {number} quality
+ * @property {string[]} skip
+ * @property {ImagesRemoteConfig | false} remote
+ */
+
 /** @type {ResolvedConfig | null} */
 let config = null;
 
@@ -772,6 +792,83 @@ function normalizeSecurity(raw) {
   };
 }
 
+/**
+ * Build + runtime görsel ayarları. `false` → her iki yüzey de kapalı.
+ * `remote.allowHosts` boşsa remote kapalı kalır (açık proxy olmasın).
+ *
+ * @param {unknown} raw
+ * @returns {ImagesConfig | false}
+ */
+function normalizeImages(raw) {
+  if (raw === false) return false;
+
+  const source = /** @type {Record<string, any>} */ (raw ?? {});
+  const widths = asArray(source.widths ?? DEFAULT_IMAGES.widths, "images.widths")
+    .map((entry) => Number(entry))
+    .filter((entry) => Number.isFinite(entry) && entry > 0)
+    .map((entry) => Math.round(entry));
+
+  const quality = Number(source.quality ?? DEFAULT_IMAGES.quality);
+  const skip = asArray(source.skip ?? DEFAULT_IMAGES.skip, "images.skip")
+    .filter((entry) => typeof entry === "string")
+    .map(String);
+
+  /** @type {ImagesRemoteConfig | false} */
+  let remote = false;
+  if (source.remote !== false && source.remote != null) {
+    const rem = /** @type {Record<string, any>} */ (
+      source.remote === true ? {} : source.remote
+    );
+    const allowHosts = asArray(
+      rem.allowHosts ?? DEFAULT_IMAGES.remote.allowHosts,
+      "images.remote.allowHosts",
+    )
+      .filter((entry) => typeof entry === "string" && entry.trim())
+      .map((entry) => String(entry).trim().toLowerCase());
+
+    if (allowHosts.length === 0) {
+      if (source.remote === true || rem.allowHosts != null) {
+        console.warn(
+          "[config] images.remote needs a non-empty allowHosts list; remote optimizer disabled",
+        );
+      }
+    } else {
+      remote = {
+        enabled: true,
+        allowHosts,
+        path: String(rem.path ?? DEFAULT_IMAGES.remote.path),
+        maxWidth: Math.max(
+          1,
+          Number(rem.maxWidth ?? DEFAULT_IMAGES.remote.maxWidth) ||
+            DEFAULT_IMAGES.remote.maxWidth,
+        ),
+        cacheMaxAge: Math.max(
+          0,
+          Number(rem.cacheMaxAge ?? DEFAULT_IMAGES.remote.cacheMaxAge) ||
+            DEFAULT_IMAGES.remote.cacheMaxAge,
+        ),
+        fetchTimeoutMs: Math.max(
+          1000,
+          Number(rem.fetchTimeoutMs ?? DEFAULT_IMAGES.remote.fetchTimeoutMs) ||
+            DEFAULT_IMAGES.remote.fetchTimeoutMs,
+        ),
+        maxBytes: Math.max(
+          1024,
+          Number(rem.maxBytes ?? DEFAULT_IMAGES.remote.maxBytes) ||
+            DEFAULT_IMAGES.remote.maxBytes,
+        ),
+      };
+    }
+  }
+
+  return {
+    widths: widths.length ? widths : [...DEFAULT_IMAGES.widths],
+    quality: Number.isFinite(quality) && quality > 0 ? quality : DEFAULT_IMAGES.quality,
+    skip,
+    remote,
+  };
+}
+
 /**
  * Dizin adlarını mutlak yola çevirir. `styles` bir dosya yolu olduğu için
  * de aynı çözümlemeden geçer; ayrı bir alan tutmaya değmez.
@@ -942,7 +1039,7 @@ export async function loadConfig(options = {}) {
     // olsun diye aynı yerden geçer.
     fonts: source.fonts ?? [],
     icons: source.icons ?? {},
-    images: source.images ?? {},
+    images: normalizeImages(source.images),
     clientEnv: source.clientEnv ?? [],
   };
 

package/src/index.js

@@ -37,6 +37,7 @@ export {
 } from "./http/cookies.js";
 export { reportUpstreamFailure } from "./server/upstream-tracking.js";
 export { asset, hasAsset, optimizedImage, getSpriteIds } from "./server/assets.js";
+export { remoteImageUrl, parseAllowedRemoteUrl } from "./server/image-optimizer.js";
 export { headHints } from "./server/head-hints.js";
 export { renderHeadMeta } from "./server/metadata.js";
 export {

package/src/server/create-app.js

@@ -17,6 +17,8 @@
  *      static'e düşer ve middleware anında sıkıştırır (kalite 5).
  *   4b. admin paneli (açıksa) — statikten sonra, route'lardan önce: kendi
  *      gövde ayrıştırıcısını taşır ve uygulama yolunu gölgeleyemez.
+ *   4c. image optimizer (images.remote) — uzak görselleri webp'ye çevirir;
+ *      body parser'dan önce, admin ile aynı katmanda.
  *   5. body parser'lar — statikten sonra: görsel isteklerinde gövde ayrıştırma
  *      maliyeti ödenmesin.
  *   6. csrf — body parser'lardan sonra olmalı: token form alanından okunuyor.
@@ -137,6 +139,13 @@ export async function createApp(options = {}) {
     mountAdmin(app);
   }
 
+  // Uzak görsel proxy: allowHosts doluysa mount. Statikten sonra, body
+  // parser'dan önce — görsel GET'lerinde gövde ayrıştırma maliyeti ödenmesin.
+  if (config.images && config.images !== false && config.images.remote) {
+    const { mountImageOptimizer } = await import("./image-optimizer.js");
+    await mountImageOptimizer(app);
+  }
+
   app.use(express.urlencoded({ extended: false, limit: "64kb" }));
   app.use(express.json({ limit: "256kb" }));
 

package/src/server/dev/devtools.js

@@ -339,6 +339,13 @@ function router() {
     fs.createReadStream(OVERLAY_FILE).pipe(res);
   });
 
+  // Overlay'in SEO taraması; native ESM import ile yüklenir.
+  api.get("/seo.js", (req, res) => {
+    res.type("application/javascript");
+    res.setHeader("Cache-Control", "no-store");
+    fs.createReadStream(path.join(DEVTOOLS_DIR, "seo.js")).pipe(res);
+  });
+
   api.get("/logo.png", (req, res) => {
     res.type("image/png");
     // Logo geliştirme sırasında değişmiyor; her gezinmede yeniden indirmesin.

package/src/server/image-optimizer.js

@@ -0,0 +1,338 @@
+/**
+ * Runtime uzak görsel proxy: allowlist'teki host'lardan çeker, sharp ile
+ * webp'ye çevirir, diske yazar ve uzun Cache-Control ile servis eder.
+ *
+ * Next.js `/_next/image` karşılığı. Build zamanı `images.mjs` yalnızca
+ * `public/` altındaki yerel dosyaları kapsar; CMS / CDN kapakları için bu uç
+ * gerekir. Kapalıyken (allowHosts yok) router hiç mount edilmez.
+ *
+ * sharp yoksa 302 ile orijinale yönlendirilir — sayfa bozulmaz, tasarruf
+ * olmaz. Deployment notu: remote açıksa sharp runtime bağımlılığıdır.
+ */
+import crypto from "node:crypto";
+import fs from "node:fs";
+import path from "node:path";
+import process from "node:process";
+import { tryImportFromApp } from "../build/resolve-peer.mjs";
+import { getConfig } from "../config/index.js";
+
+/** @type {typeof import('sharp') | null | undefined} */
+let sharpModule;
+
+/** @type {string | null} */
+let cacheDir = null;
+
+/**
+ * @returns {import('../config/index.js').ImagesRemoteConfig | null}
+ */
+export function getRemoteImages() {
+  const images = getConfig().images;
+  if (!images || images === false || !images.remote || !images.remote.enabled) {
+    return null;
+  }
+  return images.remote;
+}
+
+/**
+ * Mutlak http(s) URL mi ve allowHosts'ta mı.
+ * @param {string} src
+ * @returns {URL | null}
+ */
+export function parseAllowedRemoteUrl(src) {
+  const remote = getRemoteImages();
+  if (!remote || typeof src !== "string") return null;
+
+  let url;
+  try {
+    url = new URL(src);
+  } catch {
+    return null;
+  }
+
+  if (url.protocol !== "http:" && url.protocol !== "https:") return null;
+  if (!isHostAllowed(url.hostname, remote.allowHosts)) return null;
+  if (isBlockedAddress(url.hostname)) return null;
+
+  return url;
+}
+
+/**
+ * @param {string} hostname
+ * @param {string[]} allowHosts
+ * @returns {boolean}
+ */
+export function isHostAllowed(hostname, allowHosts) {
+  const host = hostname.toLowerCase();
+  return allowHosts.some((entry) => {
+    const pattern = entry.toLowerCase();
+    if (pattern.startsWith("*.")) {
+      const suffix = pattern.slice(1); // ".example.com"
+      return host.endsWith(suffix) || host === pattern.slice(2);
+    }
+    return host === pattern;
+  });
+}
+
+/**
+ * Literal private / link-local / loopback host'ları reddet (SSRF).
+ * Allowlist asıl koruma; bu ek bir savunma katmanı.
+ * @param {string} hostname
+ * @returns {boolean}
+ */
+export function isBlockedAddress(hostname) {
+  const host = hostname.toLowerCase().replace(/^\[|\]$/g, "");
+  if (host === "localhost" || host === "0.0.0.0" || host.endsWith(".localhost")) {
+    return true;
+  }
+  if (host === "::1" || host === "0:0:0:0:0:0:0:1") return true;
+
+  // IPv4
+  const ipv4 = /^(\d{1,3})\.(\d{1,3})\.(\d{1,3})\.(\d{1,3})$/.exec(host);
+  if (ipv4) {
+    const parts = ipv4.slice(1).map(Number);
+    if (parts.some((n) => n > 255)) return true;
+    const [a, b] = parts;
+    if (a === 10 || a === 127 || a === 0) return true;
+    if (a === 169 && b === 254) return true;
+    if (a === 172 && b >= 16 && b <= 31) return true;
+    if (a === 192 && b === 168) return true;
+    if (a === 100 && b >= 64 && b <= 127) return true; // CGNAT
+    return false;
+  }
+
+  // Ham IPv6 private / ULA — basit önek kontrolü
+  if (host.includes(":")) {
+    if (host.startsWith("fc") || host.startsWith("fd") || host.startsWith("fe80")) {
+      return true;
+    }
+  }
+
+  return false;
+}
+
+/**
+ * Optimizer URL'si üret. `image()` ve elle URL kuran uygulamalar için.
+ * @param {string} src Uzak görsel URL'si
+ * @param {{ width: number, quality?: number }} options
+ * @returns {string | null} Allowlist dışıysa null
+ */
+export function remoteImageUrl(src, options) {
+  const remote = getRemoteImages();
+  const allowed = parseAllowedRemoteUrl(src);
+  if (!remote || !allowed) return null;
+
+  const images = getConfig().images;
+  const quality =
+    options.quality ??
+    (images && images !== false ? images.quality : 78) ??
+    78;
+  const width = clampWidth(options.width, remote.maxWidth);
+
+  const params = new URLSearchParams({
+    url: allowed.href,
+    w: String(width),
+    q: String(quality),
+  });
+  return `${remote.path}?${params}`;
+}
+
+/**
+ * @param {number} width
+ * @param {number} maxWidth
+ * @returns {number}
+ */
+export function clampWidth(width, maxWidth) {
+  const n = Math.round(Number(width));
+  if (!Number.isFinite(n) || n < 1) return Math.min(640, maxWidth);
+  return Math.min(n, maxWidth);
+}
+
+/**
+ * Görüntülenen genişliğe göre srcset adayları (1x + 2x + config widths).
+ * @param {number} displayWidth
+ * @param {number[]} widths
+ * @param {number} maxWidth
+ * @returns {number[]}
+ */
+export function srcsetWidths(displayWidth, widths, maxWidth) {
+  const base = Math.max(1, Math.round(displayWidth));
+  const candidates = new Set([
+    base,
+    Math.min(base * 2, maxWidth),
+    ...widths.filter((w) => w >= base && w <= maxWidth),
+  ]);
+  return [...candidates].sort((a, b) => a - b);
+}
+
+/**
+ * @param {import('express').Express} app
+ * @returns {Promise<void>}
+ */
+export async function mountImageOptimizer(app) {
+  const remote = getRemoteImages();
+  if (!remote) return;
+
+  const config = getConfig();
+  cacheDir = path.join(config.dirs.generated, "image-cache");
+  fs.mkdirSync(cacheDir, { recursive: true });
+
+  sharpModule = await tryImportFromApp(config.root, "sharp");
+  if (!sharpModule) {
+    console.warn(
+      "[images.remote] sharp not installed; optimizer will redirect to the source URL",
+    );
+  }
+
+  app.get(remote.path, (req, res) => {
+    void handleOptimize(req, res, remote);
+  });
+}
+
+/**
+ * @param {import('express').Request} req
+ * @param {import('express').Response} res
+ * @param {import('../config/index.js').ImagesRemoteConfig} remote
+ */
+async function handleOptimize(req, res, remote) {
+  const rawUrl = typeof req.query.url === "string" ? req.query.url : "";
+  const allowed = parseAllowedRemoteUrl(rawUrl);
+  if (!allowed) {
+    res.status(400).type("text").send("Invalid or disallowed image url");
+    return;
+  }
+
+  const images = getConfig().images;
+  const defaultQ = images && images !== false ? images.quality : 78;
+  const quality = clampQuality(
+    typeof req.query.q === "string" ? req.query.q : defaultQ,
+    defaultQ,
+  );
+  const width = clampWidth(
+    typeof req.query.w === "string" ? req.query.w : 640,
+    remote.maxWidth,
+  );
+
+  if (!sharpModule) {
+    res.redirect(302, allowed.href);
+    return;
+  }
+
+  const key = cacheKey(allowed.href, width, quality);
+  const filePath = path.join(/** @type {string} */ (cacheDir), `${key}.webp`);
+
+  try {
+    if (fs.existsSync(filePath)) {
+      sendCached(res, filePath, remote.cacheMaxAge);
+      return;
+    }
+
+    const upstream = await fetchUpstream(allowed.href, remote);
+    if (!upstream.ok) {
+      res.status(502).type("text").send("Upstream image fetch failed");
+      return;
+    }
+
+    const sharp = sharpModule.default;
+    const buffer = await sharp(upstream.buffer, { failOn: "none" })
+      .rotate()
+      .resize({
+        width,
+        withoutEnlargement: true,
+        fit: "inside",
+      })
+      .webp({ quality, effort: 4 })
+      .toBuffer();
+
+    // Atomik yaz: yarım dosya immutable cache'e düşmesin.
+    const tmp = `${filePath}.${process.pid}.tmp`;
+    await fs.promises.writeFile(tmp, buffer);
+    await fs.promises.rename(tmp, filePath);
+
+    sendCached(res, filePath, remote.cacheMaxAge);
+  } catch (error) {
+    console.warn("[images.remote] optimize failed:", error);
+    // Bozuk kaynakta sayfa boş kalmasın: orijinale düş.
+    if (!res.headersSent) res.redirect(302, allowed.href);
+  }
+}
+
+/**
+ * @param {string} href
+ * @param {import('../config/index.js').ImagesRemoteConfig} remote
+ * @returns {Promise<{ ok: true, buffer: Buffer } | { ok: false }>}
+ */
+async function fetchUpstream(href, remote) {
+  const controller = new AbortController();
+  const timer = setTimeout(() => controller.abort(), remote.fetchTimeoutMs);
+
+  try {
+    const response = await fetch(href, {
+      signal: controller.signal,
+      redirect: "follow",
+      headers: {
+        // Bazı CDN'ler bot UA reddeder; tarayıcıya yakın tut.
+        Accept: "image/avif,image/webp,image/*,*/*;q=0.8",
+        "User-Agent": "jskelet-image-optimizer/1",
+      },
+    });
+
+    if (!response.ok) return { ok: false };
+
+    const type = response.headers.get("content-type") ?? "";
+    if (type && !type.startsWith("image/") && !type.includes("octet-stream")) {
+      return { ok: false };
+    }
+
+    const length = Number(response.headers.get("content-length") ?? 0);
+    if (length > remote.maxBytes) return { ok: false };
+
+    const buffer = Buffer.from(await response.arrayBuffer());
+    if (buffer.byteLength > remote.maxBytes) return { ok: false };
+
+    return { ok: true, buffer };
+  } catch {
+    return { ok: false };
+  } finally {
+    clearTimeout(timer);
+  }
+}
+
+/**
+ * @param {import('express').Response} res
+ * @param {string} filePath
+ * @param {number} maxAge
+ */
+function sendCached(res, filePath, maxAge) {
+  res.setHeader("Content-Type", "image/webp");
+  res.setHeader(
+    "Cache-Control",
+    `public, max-age=${maxAge}, stale-while-revalidate=${Math.min(maxAge, 86400)}`,
+  );
+  res.setHeader("Vary", "Accept");
+  res.sendFile(path.resolve(filePath));
+}
+
+/**
+ * @param {string} href
+ * @param {number} width
+ * @param {number} quality
+ * @returns {string}
+ */
+function cacheKey(href, width, quality) {
+  return crypto
+    .createHash("sha256")
+    .update(`webp-q${quality}-e4:${width}:${href}`)
+    .digest("hex")
+    .slice(0, 32);
+}
+
+/**
+ * @param {unknown} value
+ * @param {number} fallback
+ * @returns {number}
+ */
+function clampQuality(value, fallback) {
+  const n = Math.round(Number(value));
+  if (!Number.isFinite(n)) return fallback;
+  return Math.min(100, Math.max(1, n));
+}

package/src/views/helpers/tags.js

@@ -4,6 +4,11 @@
  */
 import { attrs, esc, cn } from "./html.js";
 import { asset, getSpriteIds, optimizedImage } from "../../server/assets.js";
+import {
+  parseAllowedRemoteUrl,
+  remoteImageUrl,
+  srcsetWidths,
+} from "../../server/image-optimizer.js";
 import { getRequestContext, markTainted } from "../../http/request-context.js";
 import { getSignedCookie, randomToken, setSignedCookie } from "../../http/cookies.js";
 import { getConfig } from "../../config/index.js";
@@ -53,7 +58,11 @@ export function link(props) {
  * `next/image` karşılığı. `public/` altındaki yerel görseller için build'de
  * üretilen webp varyantları (`build/tasks/images.mjs`) otomatik olarak
  * `srcset` + intrinsic `width`/`height` olarak eklenir; manifest'te olmayan
- * ya da uzak görseller olduğu gibi basılır.
+ * yerel yollar olduğu gibi basılır.
+ *
+ * `images.remote.allowHosts` açıksa uzak http(s) URL'leri `/_jskelet/image`
+ * proxy'sine çevrilir (webp + `w`). `unoptimized` veya elle `srcset` bunu
+ * atlar.
  *
  * `priority` LCP görselleri için `fetchpriority=high` + eager yükleme yapar.
  * @param {{ src: string, alt: string, width?: number, height?: number,
@@ -79,20 +88,27 @@ export function image(props) {
   } = props;
 
   const optimized = unoptimized || srcset ? undefined : optimizedImage(src);
+  const remote = unoptimized || srcset ? null : remoteResponsive(src, width);
   const largest = optimized?.variants.at(-1);
   // Tek varyant üretilmişse (kaynak zaten küçükse) srcset/sizes gürültüden ibaret.
-  const responsive = optimized && optimized.variants.length > 1;
+  const responsive =
+    (optimized && optimized.variants.length > 1) ||
+    (remote && remote.srcset);
 
   const attributes = attrs({
-    src: largest?.url ?? src,
+    src: largest?.url ?? remote?.src ?? src,
     alt: alt ?? "",
     width: fill ? undefined : (width ?? optimized?.width),
     height: fill ? undefined : (height ?? optimized?.height),
     class: fill
       ? cn("absolute inset-0 h-full w-full object-cover", className)
       : className,
-    sizes: responsive ? (sizes ?? defaultSizes(optimized)) : sizes,
-    srcset: responsive ? toSrcSet(optimized) : srcset,
+    sizes: responsive
+      ? (sizes ?? (optimized ? defaultSizes(optimized) : remote?.sizes))
+      : sizes,
+    srcset: responsive
+      ? (optimized ? toSrcSet(optimized) : remote?.srcset)
+      : srcset,
     loading: loading ?? (priority ? "eager" : "lazy"),
     decoding: priority ? "sync" : "async",
     fetchpriority: priority ? "high" : undefined,
@@ -102,6 +118,37 @@ export function image(props) {
   return `<img${attributes}>`;
 }
 
+/**
+ * Uzak URL → optimizer `src` / `srcset`. Allowlist dışıysa null.
+ * @param {string} src
+ * @param {number | undefined} width
+ * @returns {{ src: string, srcset?: string, sizes?: string } | null}
+ */
+function remoteResponsive(src, width) {
+  if (!parseAllowedRemoteUrl(src)) return null;
+
+  const images = getConfig().images;
+  if (!images || images === false || !images.remote) return null;
+
+  const display = width && width > 0 ? width : 640;
+  const widths = srcsetWidths(display, images.widths, images.remote.maxWidth);
+  const urls = widths
+    .map((w) => {
+      const href = remoteImageUrl(src, { width: w });
+      return href ? `${href} ${w}w` : null;
+    })
+    .filter(Boolean);
+
+  const primary = remoteImageUrl(src, { width: display });
+  if (!primary) return null;
+
+  return {
+    src: primary,
+    srcset: urls.length > 1 ? urls.join(", ") : undefined,
+    sizes: `(max-width: ${display}px) 100vw, ${display}px`,
+  };
+}
+
 /**
  * @param {import("../../server/assets.js").OptimizedImage} optimized
  * @returns {string}