Modelo do encurtador em Express

Gerado a partir de deploy-templates/express (dado.cloud ab2f4c0).

README.md

@@ -8,9 +8,10 @@ uma versão nova do seu app, sozinho.
 
 ## O que tem aqui
 
-- `server.js`: o servidor — página, API (`POST/GET /api/links`) e o redirecionamento `GET /<código>` (302).
+- `server.js`: o servidor — página, API (`POST/GET /api/links`), o aviso `GET /<código>` e o redirecionamento `GET /<código>/ir` (302).
 - `links.js`: onde os links ficam guardados (na memória) e a validação dos endereços.
 - `paginas/index.html`: a página (HTML, CSS e o JavaScript do formulário). Mude à vontade.
+- `paginas/aviso.html`: a página de aviso que mostra para onde o link leva, antes de sair.
 - `paginas/nao-encontrado.html`: a página de link que não existe.
 
 Não tem banco de dados: os links ficam na memória do app e **somem quando ele é publicado
@@ -70,7 +71,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.
 

links.js

@@ -60,6 +60,11 @@ export function listarLinks() {
   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) {
+  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) {
   const link = links.get(codigo);

paginas/aviso.html

@@ -0,0 +1,111 @@
+<!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>

server.js

@@ -2,7 +2,7 @@ import { readFileSync } from 'node:fs';
 
 import express from 'express';
 
-import { criarLink, ErroDeValidacao, FORMATO_CODIGO, listarLinks, registrarClique } from './links.js';
+import { buscarLink, criarLink, ErroDeValidacao, FORMATO_CODIGO, listarLinks, registrarClique } from './links.js';
 
 const PORTA = Number(process.env.PORT) || 3000;
 // Variável de ambiente de exemplo: na Dado, ela se configura no painel do app.
@@ -31,6 +31,17 @@ const paginaInicial = lerPagina('index.html')
   .replace('{{INICIO}}', () => escaparHtml(inicioFormatado))
   .replace('{{MENSAGEM}}', () => escaparHtml(MENSAGEM));
 const paginaNaoEncontrada = lerPagina('nao-encontrado.html');
+// A página de aviso não roda script nenhum: o navegador só aceita o CSS dela.
+const CSP_AVISO = "default-src 'none'; style-src 'unsafe-inline'; img-src data:; frame-ancestors 'none'; base-uri 'none'; form-action 'none'";
+const modeloAviso = lerPagina('aviso.html');
+
+// 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.
+function paginaAviso(link) {
+  const valores = { HOST: new URL(link.url).host, URL: link.url, CODIGO: link.codigo };
+  return modeloAviso.replace(/\{\{(HOST|URL|CODIGO)\}\}/g, (_, chave) => escaparHtml(valores[chave]));
+}
 
 // Freio simples contra abuso: no máximo 30 links novos a cada 10 minutos por IP.
 const LIMITE_POR_IP = 30;
@@ -98,12 +109,30 @@ app.post('/api/links', (req, res) => {
   }
 });
 
-// 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.
 app.get('/:codigo', (req, res, next) => {
   if (!FORMATO_CODIGO.test(req.params.codigo)) return next();
-  const link = registrarClique(req.params.codigo);
+  const link = buscarLink(req.params.codigo);
   if (!link) return res.status(404).type('html').send(paginaNaoEncontrada);
-  res.set('Cache-Control', 'no-store');
+  res.set({
+    'Cache-Control': 'no-store',
+    'Referrer-Policy': 'no-referrer',
+    'X-Robots-Tag': 'noindex, nofollow',
+    'Content-Security-Policy': CSP_AVISO,
+  });
+  res.type('html').send(paginaAviso(link));
+});
+
+// O botão "Continuar" leva para GET /<código>/ir: aqui o servidor soma o
+// clique e redireciona (302) para o link. HEAD (robôs que só conferem o
+// endereço) responde igual, mas não conta clique.
+app.get('/:codigo/ir', (req, res, next) => {
+  if (!FORMATO_CODIGO.test(req.params.codigo)) return next();
+  const link = req.method === 'HEAD' ? buscarLink(req.params.codigo) : registrarClique(req.params.codigo);
+  if (!link) return res.status(404).type('html').send(paginaNaoEncontrada);
+  res.set({ 'Cache-Control': 'no-store', 'Referrer-Policy': 'no-referrer' });
   res.redirect(302, link.url);
 });