Add sandboxed HTML preview in the file viewer

Opening an HTML file now offers a Preview/Source toggle (like Markdown). Preview
renders the page in an isolated <iframe>: sandbox without allow-same-origin, so the
page gets an opaque origin and can never reach the app's cookies, storage or session.
Page JavaScript is OFF by default; a 'JS' button enables it on demand
(sandbox='allow-scripts'), re-mounting the frame so the flags take effect.

Generalized the viewer's Preview/Source toggle to cover both Markdown and HTML;
added isHtml() and the viewer.runJs/jsOnTitle/jsOffTitle keys (FR/EN, 335 each).
Note: JSX/TSX can't be rendered without a bundler, so those stay syntax-highlighted.

Author: softpython2884

apps/web/src/components/TextDocument.tsx

@@ -1,22 +1,25 @@
 'use client';
 
 /**
- * In-app document surface for text-like files. Renders three ways:
- *   - Markdown (.md …)  → formatted preview (GFM + syntax-highlighted code fences),
- *                         with a Preview/Source toggle.
+ * In-app document surface for text-like files. Renders several ways:
+ *   - Markdown (.md …)  → formatted preview (GFM + syntax-highlighted code fences).
+ *   - HTML (.html …)    → rendered in a sandboxed <iframe> (isolated, opaque origin — it can
+ *                         never reach your session/cookies). Page JavaScript is OFF by default
+ *                         and toggled on demand (sandbox="allow-scripts", no allow-same-origin).
  *   - Code / text       → syntax-highlighted, read-only.
  *   - Edit mode         → a plain monospace editor with Save, when the file is editable.
  *
- * Saving is delegated to `onSave` (the Drive page re-uploads server files as a new version,
- * or re-encrypts and replaces Zero-Knowledge files).
+ * Renderable files (Markdown / HTML) get a Preview/Source toggle. Saving is delegated to
+ * `onSave` (the Drive page re-uploads server files as a new version, or re-encrypts and
+ * replaces Zero-Knowledge files).
  */
 import { useMemo, useState } from 'react';
 import Markdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import rehypeHighlight from 'rehype-highlight';
 import hljs from 'highlight.js';
-import { Eye, Code2, Pencil, Save, Loader2 } from 'lucide-react';
-import { codeLanguage, isMarkdown } from '@/lib/fileType';
+import { Eye, Code2, Pencil, Save, Loader2, Play } from 'lucide-react';
+import { codeLanguage, isHtml, isMarkdown } from '@/lib/fileType';
 import { useT } from '@/lib/i18n';
 import { confirm, toast } from '@/components/ui/overlays';
 
