c4ch3c4d3
56 lines
2.1 KiB
Diff
56 lines
2.1 KiB
Diff
diff --git a/src/app/labs/[slug]/page.tsx b/src/app/labs/[slug]/page.tsx
|
|
index eb949ae..bb3d51c 100644
|
|
--- a/src/app/labs/[slug]/page.tsx
|
|
+++ b/src/app/labs/[slug]/page.tsx
|
|
@@ -462,6 +462,19 @@ function markdownToHtml(markdown: string) {
|
|
return micromark(convertGfmTables(markdown), { allowDangerousHtml: true });
|
|
}
|
|
|
|
+function addNoReferrerToExternalImages(html: string) {
|
|
+ return html.replace(/<img\b([^>]*?)>/gi, (imageTag, rawAttrs: string) => {
|
|
+ const srcMatch = /\bsrc=(['"])(https?:\/\/[^"']+)\1/i.exec(rawAttrs);
|
|
+ if (!srcMatch || /\breferrerpolicy\s*=/i.test(rawAttrs)) return imageTag;
|
|
+
|
|
+ const trimmedAttrs = rawAttrs.trimEnd();
|
|
+ const isSelfClosing = trimmedAttrs.endsWith("/");
|
|
+ const attrs = isSelfClosing ? trimmedAttrs.slice(0, -1).trimEnd() : rawAttrs;
|
|
+
|
|
+ return `<img${attrs} referrerpolicy="no-referrer"${isSelfClosing ? " /" : ""}>`;
|
|
+ });
|
|
+}
|
|
+
|
|
export async function generateStaticParams() {
|
|
return getLabSummaries().map((lab) => ({ slug: lab.slug }));
|
|
}
|
|
@@ -503,14 +516,15 @@ export default async function LabPage({
|
|
stripOrdinals: breakoutStyle === "instruction-rails",
|
|
}),
|
|
);
|
|
- const htmlContent =
|
|
+ const htmlContent = addNoReferrerToExternalImages(
|
|
breakoutStyle === "none"
|
|
? baseHtml
|
|
: transformOutsideDetails(baseHtml, (safeHtml) =>
|
|
segmentStepSections(markExplicitInstructionElements(safeHtml, {
|
|
commandPills: breakoutStyle === "command-pills",
|
|
})),
|
|
- );
|
|
+ ),
|
|
+ );
|
|
|
|
return (
|
|
<main className="mx-auto w-full max-w-5xl px-6 py-10">
|
|
diff --git a/src/components/labs/LabContent.tsx b/src/components/labs/LabContent.tsx
|
|
index 6addccf..afdd12f 100644
|
|
--- a/src/components/labs/LabContent.tsx
|
|
+++ b/src/components/labs/LabContent.tsx
|
|
@@ -346,6 +346,7 @@ export function LabContent({ className, html }: LabContentProps) {
|
|
<img
|
|
className="lab-image-modal__image"
|
|
src={zoomedImage.src}
|
|
alt={zoomedImage.alt}
|
|
+ referrerPolicy="no-referrer"
|
|
/>
|
|
</div>
|
|
</div>
|