Como Criar uma Ferramenta de Ofuscação de Código em HTML e JavaScript
Se você deseja proteger o seu código, um método comum é a ofuscação. Neste tutorial, você aprenderá a criar uma ferramenta simples em HTML e JavaScript para ofuscar o seu código.
Passo 1: Criando o Arquivo HTML
O primeiro passo é criar um arquivo HTML que conterá a interface da ferramenta, onde o usuário poderá inserir o código a ser ofuscado e visualizar o resultado.
Crie um arquivo chamado index.html e insira o seguinte código:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Ferramenta de Ofuscação de Conteúdo</title>
</head>
<body>
<h1>Ferramenta de Ofuscação de Conteúdo</h1>
<textarea id="inputCode" placeholder="Cole seu código aqui..." rows="10" style="width: 100%;"></textarea>
<button onclick="generateScript()">Ofuscar Código</button>
<textarea id="outputCode" readonly placeholder="O código ofuscado aparecerá aqui..." rows="10" style="width: 100%; margin-top: 10px;"></textarea>
<script>
function generateScript() {
const inputCode = document.getElementById('inputCode').value.trim();
if (!inputCode) {
alert('Por favor, cole o código antes de ofuscá-lo!');
return;
}
try {
// Codificar o conteúdo em Base64
const encodedCode = btoa(unescape(encodeURIComponent(inputCode)));
// Gerar o script para exibir o conteúdo protegido
const outputCode =
'<script>' +
'const content = decodeURIComponent(escape(atob("' + encodedCode + '")));' +
'document.open();' +
'document.write(content);' +
'document.close();' +
'</script>';
// Mostrar o código gerado
document.getElementById('outputCode').value = outputCode;
} catch (error) {
alert('Erro ao gerar o script. Verifique o conteúdo e tente novamente.');
console.error('Erro:', error);
}
}
</script>
</body>
</html>Importante: Salve este arquivo na pasta raiz do seu projeto ou na pasta do servidor onde deseja que a ferramenta funcione.
Passo 2: Subindo os Arquivos para o Servidor
Agora, é hora de subir o arquivo para o servidor. Para isso, siga os passos abaixo:
- Conecte-se ao seu servidor via FTP: Você pode usar um cliente FTP como o FileZilla para conectar ao seu servidor e navegar até a pasta onde deseja armazenar a ferramenta.
- Suba o arquivo
index.html: Transfira o arquivoindex.htmlpara o diretório raiz do seu servidor ou para uma pasta específica, conforme sua necessidade. - Teste a ferramenta no navegador: Após o upload, abra o navegador e acesse o arquivo no endereço correspondente. Por exemplo:
https://seusite.com/index.html.
Passo 3: Usando a Ferramenta de Ofuscação
Agora que a ferramenta está no seu servidor, você pode usá-la para ofuscar o código. Para fazer isso:
- Acesse a URL onde você subiu o arquivo
index.htmlno seu navegador. - Cole o código que deseja ofuscar na área de texto "Cole seu código aqui...".
- Clique no botão "Ofuscar Código".
- O código ofuscado aparecerá na área de texto abaixo, pronto para ser copiado.
Exemplo de como o código será transformado:
<script>
const content = decodeURIComponent(escape(atob("Y29uc29sZSBsZXQgc3RhcnQ7")));
document.open();
document.write(content);
document.close();
</script>Prévia da Ferramenta
Abaixo está um exemplo de como a ferramenta será exibida:
https://hostssd.com.br/scripts/criptografia/ofuscador.html