Mural de recados + Captcha

**areax** · 24 Sep 2011, 01:37

Bom pessoal após um tempo sem programar em php decidi criar um mini-tuto meio que mastigado para o pessoal.

Se trata de um simples mural de recados em PHP e graça ao spammer do Acunetix adicionei um captcha para verificação e mais algumas outras coisinhas.

Go!

1° Criando banco de dados

Crie um banco de dados com nome qualquer, no meu caso 'mural_areax'
Logo, crie uma tabela com um nome qualquer, no meu caso 'mural_recados' com 5 aquivos.

No 1° campo
Nome: class
Tipo: int

No 2° campo
Nome: hora
Tipo: time

No 3° campo
Nome: data
Tipo: data

No 4° campo
Nome: mensagem
Tipo: text

No 5° campo
Nome: nome
Tipo: text

2° Criando conexao.php

Crie um arquivo php chamado conexao.php com o seguinte conteúdo:

Código PHP:


<?php
    $host ="localhost"; // local do DB, geralmente localhost
    $usuario ="root"; //usuario padrão root
    $senha ="****"; //sua senha mysql
    $dbname ="mural_areax"; //nome do banco de dados
    mysql_connect($host,$usuario,$senha) or die(mysql_error()); // realiza a conexão
    mysql_select_db($dbname) or die(mysql_error()); // seleciona o banco de dados
?>

Edite as partes necessárias e vamos para a próxima etapa.

3° Criando o arquivos index.php

Aqui é aonde todos os valores de db serão exibidos e inseridos, vamos lá.
Crie um arquivo php chamado index.php com o seginte conteúdo:

Código PHP:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Formul&aacute;rio de recados</title>
<style>
#content {
    width:600px;
    border:#66b6fc 2px solid;
    margin:0 auto;
    padding:0;
}
.estilo1{
    width:590px;
    background-color:#F7F7F7;
    padding:5px;
    border:#66b6fc 2px solid;
    
}
.estilo2{
    width:590px;
    background-color:#e5e5e5;
    padding:5px;
    border:#66b6fc 2px solid;
    
}

