Merge pull request #1831 from dubinc/iframeable

Remove iframeable check on demand

Author: steven-tey

apps/web/lib/api/links/cache.ts

@@ -19,7 +19,7 @@ class LinkCache {
 
     const redisLinks = await Promise.all(
       links.map(async (link) => ({
-        ...(await formatRedisLink(link)),
+        ...formatRedisLink(link),
         key: link.key.toLowerCase(),
         domain: link.domain.toLowerCase(),
       })),
@@ -40,7 +40,7 @@ class LinkCache {
   }
 
   async set(link: ExpandedLink) {
-    const redisLink = await formatRedisLink(link);
+    const redisLink = formatRedisLink(link);
     const hasWebhooks = redisLink.webhookIds && redisLink.webhookIds.length > 0;
 
     return await redis.set(

apps/web/lib/middleware/link.ts

@@ -90,7 +90,7 @@ export default async function LinkMiddleware(
     }
 
     // format link to fit the RedisLinkProps interface
-    link = await formatRedisLink(linkData as any);
+    link = formatRedisLink(linkData as any);
 
     ev.waitUntil(linkCache.set(linkData as any));
   }
@@ -102,7 +102,6 @@ export default async function LinkMiddleware(
     trackConversion,
     proxy,
     rewrite,
-    iframeable,
     expiresAt,
     ios,
     android,
@@ -280,41 +279,28 @@ export default async function LinkMiddleware(
       }),
     );
 
-    if (iframeable) {
-      return createResponseWithCookie(
-        NextResponse.rewrite(
-          new URL(
-            `/cloaked/${encodeURIComponent(
-              getFinalUrl(url, {
-                req,
-                clickId: trackConversion ? clickId : undefined,
-              }),
-            )}`,
-            req.url,
-          ),
-          {
-            headers: {
-              ...DUB_HEADERS,
-              ...(!shouldIndex && {
-                "X-Robots-Tag": "googlebot: noindex",
-              }),
-            },
-          },
+    return createResponseWithCookie(
+      NextResponse.rewrite(
+        new URL(
+          `/cloaked/${encodeURIComponent(
+            getFinalUrl(url, {
+              req,
+              clickId: trackConversion ? clickId : undefined,
+            }),
+          )}`,
+          req.url,
         ),
-        { clickId, path: `/${originalKey}` },
-      );
-    } else {
-      // if link is not iframeable, use Next.js rewrite instead
-      return createResponseWithCookie(
-        NextResponse.rewrite(url, {
+        {
           headers: {
             ...DUB_HEADERS,
-            ...(!shouldIndex && { "X-Robots-Tag": "googlebot: noindex" }),
+            ...(!shouldIndex && {
+              "X-Robots-Tag": "googlebot: noindex",
+            }),
           },
-        }),
-        { clickId, path: `/${originalKey}` },
-      );
-    }
+        },
+      ),
+      { clickId, path: `/${originalKey}` },
+    );
 
     // redirect to iOS link if it is specified and the user is on an iOS device
   } else if (ios && userAgent(req).os?.name === "iOS") {

apps/web/lib/types.ts

@@ -85,7 +85,6 @@ export interface RedisLinkProps {
   password?: boolean;
   proxy?: boolean;
   rewrite?: boolean;
-  iframeable?: boolean;
   expiresAt?: Date;
   expiredUrl?: string;
   ios?: string;

apps/web/lib/upstash/format-redis-link.ts

@@ -1,13 +1,9 @@
-import { isIframeable } from "@dub/utils";
 import { ExpandedLink } from "../api/links/utils/transform-link";
 import { RedisLinkProps } from "../types";
 
-export async function formatRedisLink(
-  link: ExpandedLink,
-): Promise<RedisLinkProps> {
+export function formatRedisLink(link: ExpandedLink): RedisLinkProps {
   const {
     id,
-    domain,
     url,
     trackConversion,
     password,
@@ -34,7 +30,6 @@ export async function formatRedisLink(
     ...(url &&
       rewrite && {
         rewrite: true,
-        iframeable: await isIframeable({ url, requestDomain: domain }),
       }),
     ...(expiresAt && { expiresAt: new Date(expiresAt) }),
     ...(expiredUrl && { expiredUrl }),

apps/web/scripts/update-noindex.ts

@@ -1,7 +1,7 @@
 import { AlertCircleFill, CheckCircleFill, X } from "@/ui/shared/icons";
-import { Tooltip, useMediaQuery } from "@dub/ui";
+import { SimpleTooltipContent, Tooltip, useMediaQuery } from "@dub/ui";
 import { LoadingSpinner } from "@dub/ui/icons";
-import { cn, fetcher, isValidUrl as isValidUrlFn } from "@dub/utils";
+import { fetcher, isValidUrl as isValidUrlFn } from "@dub/utils";
 import { AnimatePresence, motion } from "framer-motion";
 import { ReactNode, useMemo } from "react";
 import { useFormContext } from "react-hook-form";
@@ -121,10 +121,10 @@ function LinkCloakingToggleBadge({
         icon={
           isLoading ? (
             <LoadingSpinner className="size-3.5" />
-          ) : !data ? null : data?.iframeable ? (
+          ) : !data ? null : data.iframeable ? (
             <CheckCircleFill className="size-3.5 text-green-500" />
           ) : (
-            <AlertCircleFill className="size-3.5 text-yellow-500" />
+            <AlertCircleFill className="size-3.5 text-amber-500" />
           )
         }
       />
@@ -135,48 +135,26 @@ function LinkCloakingToggleBadge({
   return data ? (
     <Tooltip
       content={
-        <div
-          className={cn(
-            "block max-w-lg text-pretty p-4 text-center text-sm text-gray-700",
-            {
-              "max-w-sm": !data.iframeable,
-            },
-          )}
-        >
-          {data.iframeable ? (
-            <div className="grid gap-2">
-              <div className="h-[250px] w-[444px] overflow-hidden rounded-lg border border-gray-200">
-                <iframe
-                  src={url}
-                  style={{
-                    zoom: 0.5,
-                  }}
-                  className="h-[500px] w-[888px]"
-                />
-              </div>
-              <p>Your link will be successfully cloaked.</p>
+        data.iframeable ? (
+          <div className="grid max-w-lg gap-2 text-pretty p-4 text-center text-sm text-gray-700">
+            <div className="h-[250px] w-[444px] overflow-hidden rounded-lg border border-gray-200">
+              <iframe
+                src={url}
+                style={{
+                  zoom: 0.5,
+                }}
+                className="h-[500px] w-[888px]"
+              />
             </div>
-          ) : (
-            <span>
-              We will try to cloak it with{" "}
-              <a
-                href="https://nextjs.org/docs/pages/api-reference/functions/next-response#rewrite"
-                target="_blank"
-                className="text-gray-500 underline underline-offset-2 hover:text-gray-700"
-              >
-                Next.js Rewrites
-              </a>
-              , but it might not work as expected.{" "}
-              <a
-                href="https://dub.co/help/article/link-cloaking"
-                target="_blank"
-                className="text-gray-500 underline underline-offset-2 hover:text-gray-700"
-              >
-                Learn more.
-              </a>
-            </span>
-          )}
-        </div>
+            <p>Your link will be successfully cloaked.</p>
+          </div>
+        ) : (
+          <SimpleTooltipContent
+            title="Your link is not cloakable – make sure you have the right security headers set on your target URL."
+            cta="Learn more"
+            href="https://dub.co/help/article/link-cloaking#link-cloaking-with-security-headers"
+          />
+        )
       }
     >
       <div>{badge}</div>

apps/web/ui/modals/link-builder/options-list.tsx

@@ -29,5 +29,5 @@ export const isIframeable = async ({
     return false;
   }
 
-  return false;
+  return true;
 };