fix: allow unsafe (less strict CSP header) content from other domain

app/(api)/preview/[iid]/route.ts

@@ -1,7 +1,7 @@
-import { API_URL } from "../../../../lib/constants";
-import { getFontSize } from "../../../../lib/utils";
-import { InscriptionResponse } from "../../../../lib/types";
 import { redirect } from "next/navigation";
+import { API_URL, UNSAFE_API_URL } from "../../../../lib/constants";
+import { InscriptionResponse } from "../../../../lib/types";
+import { getFontSize } from "../../../../lib/utils";
 
 export async function GET(
   request: Request,

app/(explorer)/layout.tsx

@@ -8,7 +8,7 @@ import Footer from "../../components/Footer";
 import Header from "../../components/Header";
 
 export const metadata: Metadata = {
-  metadataBase: new URL('https://ordinals.hiro.so'),
+  metadataBase: new URL("https://ordinals.hiro.so"),
   title: {
     template: "%s | Hiro Ordinals Explorer",
     default: "Hiro Ordinals Explorer",

components/Thumbnail.tsx

@@ -7,6 +7,7 @@ import IconImage from "./icons/IconImage";
 import IconText from "./icons/IconText";
 import IconVideo from "./icons/IconVideo";
 import Iframe from "./inscriptions/Iframe";
+import { UNSAFE_API_URL } from "../lib/constants";
 
 // todo: add more types
 const safeTypes = ["image/jpeg", "image/png", "image/gif", "image/webp"];
@@ -34,7 +35,7 @@ export const ThumbnailIcon = ({
   if (showImage && safeTypes.includes(inscription.content_type.toLowerCase()))
     return (
       <Iframe
-        src={`${process.env.NEXT_PUBLIC_PREVIEW_URL}/preview/${inscription.id}`}
+        src={`${UNSAFE_API_URL}/inscriptions/${inscription.id}/unsafe`}
         className="pointer-events-none"
       />
     );

components/inscriptions/InscriptionRender.tsx

@@ -1,3 +1,4 @@
+import { UNSAFE_API_URL } from "../../lib/constants";
 import { InscriptionResponse } from "../../lib/types";
 import Iframe from "./Iframe";
 import InscriptionRenderImage from "./InscriptionRenderImage";
@@ -10,6 +11,18 @@ const InscriptionRender = (props: {
   inscription: InscriptionResponse;
   className?: string;
 }) => {
+  if (
+    props.inscription.content_type.startsWith("text/html") ||
+    props.inscription.content_type.startsWith("image/svg+xml")
+  ) {
+    return (
+      <Iframe
+        {...props}
+        src={`${UNSAFE_API_URL}/inscriptions/${props.inscription.id}/unsafe`}
+      />
+    );
+  }
+
   if (props.inscription.content_type.startsWith("image/")) {
     return <InscriptionRenderImage {...props} />;
   }
@@ -18,15 +31,6 @@ const InscriptionRender = (props: {
     return WithContentJson(props, InscriptionRenderJson);
   }
 
-  if (props.inscription.content_type.startsWith("text/html")) {
-    return (
-      <Iframe
-        {...props}
-        src={`${process.env.NEXT_PUBLIC_PREVIEW_URL}/preview/${props.inscription.id}`}
-      />
-    );
-  }
-
   if (props.inscription.content_type.startsWith("text/")) {
     // also handles json parseable content from plain text
     return <InscriptionRenderText {...props} />;

lib/constants.ts

@@ -4,3 +4,7 @@ export const API_URL =
   process.env.NEXT_PUBLIC_API_URL ?? "https://api.hiro.so/ordinals/v1";
 
 export const API_BETA_URL = process.env.NEXT_PUBLIC_API_BETA_URL ?? API_URL;
+
+export const UNSAFE_API_URL =
+  process.env.NEXT_PUBLIC_UNSAFE_API_URL ??
+  "https://ordinals-preview.vercel.app";