2
respostas

Qual config eu passo para permitir que meu app possa ser um iframe?

Olá, estou como duvida no next.js 13, como eu faco para permitir que meu app seja inserido em um iframe?

key: 'Content-Security-Policy', value: 'frame-ancestors *',

seria algo assim? dentro do meu next.config?

2 respostas

Oi!

Beleza, tá indo no caminho certo! No Next.js, dá pra mexer no cabeçalho 'Content-Security-Policy' pra deixar seu app ser inserido num iframe. Mas saca só, a parada da diretiva 'frame-ancestors *' faz com que qualquer site consiga incorporar seu app, o que pode ser meio arriscado dependendo do que você tá fazendo.

Valeu

Opa, vlw pela resposta... Consegui avancar um pouco no projeto.

Sobre o iframe, percebi que ele jã vem por default liberar e daria pra passar 'frame-ancestors http://exemplo.com' para permitir que só as urls listados possam usar, porém, achamos ficou exposto no console, pq ele diz quais estao liberados pra usar. E como serao varias urls de parceiros, optamos em usar o referer pra identificar qual url esta acessando a pagina, mas o problema é que o primeiro acesso assim que roda o projeto ele tem retornado null...

alguem já teve esse problema?

import { NextResponse } from 'next/server'; import { headers } from 'next/headers';

export default async function middleware() { console.log('to sendo chamado'); const headersList = headers(); const referer = headersList.get('referer');

console.log('referer:', referer);

const allowedDomains = [
  'http://localhost:3000/',
  'http://localhost:3001/',

];

if (allowedDomains.includes(referer)) {
  
  return NextResponse.next();
}
return Response.json(
  { success: false, message: 'Forbidden' },
  { status: 403 }
);

}

export const config = { matcher: '/:path*', };

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software