refactor: allow iframe in press release content

components/templates/NewsPage/index.tsx

@@ -1,12 +1,34 @@
 import { FunctionComponent } from "react";
-import sanitizeHtml from "sanitize-html";
+import sanitizeHtml, { defaults, IOptions } from "sanitize-html";
 import {
   AnnouncementsService,
   ReleasesService,
 } from "@/lib/api/noirlab/codegen";
 import { Locale } from "@/lib/i18n/settings";
 import NewsPageClient from "./client";
 
+const sanitize = (dirty: string | undefined) => {
+  if (typeof dirty === "undefined") return;
+
+  try {
+    const { hostname: noirLabHostname } = new URL(
+      `${process.env.NOIRLAB_BASE_URL}`
+    );
+    const sanitizeOptions: IOptions = {
+      allowedTags: [...defaults.allowedTags, "iframe"],
+      allowedAttributes: {
+        ...defaults.allowedAttributes,
+        iframe: ["src", "style", "width", "height", "allowfullscreen"],
+      },
+      allowedIframeHostnames: [noirLabHostname],
+    };
+
+    return sanitizeHtml(dirty, sanitizeOptions);
+  } catch {
+    return;
+  }
+};
+
 const NewsPage: FunctionComponent<{
   section: string;
   data: PageEntry;
@@ -43,8 +65,8 @@ const NewsPage: FunctionComponent<{
         title,
         releaseUrl,
         subtitle,
-        releaseDescription: description ? sanitizeHtml(description) : undefined,
-        links: links ? sanitizeHtml(links) : links,
+        releaseDescription: sanitize(description),
+        links: sanitize(links),
         contacts,
         images,
         videos,
@@ -84,11 +106,9 @@ const NewsPage: FunctionComponent<{
         releaseUrl,
         headline,
         subtitle,
-        releaseDescription: description ? sanitizeHtml(description) : undefined,
-        moreInformation: moreInformation
-          ? sanitizeHtml(moreInformation)
-          : undefined,
-        links: links ? sanitizeHtml(links) : links,
+        releaseDescription: sanitize(description),
+        moreInformation: sanitize(moreInformation),
+        links: sanitize(links),
         contacts,
         images,
         videos,

lib/api/noirlab/index.ts

@@ -9,7 +9,7 @@ import {
 import { Locale } from "@/lib/i18n/settings";
 
 client.setConfig({
-  baseUrl: "https://noirlab.edu",
+  baseUrl: process.env.NOIRLAB_BASE_URL,
 });
 
 export const NOIRLabServices = {

openapi-ts.config.ts

@@ -1,8 +1,12 @@
 import { defineConfig } from "@hey-api/openapi-ts";
+import { loadEnvConfig } from "@next/env";
+
+const projectDir = process.cwd();
+loadEnvConfig(projectDir);
 
 export default defineConfig({
   client: "@hey-api/client-fetch",
-  input: "https://noirlab.edu/public/documentation/schema/",
+  input: `${process.env.NOIRLAB_BASE_URL}/public/documentation/schema/`,
   output: {
     format: "prettier",
     lint: "eslint",

package.json

@@ -106,6 +106,7 @@
   },
   "devDependencies": {
     "@hey-api/openapi-ts": "^0.53.11",
+    "@next/env": "^15.1.3",
     "@rushstack/eslint-patch": "^1.1.4",
     "@storybook/addon-a11y": "^7.0.8",
     "@storybook/addon-essentials": "^7.0.6",

yarn.lock

@@ -2232,6 +2232,11 @@
   resolved "https://registry.yarnpkg.com/@next/env/-/env-14.2.15.tgz#06d984e37e670d93ddd6790af1844aeb935f332f"
   integrity sha512-S1qaj25Wru2dUpcIZMjxeMVSwkt8BK4dmWHHiBuRstcIyOsMapqT4A4jSB6onvqeygkSSmOkyny9VVx8JIGamQ==
 
+"@next/env@^15.1.3":
+  version "15.1.3"
+  resolved "https://registry.yarnpkg.com/@next/env/-/env-15.1.3.tgz#bc747e041cd105170d4cae07cc802e20b4a0c153"
+  integrity sha512-Q1tXwQCGWyA3ehMph3VO+E6xFPHDKdHFYosadt0F78EObYxPio0S09H9UGYznDe6Wc8eLKLG89GqcFJJDiK5xw==
+
 "@next/[email protected]":
   version "14.2.13"
   resolved "https://registry.yarnpkg.com/@next/eslint-plugin-next/-/eslint-plugin-next-14.2.13.tgz#af433f20273d67a6c9c4f840b799977fc101fe52"