.header_mensa{
    width:300px;
    background: #e5e5e5; /* Old browsers */
background: -moz-linear-gradient(top, #e5e5e5 8%, #ffffff 94%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(8%,#e5e5e5), color-stop(94%,#ffffff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #e5e5e5 8%,#ffffff 94%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #e5e5e5 8%,#ffffff 94%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #e5e5e5 8%,#ffffff 94%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e5e5', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #e5e5e5 8%,#ffffff 94%); /* W3C */
    padding:5px;
    border:#66b6fc 2px solid;
    
    
}

#ap { text-align:center;}
a, a:visited{color:#06C;text-decoration:none;}
a:hover,a:active {color:#034180;text-decoration:underline;}
</style>
</head>

        <script type="text/javascript">
        
        <!-- Função para abrir o Popup -->
        function abrirPagina(link)
        {
        var site = link;
            window.open(site,"_blank","toolbar=no, location=yes, directories=no, status=no, scrollbars=yes, resizable=yes, width=620, height=200, top=30, left=30");
        }
        </script>
        
        <script>
        
        <!-- Função para quantidades de caracteres Máx 150. -->
        function conta() {
        var quant = document.form1.mensagem.value.length;
        var mensagem = document.form1.mensagem.value;
        var maximo = 150;
        var decrescente = maximo-quant;
        document.getElementById('valor').innerHTML = decrescente;
        if(quant > maximo-1) {
        var reduzido = document.form1.mensagem.value.length-1;
        var novo_valor = mensagem.substring(0, reduzido);
        document.form1.mensagem.value=novo_valor;
        return false;
        }
        }
        </script>

<body>

<center><b>Deixe seu comentário!</b></center>
<form id="form1" name="form1" method="post" action="inserindo.php"> <!-- Aqui fica o arquivo inserindo.php-->
  <table width="600" border="0" align="center">
    <tr>
      <th width="86" scope="row">&nbsp;</th>
      <td width="498">&nbsp;</td>
    </tr>
    <tr>
      <th scope="row">Nome</th>
      <td><input name="nome" type="text" id="nome" /></td>
    </tr>
    <tr>
      <th height="56" scope="row">Mensagem</th>
      <td><label>
        <textarea  onKeyup="conta()" name="mensagem" cols="61" rows="7" id="mensagem"></textarea>
      </label></td>
    </tr>
    <tr>
         <th height="56" scope="row">Verificação</th>
      <td><label>
        <img title = "Veirificação AntiSpam!" src="captcha.php"> <!-- Aqui fica o arquivo captcha -->
      </label><div id="valor" style = "float:right;">150</div> <td>
    </tr>
    <tr>
    <td> </td>    
    <td> <input type="text" size = "22" name="palavra"  /></td>    
    
    </tr>
    
    <tr>
      <th scope="row">&nbsp;</th>
      <td><input name="enviar" type="submit" id="enviar" value="Enviar" />
      <input name="limpar" type="reset" id="limpar" value="Limpar" /></td>
    </tr>
    <tr>
      <th scope="row">&nbsp;</th>
      <td>&nbsp;</td>
    </tr>
  </table>
</form>

<div id="content">

<?php
session_start();//Inicia a sessão - Usado para o captcha
include_once("conexao.php");// Abre a conexão com bando de dados

$limit = mysql_query("select * from mural_recados ORDER BY class DESC");//Busca resultados dentro do db de baixo para cima.
$estilo = 1;// Estilo css 'estilo1'

if(!mysql_fetch_array(mysql_query("select * from mural_recados ORDER BY class DESC"))) //Verificação de conteúdo no db
{
echo "
<p><center>Nenhum comentário!</center></p>";//Sem conteúdo.
}
else
{
while($sql = mysql_fetch_array($limit))//Cria um laço com os arrays dos resultados do db.
{

// Estilo css
if($estilo == 1) 
{
$estilo++;
}
elseif($estilo == 2)
{
$estilo--;
}
//Estilo css

$nome        = $sql['nome']; //Recebe nome do db
$mensagem    = $sql['mensagem']; // Recebe mensagem do db
$data        = $sql['data']; //Recebe data do db
$hora        = $sql['hora']; //Recebe hora do db
$class         = $sql['class']; //Recebe class do db

echo "
<div class = content>
<table>
<tr>
<td class = estilo$estilo>
<a style=\"float:right;font-size:25px;cursor:pointer;\" onclick=\"abrirPagina('http://127.0.0.1/mural/popup.php?nome=$nome&mensagem=$mensagem&data=$data&hora=$hora&class=$class&estilo=$estilo');\" title = \"Postado no dia $data às $hora\" href = \"#\" >#{$class}</a>
<b>Nome:</b> {$nome}<br>
<b>Data:</b> {$data}<br>
<b>Hora:</b> {$hora}<br>
</td> 
</tr>
<tr>
<td class = estilo$estilo>
<p>{$mensagem}</p>
</td> 
</tr>
<table>
</div>"; // Exibe os valores
}
}
?>

</div>
</body>
</html>

Repare que o textarea tem um número máximo de caracteres com um simples JS para melhor vizualização do usuário, junto com o popup para cada comentário, vamos ver melhor isso mais à frente.

Nota: Onde está escrito 'mural_recados' você terá que modificar com o nome da sua tabela.

Vamos para o próximo passo.

4° Criando o arquivo inserindo.php

Crie um arquivo php com o nome inserindo.php, neste coloque o seguinte conteúdo:

Código PHP:


<?php
session_start();//inicia a sessão
include("conexao.php"); //conexão com o banco de dados

//capturando as variaveis do form no arquivo index.php
$nome =& $_POST['nome'];
$mensagem =& $_POST['mensagem'];

if (!($_POST["palavra"] == $_SESSION["palavra"]))://Verificação do captcha
?>
<script language="JavaScript">alert('Erro na verificação AntiSpam!');
location.href='http://127.0.0.1/mural/';
</script>
<?
exit;
endif;

//Filtro antixss
$nome_vetor = str_split($nome);//Quebra a string criando uma array com cada letra
$mensagem_vetor = str_split($mensagem);//Quebra a string criando uma array com cada letra

for($i=0;$i < strlen($nome);$i++)// Verificação letra por letra na variável $nome
{
    if(($nome_vetor[$i] == "<") || ($nome_vetor[$i] == ">") || ($nome_vetor[$i] == ";") || ($nome_vetor[$i] == "/") || ($nome_vetor[$i] == "'"))//Verificação de caractere indesejado
    {
    $nome = str_replace("$nome_vetor[$i]",'',$nome);//Caso encontre, substitui por um espaço vazio.
    }
}
for($i=0;$i < strlen($mensagem);$i++)// Verificação letra por letra na variável $mensagem
{
    if(($mensagem_vetor[$i] == "<") || ($mensagem_vetor[$i] == ">") || ($mensagem_vetor[$i] == ";") || ($mensagem_vetor[$i] == "/")  || ($nome_vetor[$i] == "'"))//Verificação de caractere indesejado
    {
    $mensagem = str_replace("$mensagem_vetor[$i]",'',$mensagem);//Caso encontre, substitui por um espaço vazio.
    }
}
//fim filtro antixss

if(strlen($nome) > 30)://Verificação de caractere na variável $nome, Max 30.
?>
<script language="JavaScript">alert('Nome muito extenso!');
location.href='http://127.0.0.1/mural/';
</script>
<?
exit;
endif;

if((empty($nome) || empty($mensagem)) || ((strlen($mensagem)) > 150))://Verificação de campo vazio ou quantidade de caracteres.
?>
<script language="JavaScript">alert('Erro no envio!!');
location.href='http://127.0.0.1/mural/';
</script>
<?
exit;
endif;

//comando sql
$insert = "INSERT INTO mural_recados (nome, mensagem, data, hora) VALUES ('{$nome}', '{$mensagem}', CURDATE(), CURTIME())";

//comando sql para inserir o conteúdo no db
mysql_query($insert) or die ('Não foi possivel inserir os dados, <a href="javascript:history.back()">Voltar</a>');

header("location: index.php") //Retorna a index.php
?>

Nota: Onde está escrito 'mural_recados' você terá que modificar com o nome da sua tabela.

5° Criando arquivo captcha.php

Crie um arquivo php com o nome captcha.php, neste coloque o seguinte conteúdo:

Código PHP:


<?php
   session_start(); // inicia a sessao
   header("Content-type: image/jpeg"); // define o tipo do arquivo
   
   //Váriáveis iniciais
    $largura = "150"; // largura
    $altura = "50"; // altura
    $tamanho_fonte = "25"; // tamanho da fonte
    $quantidade_letras = "5"; // Quantidade de letras
      
    function captcha($largura,$altura,$tamanho_fonte,$quantidade_letras)//Declaração da função
    {
        $imagem = imagecreate($largura,$altura); // define a largura e a altura da imagem
        $fonte = "font.ttf"; //Este é o arquivo fonte, deverá está na mesma pasta do arquivo captcha.php
        $preto  = imagecolorallocate($imagem,0,0,0); // define a cor preta
        $branco = imagecolorallocate($imagem,255,255,255); // define a cor branca
       
        // Forma a palavra conforme o parâmetro $quantidade_letras
        $palavra = substr(str_shuffle("abcdefghijklmnpqrstuvyxwz23456789"),0,($quantidade_letras));//tipos de caracteres
        
        $_SESSION["palavra"] = $palavra; // atribui para a sessao a palavra gerada
        
        for($i = 1; $i <= $quantidade_letras; $i++){
            imagettftext($imagem,$tamanho_fonte,rand(-25,25),($tamanho_fonte*$i),($tamanho_fonte + 10),$branco,$fonte,substr($palavra,($i-1),1)); // atribui as letras a imagem
        }
        imagejpeg($imagem); // gera a imagem
        imagedestroy($imagem); // limpa a imagem da memoria
    }
    
    captcha($largura,$altura,$tamanho_fonte,$quantidade_letras); // executa a funcao captcha passando os parametros recebidos
?>

Para criação do captcha, você precisa de um arquivo fonte, no meu caso eu usei uma que chamei de 'font.ttf', caso queira usar outra existe várias na pastas C:\WINDOWS\Fonts. Ecolha uma de sua preferência copie e jogue na pasta junto com o arquivo captcha.php

Depois disso, vamos para o passo final.

6° Criando o arquivo popup.php

Crien um arquivo php chamado popup.php, neste coloque o seguinte conteúdo:

Código PHP:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style>
.estilo1{
    width:590px;
    background-color:#f0f9ff;
    padding:5px;
    border:black 1px solid;
}
.estilo2{
    width:590px;
    background-color:#ccebff;
    padding:5px;
    border:black 1px solid;
}
</style>

</head>

<body>

<?php
//Captura toas as variáveis pelo método GET
$nome        =& $_GET['nome'];
$mensagem    =& $_GET['mensagem'];
$data        =& $_GET['data'];
$hora        =& $_GET['hora']; 
$class         =& $_GET['class'];
$estilo     =& $_GET['estilo'];

//Filtro antixss
function filtro()
{
global $nome,$mensagem,$data,$hora,$class,$estilo; //Declaração das variáveis globais

    if(preg_match('([<_>_;_/])',$nome.$mensagem.$data.$hora.$class) or (!is_numeric($estilo)) or (!is_numeric($class)))//Verificação de caracteres indesejados.
    {
    return true; //Atribui verdadeiro a função
    }
}
//fim filtro antixss

//Verificação das variáveis
if((isset($nome)) and (isset($mensagem)) and (isset($data)) and (isset($hora)) and (isset($class)) and !(filtro() == true))
{
print "<title>$nome ($data - $hora) #$class</title>";

print "
<div class = \"estilo$estilo\">
<table>
<tr>
<td width = \"8%\"><b>Nome:<b></td> <td>$nome</td>
</tr>
<tr>
<td><b>Data:</b></td> <td>$data</td>
</tr>
<tr>
<td><b>Hora:</b></td><td>$hora</td>
</tr>
<tr>
<td><b>Número:</b></td> <td>$class</td>
</tr>
<tr>
<td colspan = \"2\"><b>Mensagem:</b><br><br>$mensagem</td>
</tr>
</table></div>"; 
}
else
{
print "<h2>Hello ;)</h2>";
}

?>

</div>
</body>
</html>

Bom pessoal basicamente é isso, espero que todos tenham entendido, e para finalizar deixo os arquivos organizadinhos para download.

DOWNLOAD
Senha: ar3ax

Críticas construtivas são sempre bem vindas.!

att, ar3ax

**M4CK** · 24 Sep 2011, 18:03

Realmente bem mastigado.
Parabéns areax .

Abraço.

**R0Dr1g0.** · 24 Sep 2011, 19:07

Ficou muito bom areax,Parabéns.
Achei legal ter comentado as linhas,pelo menos na minha opinião é muito melhor comentar as linhas do que somente explicar o que o código faz e colocar.
Continue assim!

**areax** · 25 Sep 2011, 00:12

Sim sim, comentei as linhas durante a criação do tópico.

att.

**eduardu0** · 26 Sep 2011, 17:27

Areax sempre com tópicos de ótimos conteúdos!

Deixo aqui minha pequena contribuição, mas agora visando o lado negro da força.

Material de 2008 apresentado na Defcon. Não é novo mas o conteúdo é bom, ainda mais se tratando de Defcon.

DEFCON-16-Deciphering-Captcha

http://www.youtube.com/watch?v=inCy3JLvCI4

This presentation will detail two methods of breaking captcha. One uses RainbowCrack to break a visual captcha. The other uses fuzzy logic to break an audio captcha. Both methods are 100% effective. These are real attacks that affect real world software: CVE-2008-2020 CVE-2008-2019. Exploit code is available to the public

CAPTCHAs: Are they really hopeless? (Yes)

http://www.youtube.com/watch?v=8ic1LToPsro

CAPTCHAs are widely used to protect websites against malicious robots. Yet, CAPTCHAs are being broken routinely by spammers, malware authors, and other nefarious characters. This talk will review and demonstrate many of the implementation weaknesses that are routinely exploited to break image-based CAPTCHAs, and offer suggestions for improving the effectiveness of CAPTCHAs. Rather than attempt an in-depth examination of any single CAPTCHA or technique, we will present a broad overview of tools with the aim of making it easy for anyone to take a shot at cracking the CAPTCHAs on present and future high-profile sites.

**Marcelo Moraes** · 26 Sep 2011, 19:19

Olá,

Ótimo tutorial. Parabéns.

Sobre os comentários seguindo a Engenharia de Software nunca devemos comentar o que cada linha irá fazer, e sim a funcionalidade de cada função. Ou seja nunca devemos comentar exemplo

int a=2, b=3;
a=a*b; // Aqui muntiplicamos a váriável a por b armazenando o resultado dentro de a.

Isso é completamente errado em se fazer, o correto seria:

//Função para multiplicar 2 valores, retornando o seu resultado.
function multi(int a, int b){
int mult=a*b;
return mult;
}

Abraços,
Att,
Marcelo Moraes.

**areax** · 26 Sep 2011, 23:44

Obigado pela dica Marcelo.

att.

**souzadc** · 27 Sep 2011, 00:43

Cara,

Parabéns areax, muito bom. Continue nesse caminho.

Sem mais!!!!
=>

Tópico: Mural de recados + Captcha

Ferramentas de Tópicos

Pesquisar Tópico

Exibir

Mural de recados + Captcha

Tags para este Tópico

Permissões de Postagem