Como funciona o HTML Code Runner

Um mergulho profundo na arquitetura técnica, no modelo de segurança e nas decisões de design por trás da ferramenta.

Visão geral da arquitetura

HTML Code Runner é um aplicativo puramente do lado do cliente. Não há código de processamento de servidor back-end, nenhum snippet de armazenamento de banco de dados e nenhuma chamada de API para serviços externos. Toda a ferramenta é executada no navegador do usuário usando tecnologias padrão da web: HTML, CSS e JavaScript.

O pipeline de execução de código

Ao clicar no botão Executar, ocorre a seguinte sequência:

  1. Code Capture — O conteúdo HTML do editor textarea é lido como uma string
  2. Criação de Blob — A string de código é envolvida em um objeto Blob com tipo MIME text/html
  3. Geração de URL — Um URL de Blob temporário é criado usando URL.createObjectURL()
  4. Carregamento de iframe — O URL do Blob é atribuído ao atributo src do iframe em sandbox.
  5. Renderização — O navegador renderiza o documento HTML dentro do iframe, executando qualquer CSS e JavaScript incorporados
  6. Captura do console — Os métodos console.log, console.error e console.warn são substituídos para canalizar a saída para o painel Saída do console
  7. Limpeza — O URL do Blob é revogado após carregar para liberar memória

Modelo de segurança

A segurança é uma consideração central do projeto. Usamos várias camadas de isolamento:

Iframe em sandbox

O iframe de visualização usa o atributo HTML5 sandbox com as seguintes permissões:

  • allow-scripts — Permite a execução de JavaScript dentro do iframe (necessário para visualizações JS)
  • allow-modals — Permite caixas de diálogo alert(), confirm() e prompt()
  • allow-same-origin — Obrigatório para carregamento de URL do Blob (o conteúdo deve compartilhar a origem com o URL do Blob)

O sandbox explicitamente não inclui:

  • allow-top-navigation — O iframe não pode navegar na página pai
  • allow-forms — Os envios de formulários são bloqueados (evita a exfiltração acidental de dados)
  • allow-popups — As janelas pop-up são bloqueadas

Isolamento de URL de blob

Em vez de injetar código via document.write() ou srcdoc, usamos URLs Blob. Isto proporciona um melhor isolamento porque o navegador trata o URL do Blob como um documento separado com o seu próprio contexto de execução.

Sem processamento no servidor

Seu código nunca é transmitido pela rede. Ele permanece na memória do seu navegador desde o momento em que você digita até fechar a aba. Não há servidor para comprometer, banco de dados para violar e nenhum endpoint de API para explorar.

Projeto do Editor

O editor de código é um elemento

  • Números de linha — Um painel sincronizado somente leitura que exibe números de linha e rola junto com o editor
  • Suporte para tabulação — A tecla Tab insere dois espaços em vez de mover o foco (comportamento padrão do editor de código)
  • Fonte Monospace — Usa JetBrains Mono para melhor legibilidade do código
  • Verificação ortográfica desativada — Impede que o navegador sublinhe "erros ortográficos" do código

Considerações de desempenho

  • Toda a ferramenta é carregada em um único arquivo HTML com dois pequenos arquivos JS e um arquivo CSS
  • Nenhuma estrutura ou biblioteca JavaScript é usada – todo o código é Vanilla JS
  • As fontes são carregadas de forma assíncrona com font-display: swap
  • A ferramenta é interativa em milissegundos após o carregamento da página
  • URLs de blob são revogadas após o uso para evitar vazamentos de memória

Acessibilidade

A ferramenta foi projetada pensando na acessibilidade:

  • Todos os elementos interativos possuem rótulos ARIA
  • O acordeão FAQ usa estados aria-expanded adequados
  • O foco é claramente visível em todos os elementos interativos
  • O contraste de cores atende às diretrizes WCAG AA
  • A ferramenta é totalmente navegável pelo teclado
  • As notificações do Toast usam role="status" e aria-live="polite"

Design Responsivo

A interface se adapta a todos os tamanhos de tela:

  • Desktop (1024px+) — Editor lado a lado e painéis de visualização
  • Tablet (768px–1024px) — Painéis empilhados com layout de largura total
  • Dispositivos móveis (<768px) — Painéis empilhados, navegação recolhida, pontos de toque otimizados

Implementação de SEO

Cada página deste site inclui:

  • Tags de título exclusivas e meta descrições
  • Elementos semânticos HTML5 (cabeçalho, principal, rodapé, navegação, seção, artigo)
  • URLs canônicos para evitar problemas de conteúdo duplicado
  • Dados estruturados (JSON-LD) para esquemas WebPage, SoftwareApplication, FAQPage e BreadcrumbList
  • Tags Hreflang para suporte multilíngue
  • Um único H1 por página com hierarquia de títulos adequada

Experimente o HTML Code Runner →