Modelo do encurtador em Next.js

Gerado a partir de deploy-templates/nextjs (dado.cloud ab2f4c0).
2026-10-21 14:40:16 +00:00
parent 46bf3d94fd
commit 02de2d5528
5 changed files with 228 additions and 46 deletions
@@ -11,8 +11,10 @@ uma versão nova do seu app, sozinho.
 - `app/page.tsx`: a página (formulário, últimos links e "Sobre este deploy").
 - `app/Encurtador.tsx`: a parte interativa da página (encurtar, copiar, lista).
 - `app/api/links/route.ts`: a API — `POST /api/links` cria, `GET /api/links` lista.
- `app/[codigo]/route.ts`: o redirecionamento `GET /<código>` (302) e a contagem de cliques.
+- `app/[codigo]/route.ts`: a página de aviso `GET /<código>`, que mostra para onde o link leva.
+- `app/[codigo]/ir/route.ts`: o redirecionamento `GET /<código>/ir` (302) e a contagem de cliques.
 - `lib/links.ts`: onde os links ficam guardados (na memória).
+- `lib/paginas.ts`: o HTML da página de aviso e da página de link que não existe.
 - `app/globals.css`: o visual. Mude à vontade.

 Não tem banco de dados: os links ficam na memória do app e **somem quando ele é publicado
