Spaces:

enzostvs
/

deepsite

Running

App Files Files Community

360

enzostvs HF Staff commited on 2 days ago

Commit

b8dd7a1

1 Parent(s): 1bf7173

try to avoid iframe on other website

Browse files

Files changed (5) hide show

app/layout.tsx +2 -0
components/editor/pages/index.tsx +0 -9
components/iframe-detector.tsx +75 -0
components/iframe-warning-modal.tsx +61 -0
middleware.ts +48 -1

app/layout.tsx CHANGED Viewed

@@ -10,6 +10,7 @@ import MY_TOKEN_KEY from "@/lib/get-cookie-name";
 import { apiServer } from "@/lib/api";
 import AppContext from "@/components/contexts/app-context";
 import Script from "next/script";
 const inter = Inter({
   variable: "--font-inter-sans",
@@ -100,6 +101,7 @@ export default async function RootLayout({
       <body
         className={`${inter.variable} ${ptSans.variable} antialiased bg-black dark h-[100dvh] overflow-hidden`}
       >
         <Toaster richColors position="bottom-center" />
         <TanstackProvider>
           <AppContext me={data}>{children}</AppContext>

 import { apiServer } from "@/lib/api";
 import AppContext from "@/components/contexts/app-context";
 import Script from "next/script";
+import IframeDetector from "@/components/iframe-detector";
 const inter = Inter({
   variable: "--font-inter-sans",
       <body
         className={`${inter.variable} ${ptSans.variable} antialiased bg-black dark h-[100dvh] overflow-hidden`}
       >
+        <IframeDetector />
         <Toaster richColors position="bottom-center" />
         <TanstackProvider>
           <AppContext me={data}>{children}</AppContext>

components/editor/pages/index.tsx CHANGED Viewed

@@ -1,12 +1,10 @@
 import { Page } from "@/types";
-// import { PlusIcon } from "lucide-react";
 import { ListPagesItem } from "./page";
 export function ListPages({
   pages,
   currentPage,
   onSelectPage,
-  // onNewPage,
   onDeletePage,
 }: {
   pages: Array<Page>;
@@ -27,13 +25,6 @@ export function ListPages({
           index={i}
         />
       ))}
-      {/* <button
-        className="max-h-14 min-h-14 pl-2 pr-4 py-4 text-neutral-400 cursor-pointer text-sm hover:bg-neutral-900 flex items-center justify-center gap-1 text-nowrap"
-        onClick={onNewPage}
-      >
-        <PlusIcon className="h-3" />
-        New Page
-      </button> */}
     </div>
   );
 }

 import { Page } from "@/types";
 import { ListPagesItem } from "./page";
 export function ListPages({
   pages,
   currentPage,
   onSelectPage,
   onDeletePage,
 }: {
   pages: Array<Page>;
           index={i}
         />
       ))}
     </div>
   );
 }

components/iframe-detector.tsx ADDED Viewed

	@@ -0,0 +1,75 @@

+"use client";
+import { useEffect, useState } from "react";
+import IframeWarningModal from "./iframe-warning-modal";
+export default function IframeDetector() {
+  const [showWarning, setShowWarning] = useState(false);
+  useEffect(() => {
+    // Helper function to check if a hostname is from allowed domains
+    const isAllowedDomain = (hostname: string) => {
+      const host = hostname.toLowerCase();
+      return (
+        host.endsWith(".huggingface.co") ||
+        host.endsWith(".hf.co") ||
+        host === "huggingface.co" ||
+        host === "hf.co"
+      );
+    };
+    // Check if the current window is in an iframe
+    const isInIframe = () => {
+      try {
+        return window.self !== window.top;
+      } catch {
+        // If we can't access window.top due to cross-origin restrictions,
+        // we're likely in an iframe
+        return true;
+      }
+    };
+    // Additional check: compare window location with parent location
+    const isEmbedded = () => {
+      try {
+        return window.location !== window.parent.location;
+      } catch {
+        // Cross-origin iframe
+        return true;
+      }
+    };
+    // Check if we're in an iframe from a non-allowed domain
+    const shouldShowWarning = () => {
+      if (!isInIframe() && !isEmbedded()) {
+        return false; // Not in an iframe
+      }
+      try {
+        // Try to get the parent's hostname
+        const parentHostname = window.parent.location.hostname;
+        return !isAllowedDomain(parentHostname);
+      } catch {
+        // Cross-origin iframe - try to get referrer instead
+        try {
+          if (document.referrer) {
+            const referrerUrl = new URL(document.referrer);
+            return !isAllowedDomain(referrerUrl.hostname);
+          }
+        } catch {
+          // If we can't determine the parent domain, assume it's not allowed
+        }
+        return true;
+      }
+    };
+    if (shouldShowWarning()) {
+      // Show warning modal instead of redirecting immediately
+      setShowWarning(true);
+    }
+  }, []);
+  return (
+    <IframeWarningModal isOpen={showWarning} onOpenChange={setShowWarning} />
+  );
+}

components/iframe-warning-modal.tsx ADDED Viewed

	@@ -0,0 +1,61 @@

+"use client";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { ExternalLink, AlertTriangle } from "lucide-react";
+interface IframeWarningModalProps {
+  isOpen: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+export default function IframeWarningModal({
+  isOpen,
+  onOpenChange,
+}: IframeWarningModalProps) {
+  const handleVisitSite = () => {
+    window.top!.location.href = "https://deepsite.hf.co";
+  };
+  return (
+    <Dialog open={isOpen} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <div className="flex items-center gap-2">
+            <AlertTriangle className="h-5 w-5 text-red-500" />
+            <DialogTitle>Unauthorized Embedding</DialogTitle>
+          </div>
+          <DialogDescription className="text-left">
+            You&apos;re viewing DeepSite through an unauthorized iframe. For the
+            best experience and security, please visit the official website
+            directly.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="bg-muted/50 rounded-lg p-4 space-y-2">
+          <p className="text-sm font-medium">Why visit the official site?</p>
+          <ul className="text-sm text-muted-foreground space-y-1">
+            <li>• Better performance and security</li>
+            <li>• Full functionality access</li>
+            <li>• Latest features and updates</li>
+            <li>• Proper authentication support</li>
+          </ul>
+        </div>
+        <DialogFooter className="flex-col sm:flex-row gap-2">
+          <Button onClick={handleVisitSite} className="w-full sm:w-auto">
+            <ExternalLink className="mr-2 h-4 w-4" />
+            Visit Deepsite.hf.co
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

middleware.ts CHANGED Viewed

@@ -4,7 +4,54 @@ import type { NextRequest } from "next/server";
 export function middleware(request: NextRequest) {
   const headers = new Headers(request.headers);
   headers.set("x-current-host", request.nextUrl.host);
-  return NextResponse.next({ headers });
 }
 export const config = {

 export function middleware(request: NextRequest) {
   const headers = new Headers(request.headers);
   headers.set("x-current-host", request.nextUrl.host);
+  // Check if the request is coming from an iframe
+  const referer = request.headers.get("referer");
+  const currentHost = request.nextUrl.host;
+  const currentOrigin = `${request.nextUrl.protocol}//${currentHost}`;
+  // Helper function to check if a URL is from allowed domains
+  const isAllowedDomain = (url: string) => {
+    try {
+      const urlObj = new URL(url);
+      const hostname = urlObj.hostname.toLowerCase();
+      return hostname.endsWith('.huggingface.co') ||
+             hostname.endsWith('.hf.co') ||
+             hostname === 'huggingface.co' ||
+             hostname === 'hf.co';
+    } catch {
+      return false;
+    }
+  };
+  // If there's a referer and it's not from the same origin, check if it's allowed
+  if (referer && !referer.startsWith(currentOrigin)) {
+    // Additional check: look for iframe-specific headers or indicators
+    const secFetchDest = request.headers.get("sec-fetch-dest");
+    const secFetchMode = request.headers.get("sec-fetch-mode");
+    // If the request is for a document within an iframe context
+    if (secFetchDest === "iframe" ||
+        (secFetchDest === "document" && secFetchMode === "navigate" && referer)) {
+      // Check if the referer is from an allowed domain
+      if (!isAllowedDomain(referer)) {
+        return NextResponse.redirect("https://deepsite.hf.co");
+      }
+    }
+  }
+  // Set headers to prevent framing
+  const response = NextResponse.next({ headers });
+  // Allow embedding only from Hugging Face domains
+  response.headers.set("X-Frame-Options", "SAMEORIGIN");
+  response.headers.set(
+    "Content-Security-Policy",
+    "frame-ancestors 'self' *.huggingface.co *.hf.co huggingface.co hf.co;"
+  );
+  return response;
 }
 export const config = {