@protobase/ui 0.15.1 → 0.15.2

package/dist/data/meta-data.d.ts

@@ -31,6 +31,10 @@ export type MetaData = {
   maps?: {
     style: string;
   };
+  /** The hosts besides the app's own whose images are drawn with the page's referrer (see `FileImage`). */
+  files?: {
+    trustedHosts: string[];
+  };
   /** The plugins the app loads for the user (see `PluginGate`). */
   plugins?: PluginRef[];
   /** The other APIs the app draws resources from for the user, and how far their `/meta` has loaded (see `withSources`). */

package/dist/data/use-meta.js

@@ -37,6 +37,7 @@ const useMeta = () => {
 				...result.meta.runtime && { runtime: result.meta.runtime },
 				...result.meta.errorReporting && { errorReporting: result.meta.errorReporting },
 				...result.meta.maps && { maps: result.meta.maps },
+				...result.meta.files && { files: result.meta.files },
 				...result.meta.plugins && { plugins: result.meta.plugins },
 				...result.meta.sources && { sources: result.meta.sources.map((source) => ({
 					source,

package/dist/live/file-image.js

@@ -1,3 +1,5 @@
+import { imageReferrerPolicy } from "./image-referrer.js";
+import { useTrustedImageHosts } from "./use-trusted-image-hosts.js";
 import { useMemo, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 import { thumbHashToDataURL } from "thumbhash";
@@ -12,9 +14,13 @@ const placeholderImage = (hash) => {
 	}
 	return thumbHashToDataURL(Uint8Array.from(binary, (char) => char.charCodeAt(0)));
 };
-/** An image of a file, its placeholder drawn blurred behind it until it has loaded. */
+/**
+* An image of a file, its placeholder drawn blurred behind it until it has loaded. One from another site than the app's
+* own and its trusted hosts loads without a referrer.
+*/
 const FileImage = ({ image, className, loading }) => {
 	const [loaded, setLoaded] = useState();
+	const trustedHosts = useTrustedImageHosts();
 	const placeholder = useMemo(() => image.placeholder === void 0 ? void 0 : placeholderImage(image.placeholder), [image.placeholder]);
 	const waiting = placeholder !== void 0 && loaded !== image.url;
 	return /* @__PURE__ */ jsx("img", {
@@ -22,6 +28,7 @@ const FileImage = ({ image, className, loading }) => {
 		alt: "",
 		loading,
 		decoding: "async",
+		referrerPolicy: imageReferrerPolicy(image.url, window.location.href, trustedHosts),
 		onLoad: () => setLoaded(image.url),
 		className,
 		style: waiting ? {

package/dist/live/image-referrer.js

@@ -0,0 +1,15 @@
+//#region src/live/image-referrer.ts
+/**
+* The `referrerPolicy` an image at `url` is drawn with on the page at `page`: the browser's default for the page's own
+* origin, a trusted host, or a local image (`data:`, `blob:`); `no-referrer` for any other, so another site never learns
+* which page of the app showed its image.
+*/
+const imageReferrerPolicy = (url, page, trustedHosts) => {
+	if (!URL.canParse(url, page)) return "no-referrer";
+	const target = new URL(url, page);
+	if (target.protocol !== "http:" && target.protocol !== "https:") return void 0;
+	if (target.origin === new URL(page).origin || trustedHosts.includes(target.hostname)) return void 0;
+	return "no-referrer";
+};
+//#endregion
+export { imageReferrerPolicy };

package/dist/live/use-trusted-image-hosts.js

@@ -0,0 +1,14 @@
+import { MetaContext } from "../data/meta-context.js";
+import { useContext, useMemo } from "react";
+//#region src/live/use-trusted-image-hosts.ts
+const hostOf = (url) => URL.canParse(url) ? [new URL(url).hostname] : [];
+/**
+* The hosts besides the page's own whose images are drawn with the page's referrer: those `/meta` names, where the app's
+* providers link public files from, and those of the app's sources. None outside `MetaGate`.
+*/
+const useTrustedImageHosts = () => {
+	const meta = useContext(MetaContext);
+	return useMemo(() => [...meta?.files?.trustedHosts ?? [], ...(meta?.sources ?? []).flatMap(({ source }) => hostOf(source.url))], [meta?.files, meta?.sources]);
+};
+//#endregion
+export { useTrustedImageHosts };

package/dist/package.js

@@ -1,5 +1,5 @@
 //#region package.json
-var version = "0.15.1";
+var version = "0.15.2";
 var protobase = { "pluginApi": 1 };
 //#endregion
 export { protobase, version };