@@ -72,7 +74,10 @@ curl https://<endereço-do-seu-app>/api/links
 # 200 {"links":[...]}
 ```

-`GET /<código>` redireciona (302) para o link original e soma um clique. A API aceita
+`GET /<código>` abre uma página de aviso com o endereço de destino e o botão "Continuar",
+que leva a `GET /<código>/ir`: ali o app soma um clique e redireciona (302) para o link
+original. O aviso existe porque o encurtador é público — sem ele, qualquer pessoa poderia
+usar o endereço do seu app para disfarçar um link de golpe. A API aceita
 chamadas de qualquer site (CORS aberto só em `/api/*`), então outro app seu pode usá-la.
 Para evitar abuso, cada IP cria no máximo 30 links a cada 10 minutos.

@@ -0,0 +1,25 @@
+import { buscarLink, FORMATO_CODIGO, registrarClique, type Link } from '@/lib/links';
+import { respostaNaoEncontrada } from '@/lib/paginas';
+
+type Contexto = { params: Promise<{ codigo: string }> };
+
+function redirecionar(link: Link | null): Response {
+  if (!link) return respostaNaoEncontrada();
+  return new Response(null, {
+    status: 302,
+    headers: { Location: link.url, 'Cache-Control': 'no-store', 'Referrer-Policy': 'no-referrer' },
+  });
+}
+
+// O botão "Continuar" leva para GET /<código>/ir: aqui o servidor soma o
+// clique e redireciona (302) para o link.
+export async function GET(_request: Request, { params }: Contexto) {
+  const { codigo } = await params;
+  return redirecionar(FORMATO_CODIGO.test(codigo) ? registrarClique(codigo) : null);
+}
+
+// HEAD (robôs que só conferem o endereço) responde igual, mas não conta clique.
+export async function HEAD(_request: Request, { params }: Contexto) {
+  const { codigo } = await params;
+  return redirecionar(FORMATO_CODIGO.test(codigo) ? buscarLink(codigo) : null);
+}
@@ -1,48 +1,20 @@
-import { FORMATO_CODIGO, registrarClique } from '@/lib/links';
+import { buscarLink, FORMATO_CODIGO } from '@/lib/links';
+import { CSP_AVISO, paginaAviso, respostaNaoEncontrada } from '@/lib/paginas';

-// O redirecionamento é feito pelo servidor: GET /<código> → 302 para o link.
+// GET /<código> não redireciona direto: mostra antes uma página de aviso com o
+// destino. Sem ela, qualquer pessoa usaria o seu endereço para disfarçar um
+// link de golpe. A página não conta clique — quem só olha não foi ao destino.
 export async function GET(_request: Request, { params }: { params: Promise<{ codigo: string }> }) {
  const { codigo } = await params;
-  const link = FORMATO_CODIGO.test(codigo) ? registrarClique(codigo) : null;
-  if (!link) {
-    return new Response(PAGINA_NAO_ENCONTRADA, {
-      status: 404,
-      headers: { 'Content-Type': 'text/html; charset=utf-8' },
+  const link = FORMATO_CODIGO.test(codigo) ? buscarLink(codigo) : null;
+  if (!link) return respostaNaoEncontrada();
+  return new Response(paginaAviso(link), {
+    headers: {
+      'Content-Type': 'text/html; charset=utf-8',
+      'Cache-Control': 'no-store',
+      'Referrer-Policy': 'no-referrer',
+      'X-Robots-Tag': 'noindex, nofollow',
+      'Content-Security-Policy': CSP_AVISO,
+    },
  });
 }
-  return new Response(null, { status: 302, headers: { Location: link.url, 'Cache-Control': 'no-store' } });
-}
-
-const PAGINA_NAO_ENCONTRADA = `<!doctype html>
-<html lang="pt-BR">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>Link não encontrado</title>
-    <style>
-      :root { color-scheme: light dark; }
-      body {
-        margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 16px;
-        font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-        background: #f6f7f9; color: #14161a; line-height: 1.5;
-      }
-      main { max-width: 420px; text-align: center; }
-      h1 { font-size: 24px; margin: 0 0 8px; }
-      p { color: #5b6270; margin: 0 0 20px; }
-      a { color: #3b5bdb; font-weight: 600; }
-      @media (prefers-color-scheme: dark) {
-        body { background: #0f1115; color: #eceef2; }
-        p { color: #9aa1ad; }
-        a { color: #8299ff; }
-      }
-    </style>
-  </head>
-  <body>
-    <main>
-      <h1>Link não encontrado</h1>
-      <p>Esse link curto não existe ou sumiu quando o app foi publicado de novo.</p>
-      <a href="/">Encurtar um link</a>
-    </main>
-  </body>
-</html>
-`;
@@ -75,6 +75,11 @@ export function listarLinks(): Link[] {
  return [...links.values()].slice(-LINKS_NA_LISTA).reverse();
 }

+/** O link do código, ou null se ele não existe (não soma clique). */
+export function buscarLink(codigo: string): Link | null {
+  return links.get(codigo) ?? null;
+}
+
 /** Soma um clique e devolve o link, ou null se o código não existe. */
 export function registrarClique(codigo: string): Link | null {
  const link = links.get(codigo);
@@ -0,0 +1,175 @@
+import type { Link } from './links';
+
+// As páginas que o servidor devolve fora do React (aviso antes de sair e link
+// não encontrado). São as mesmas dos modelos Express e FastAPI.
+
+const escaparHtml = (texto: string) =>
+  texto.replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[c]!);
+
+/**
+ * Página de aviso antes de sair: mostra para onde o link leva. Todo valor é
+ * escapado (o link foi digitado por alguém) e entra numa passada só, para um
+ * valor nunca ser lido como outro marcador.
+ */
+export function paginaAviso(link: Link): string {
+  const valores: Record<string, string> = { HOST: new URL(link.url).host, URL: link.url, CODIGO: link.codigo };
+  return MODELO_AVISO.replace(/\{\{(HOST|URL|CODIGO)\}\}/g, (_, chave: string) => escaparHtml(valores[chave]));
+}
+
+// A página de aviso não roda script nenhum: o navegador só aceita o CSS dela.
+export const CSP_AVISO =
+  "default-src 'none'; style-src 'unsafe-inline'; img-src data:; frame-ancestors 'none'; base-uri 'none'; form-action 'none'";
+
+export function respostaNaoEncontrada(): Response {
+  return new Response(PAGINA_NAO_ENCONTRADA, {
+    status: 404,
+    headers: { 'Content-Type': 'text/html; charset=utf-8' },
+  });
+}
+
+const MODELO_AVISO = `<!doctype html>
+<html lang="pt-BR">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="robots" content="noindex, nofollow" />
+    <meta name="referrer" content="no-referrer" />
+    <title>Você está saindo deste site</title>
+    <link
+      rel="icon"
+      href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='8' fill='%233b5bdb'/%3E%3Cpath d='M13.5 18.5l5-5M12 15l-2 2a3.5 3.5 0 005 5l2-2M20 17l2-2a3.5 3.5 0 00-5-5l-2 2' stroke='white' stroke-width='2.2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"
+    />
+    <style>
+      /* Página de aviso antes de sair: mesmo visual da página inicial. */
+      :root {
+        --fundo: #f6f7f9;
+        --cartao: #ffffff;
+        --texto: #14161a;
+        --suave: #5b6270;
+        --borda: #e3e6eb;
+        --destaque: #3b5bdb;
+        --destaque-texto: #ffffff;
+        --destaque-suave: #edf1ff;
+        --raio: 14px;
+        --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
+        color-scheme: light dark;
+      }
+      @media (prefers-color-scheme: dark) {
+        :root {
+          --fundo: #0f1115;
+          --cartao: #171a21;
+          --texto: #eceef2;
+          --suave: #9aa1ad;
+          --borda: #2a2f3a;
+          --destaque: #8299ff;
+          --destaque-texto: #0f1115;
+          --destaque-suave: #1e2540;
+        }
+      }
+      * { box-sizing: border-box; }
+      body {
+        margin: 0;
+        font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+        background: var(--fundo);
+        color: var(--texto);
+        line-height: 1.5;
+        -webkit-text-size-adjust: 100%;
+      }
+      .pagina { max-width: 640px; margin: 0 auto; padding: 56px 16px 32px; }
+      .topo { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
+      .marca {
+        flex: none; width: 40px; height: 40px; border-radius: 10px;
+        background: var(--destaque); color: var(--destaque-texto);
+        display: grid; place-items: center;
+      }
+      h1 { font-size: 28px; line-height: 1.2; margin: 0; letter-spacing: -0.02em; }
+      .lead { color: var(--suave); margin: 0 0 24px; }
+      .cartao { background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); padding: 20px; }
+      .rotulo { margin: 0; font-size: 13px; color: var(--suave); }
+      .host { margin: 2px 0 0; font-family: var(--mono); font-size: 22px; font-weight: 700; overflow-wrap: anywhere; }
+      .url-completa {
+        margin: 12px 0 0; padding: 12px 14px; border-radius: 10px; background: var(--destaque-suave);
+        font-family: var(--mono); font-size: 14px; overflow-wrap: anywhere;
+      }
+      .cuidado { margin: 16px 0 0; font-size: 14px; color: var(--suave); }
+      .acoes { display: flex; align-items: center; gap: 16px; margin-top: 20px; }
+      .botao {
+        font-weight: 600; padding: 12px 20px; border-radius: 10px; text-decoration: none;
+        background: var(--destaque); color: var(--destaque-texto); overflow-wrap: anywhere;
+      }
+      .voltar { color: var(--destaque); font-weight: 600; }
+      a:focus-visible { outline: 2px solid var(--destaque); outline-offset: 2px; }
+      .rodape { margin-top: 32px; text-align: center; font-size: 13px; color: var(--suave); }
+      .rodape a { color: inherit; }
+      @media (max-width: 480px) {
+        .pagina { padding-top: 32px; }
+        h1 { font-size: 24px; }
+        .host { font-size: 20px; }
+        .acoes { flex-direction: column; align-items: stretch; text-align: center; }
+      }
+    </style>
+  </head>
+  <body>
+    <main class="pagina">
+      <header class="topo">
+        <span class="marca" aria-hidden="true">
+          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round">
+            <path d="M10 14l4-4M8.5 11.5l-1.8 1.8a3.2 3.2 0 004.5 4.5l1.8-1.8M15.5 12.5l1.8-1.8a3.2 3.2 0 00-4.5-4.5l-1.8 1.8" />
+          </svg>
+        </span>
+        <h1>Você está saindo deste site</h1>
+      </header>
+      <p class="lead">Este link curto leva para outro endereço.</p>
+
+      <section class="cartao" aria-label="Destino do link">
+        <p class="rotulo">Você está indo para</p>
+        <p class="host">{{HOST}}</p>
+        <p class="url-completa">{{URL}}</p>
+        <p class="cuidado">
+          Confira se o endereço é o que você esperava. Este encurtador é público: qualquer pessoa pode criar links nele.
+        </p>
+        <div class="acoes">
+          <a class="botao" href="/{{CODIGO}}/ir" rel="noreferrer">Continuar para {{HOST}}</a>
+          <a class="voltar" href="/">Voltar</a>
+        </div>
+      </section>
+
+      <footer class="rodape">Publicado na <a href="https://dado.cloud" target="_blank" rel="noopener">Dado</a></footer>
+    </main>
+  </body>
+</html>
+`;
+
+const PAGINA_NAO_ENCONTRADA = `<!doctype html>
+<html lang="pt-BR">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Link não encontrado</title>
+    <style>
+      :root { color-scheme: light dark; }
+      body {
+        margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 16px;
+        font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+        background: #f6f7f9; color: #14161a; line-height: 1.5;
+      }
+      main { max-width: 420px; text-align: center; }
+      h1 { font-size: 24px; margin: 0 0 8px; }
+      p { color: #5b6270; margin: 0 0 20px; }
+      a { color: #3b5bdb; font-weight: 600; }
+      @media (prefers-color-scheme: dark) {
+        body { background: #0f1115; color: #eceef2; }
+        p { color: #9aa1ad; }
+        a { color: #8299ff; }
+      }
+    </style>
+  </head>
+  <body>
+    <main>
+      <h1>Link não encontrado</h1>
+      <p>Esse link curto não existe ou sumiu quando o app foi publicado de novo.</p>
+      <a href="/">Encurtar um link</a>
+    </main>
+  </body>
+</html>
+`;