1001Ferramentas
🖼️Utilitários

Gerador de iframe

Monta um <iframe> genérico com src, largura, altura e atributos opcionais (sandbox, allow).


  

Embutir uma página dentro da outra sem susto

Você precisa encaixar um mapa, um vídeo ou um formulário externo dentro da sua página e acaba copiando um iframe velho de outro projeto, com largura errada e atributos que nem sabe para que servem. Aí vem a dúvida chata: sandbox leva quais valores mesmo? Allow é separado por ponto e vírgula ou por vírgula? Este gerador monta a tag inteira enquanto você digita, então você vê o resultado antes de colar no HTML.

Por dentro não tem mágica: os cinco campos viram uma string com src, width, height e, se preenchidos, sandbox e allow. Tem uma pegadinha importante nesse comportamento. Deixar o campo Sandbox vazio faz o atributo sumir da tag, e iframe sem sandbox roda scripts, formulários e navegação à vontade. Já sandbox com valor vazio, em HTML, é justamente o modo mais restritivo de todos. O gerador não consegue emitir essa versão vazia.

Antes de colar, confira se o site de destino permite ser enquadrado: se ele mandar X-Frame-Options DENY ou um frame-ancestors na CSP, o quadro vem em branco e não há atributo que resolva. Vale acrescentar à mão um title para leitores de tela e loading igual a lazy se o iframe estiver abaixo da dobra. E cuidado com aspas duplas dentro dos campos, porque elas fecham o atributo e quebram a tag. Tudo roda no seu navegador, nada é enviado.

Perguntas frequentes

Por que meu iframe aparece em branco?
Quase sempre o site embutido bloqueia o enquadramento com o cabeçalho X-Frame-Options ou com frame-ancestors na Content-Security-Policy. Isso é decidido no servidor de destino, então nenhum atributo do seu lado contorna.
Que valores posso colocar em sandbox?
Os mais usados são allow-scripts, allow-same-origin, allow-forms, allow-popups e allow-modals, separados por espaço. Combinar allow-scripts com allow-same-origin em conteúdo de terceiros anula boa parte da proteção, porque o script embutido passa a poder remover o próprio sandbox.
Posso usar largura em porcentagem?
O gerador escreve no atributo exatamente o que você digitar, então width igual a 100% sai na tag. Ainda assim, para layout responsivo é melhor deixar os atributos em pixels e controlar o tamanho por CSS.

Ferramentas Relacionadas