@@ -38,9 +41,13 @@ export function TextDocument({
 }) {
   const { t } = useT();
   const md = isMarkdown(name, mime);
+  const html = isHtml(name, mime);
+  const renderable = md || html;
+
   const [text, setText] = useState(initialText);
   const [editing, setEditing] = useState(false);
-  const [showSource, setShowSource] = useState(false);
+  const [mode, setMode] = useState<'preview' | 'source'>(renderable ? 'preview' : 'source');
+  const [jsEnabled, setJsEnabled] = useState(false);
   const [saving, setSaving] = useState(false);
   const dirty = text !== initialText;
 
@@ -64,27 +71,42 @@ export function TextDocument({
     setEditing(false);
   }
 
+  const showPreview = renderable && mode === 'preview' && !editing;
+
   return (
     <div className="flex h-full w-full max-w-5xl flex-col self-stretch overflow-hidden rounded-lg border border-white/10 bg-ink-900">
       {/* Mini toolbar */}
       <div className="flex shrink-0 items-center justify-between gap-2 border-b border-white/10 px-3 py-2">
-        <div className="flex items-center gap-1">
-          {md && !editing && (
+        <div className="flex items-center gap-2">
+          {renderable && !editing && (
             <div className="flex rounded-lg border border-white/10 p-0.5 text-xs">
               <button
-                className={`flex items-center gap-1 rounded-md px-2 py-1 ${!showSource ? 'bg-white/10 text-zinc-100' : 'text-zinc-400 hover:text-zinc-200'}`}
-                onClick={() => setShowSource(false)}
+                className={`flex items-center gap-1 rounded-md px-2 py-1 ${mode === 'preview' ? 'bg-white/10 text-zinc-100' : 'text-zinc-400 hover:text-zinc-200'}`}
+                onClick={() => setMode('preview')}
               >
                 <Eye size={13} /> {t('viewer.preview')}
               </button>
               <button
-                className={`flex items-center gap-1 rounded-md px-2 py-1 ${showSource ? 'bg-white/10 text-zinc-100' : 'text-zinc-400 hover:text-zinc-200'}`}
-                onClick={() => setShowSource(true)}
+                className={`flex items-center gap-1 rounded-md px-2 py-1 ${mode === 'source' ? 'bg-white/10 text-zinc-100' : 'text-zinc-400 hover:text-zinc-200'}`}
+                onClick={() => setMode('source')}
               >
                 <Code2 size={13} /> {t('viewer.source')}
               </button>
             </div>
           )}
+          {html && showPreview && (
+            <button
+              onClick={() => setJsEnabled((v) => !v)}
+              title={jsEnabled ? t('viewer.jsOnTitle') : t('viewer.jsOffTitle')}
+              className={`flex items-center gap-1 rounded-lg border px-2 py-1 text-xs ${
+                jsEnabled
+                  ? 'border-amber-400/40 bg-amber-400/10 text-amber-300'
+                  : 'border-white/10 text-zinc-400 hover:text-zinc-200'
+              }`}
+            >
+              <Play size={12} /> {t('viewer.runJs')}
+            </button>
+          )}
         </div>
         {editable && onSave && (
           <div className="flex items-center gap-2">
@@ -116,12 +138,24 @@ export function TextDocument({
             spellCheck={false}
             className="h-full w-full resize-none bg-transparent p-4 font-mono text-xs leading-relaxed text-zinc-200 outline-none"
           />
-        ) : md && !showSource ? (
+        ) : showPreview && md ? (
           <div className="md-prose p-5">
             <Markdown remarkPlugins={[remarkGfm]} rehypePlugins={text.length < HIGHLIGHT_LIMIT ? [rehypeHighlight] : []}>
               {text}
             </Markdown>
           </div>
+        ) : showPreview && html ? (
+          <iframe
+            // Re-mount on JS toggle so the sandbox flags actually change. allow-scripts WITHOUT
+            // allow-same-origin gives the page an opaque origin: it can run but can't touch the
+            // app's cookies, storage or session.
+            key={jsEnabled ? 'js' : 'nojs'}
+            title={name}
+            srcDoc={text}
+            sandbox={jsEnabled ? 'allow-scripts' : ''}
+            referrerPolicy="no-referrer"
+            className="h-full w-full border-0 bg-white"
+          />
         ) : (
           <CodeBlock name={name} text={text} highlight={!md} />
         )}
@@ -132,7 +166,7 @@ export function TextDocument({
 
 /** Read-only, syntax-highlighted code/text block. */
 function CodeBlock({ name, text, highlight }: { name: string; text: string; highlight: boolean }) {
-  const html = useMemo(() => {
+  const htmlOut = useMemo(() => {
     if (!highlight || text.length > HIGHLIGHT_LIMIT) return null;
     try {
       const lang = codeLanguage(name);
@@ -145,8 +179,8 @@ function CodeBlock({ name, text, highlight }: { name: string; text: string; high
 
   return (
     <pre className="h-full w-full overflow-auto p-4 text-xs leading-relaxed">
-      {html ? (
-        <code className="hljs bg-transparent !p-0" dangerouslySetInnerHTML={{ __html: html }} />
+      {htmlOut ? (
+        <code className="hljs bg-transparent !p-0" dangerouslySetInnerHTML={{ __html: htmlOut }} />
       ) : (
         <code className="text-zinc-300">{text}</code>
       )}

apps/web/src/lib/fileType.ts

@@ -87,6 +87,12 @@ export function isMarkdown(name: string, mime?: string): boolean {
   return ['md', 'markdown', 'mdown', 'mkd', 'mdx'].includes(e) || (mime ?? '').includes('markdown');
 }
 
+/** True for HTML files, which the viewer can render in a sandboxed iframe. */
+export function isHtml(name: string, mime?: string): boolean {
+  const e = ext(name);
+  return ['html', 'htm', 'xhtml'].includes(e) || (mime ?? '').includes('text/html');
+}
+
 /** Map a filename to a highlight.js language hint (empty = let it auto-detect). */
 export function codeLanguage(name: string): string {
   const e = ext(name);

apps/web/src/lib/i18n.tsx

@@ -49,6 +49,9 @@ const fr: Dict = {
   // file viewer / editor
   'viewer.preview': 'Aperçu',
   'viewer.source': 'Source',
+  'viewer.runJs': 'JS',
+  'viewer.jsOnTitle': 'JavaScript activé — cliquer pour désactiver',
+  'viewer.jsOffTitle': 'Activer le JavaScript de la page (bac à sable isolé)',
   'viewer.edit': 'Éditer',
   'viewer.save': 'Enregistrer',
   'viewer.saving': 'Enregistrement…',
@@ -412,6 +415,9 @@ const en: Dict = {
   'redirect.loading': 'Redirecting…',
   'viewer.preview': 'Preview',
   'viewer.source': 'Source',
+  'viewer.runJs': 'JS',
+  'viewer.jsOnTitle': 'JavaScript enabled — click to disable',
+  'viewer.jsOffTitle': 'Enable the page’s JavaScript (isolated sandbox)',
   'viewer.edit': 'Edit',
   'viewer.save': 'Save',
   'viewer.saving': 'Saving…',