Blog Client side

Após fazer algumas abordagens mais simples à alguns conceitos de Orientação a Objeto em Javascript, hoje irei ensinar como trabalhar com namespaces.

"Registrando" um namespace

Registrar um namespace em javascript, pode ser feito de várias formas possíveis, porém inicialmente irei abordar a forma, que no meu ponto de vista, é a mais fácil e prática.

Para registrar um namespace, basta criar uma variável atribuindo ela à ela mesmo e usando o operador lógico || e logo após {} que definirá a variável como um objeto caso ela esteja indefinida.

Criando o namespace

    //Namespace Carros
    var Carros = Carros || {};
    Carros.quantidade = 3;
    
    alert(Carros.quantidade); // mostrará na tela o valor 3

Uma abordagem mais complexa

Agora que temos o namespace "Carros" criado, vamos fazer uma abordagem um pouco mais complexa ao objeto criando "sub" namespaces. Vejamos o exemplo:

   
    //Namespace HondaCivic
    Carros.HondaCivic = {};
    Carros.HondaCivic.ano = 2011;
    Carros.HondaCivic.cor = "preto";
    
    //Namespace Camaro
    Carros.Camaro = {};
    Carros.Camaro.ano = 2010;
    Carros.Camaro.cor = "amarelo";
    
    //Namespace AudiTT
    Carros.AudiTT = {};
    Carros.AudiTT.ano = 2010;
    Carros.AudiTT.cor = "cinza";
    
    
    alert(Carros.HondaCivic.cor); // mostrará na tela o valor preto
    alert(Carros.HondaCivic.ano); // mostrará na tela o valor 2011

Que tal uma função para registrar vários níveis de namespace?

	function regNS(ns)
	{
		var nameSpaces = ns.split(".");
		var raiz = window;
	
		for(var i=0; i < nameSpaces.length; i  )
		{
			if(typeof raiz[nameSpaces[i]] == "undefined")
			raiz[nameSpaces[i]] = new Object();
			raiz = raiz[nameSpaces[i]];
		}
	}

Exemplo de uso

Para demonstrar o quanto o Javascript é flexível, vou fazer uma demonstração utlizando duas abordagens diferentes de de criar namespaces.

Primeiro, irei criar o namespace Carros conforme no início deste post

	//Namespace Carros
	var Carros = Carros || {};
	Carros.quantidade = 3;

Depois, irei criar o namespace Casa.Garagem utilizando a função regNS que criamos acima

	regNS("Casa.Garagem");

No final, podemos simular herança, atribuindo o namespace Carros ao namespace Casa.Garagem.Carros

	Casa.Garagem.Carros = Carros;
	
	alert(Casa.Garagem.Carros.quantidade);  // mostrará na tela o valor 3

A Cleids Imobiliária ja era cliente da web2, e após mudar seu targeting, encomendou um novo site.

O site atual deles é o www.cleidsimobiliaria.com.br.

Acompanhe agora, como está indo a criação do layout para o novo site.

Página Inicial

 Página interna de listagens em geral

 Página de comparação de imóveis

 Página de exibição do imóvel

Após a fase do photoshop, exportamos as imagens e começamos a montagem.

Acompanhe na integra como anda montagem do site em http://novo.cleidsimobiliaria.com.br/

Ei pessoal, estamos iniciando o processo de desenvolvimento de um novo site para um novo cliente e estamos formatando um novo layout; vamos ao longo do desenvolvimento demonstrando o passo a passo do processo.

Vamos considerar que a logo foi desenvolvida por terceiros a pedido do cliente, apenas estamos trabalhando em cima de uma identidade visual que já existe.

Observem a identidade do cliente, há duas aplicações possíveis:

Primeiro fizemos um esboço grosseiro para ter uma ideia de diagramação:

Depois, partimos para o Photoshop e começamos a layoutar a home do site. Por enquanto, está assim:

Seguindo o pedido do cliente, foram criadas algumas opções de "prova" como fundo levemente texturizado e a área ativa do site em branco, fundo levemente texturizado com o topo do site em branco, fundo levemente texturizado com a parte superior da área ativa do site em branco e fundo e topo 100% branco.

Acompanhe a montagem do site em: http://www.houseimobiliariadf.com.br/

Acompanhe nos prints abaixo:

Assim como qualquer software que tenha interface gráfica, nos sites, a maior parte de dados têm como entrada os formulários.

O grande problema, é que na internet, esses formulários estão na maioria das vezes expostos à qualquer um que tenha acesso a rede.

Problemas estes, que não existiriam se todos os desenvolvedores se preocupassem em tratar essas entradas de dados.

Um formulário pode ser explorado por uma pessoa mal intencionada das seguintes formas:

• File Injection
  Ocorre em campos para upload de arquivos para o site. Muito utilizado em upload de fotos, arquivos de currículos, etc. Uma pessoa mal intencionada poderá fazer upload de xploits do mais diversos tipos e que exploram diversas falhas em servidores, desde falha em permissões até a execução de códigos maliciosos.
  
  Ataques realizado através destes xploits são muito difíceis de detectar pois são originados na porta 80, e o armazenamento desse xploit poderá ser feito em qualquer diretório do site que esteja acessível pela porta 80.
  
  Exemplo de xploit bem utilizado em campos de upload: Rhtools
  
  Como evitar?
  
  1 - Validação do tipo de arquivo no lado do cliente.
  
  2 - Validação do tipo de arquivo no lado do servidor.
  
  3 - Aceitar somente extensões de arquivos confiáveis.
  
  4 - Aceitar somente arquivos com extensões esperadas, ou seja, num campo de currículo, aceitar somente arquivos .doc ou .pdf, num campo de foto aceitar somente .png, .jpg, .gif ou .tiff
  
  
• SQL Injection
  Ocorre em qualquer campo com entrada de dados no formato texto e que tenha ligação com o banco de dados. Uma pessoa mal intencionada poderá passar comandos SQL através de um scape usando ' (áspas simples) e logo após sua instrução maliciosa como "DELETE * FROM contas WHERE 1=1".
  
  Como evitar?
  
  1 - Validação/remoção de caracteres "especiais" do lado cliente
  
  2 - Validação/remoção de caracteres "especiais" do lado servidor 
  
  
• Data Flood
  Ocorre em formulários do tipo "cadastro" com inserção das informações diretamente no banco de dados. Uma pessoa mal intencionada, poderá realizar milhares e até milhões de novos cadastros, e com isso causar diversos transtornos no banco e no software em si, já que o software depende do bom funcionamento do banco consecutivamente.
  
  Em hostings comerciais, onde os ambientes e recursos são compartilhados, é sabido que, mesmo usando SGDBs de grande porte como PostgreSQL, Oracle e SQL Server, tabelas contendo em média ou acima de 10 mil registros, começam a responder de forma muito lenta querys simples como "SELECT id FROM produtos WHERE 1=1;". Alguns servidores começam a "responder de forma lenta" com menos registros, como 5 mil por exemplo. Leve em consideração, que muitos SGDBs, mesmo após você ter excluído o registro, o mesmo "permanece na memória" a fim de futura recuperação deste registro. A exemplo disto, podemos citar o "VACUUM" do PostgreSQl que tem com uma de suas funções, "apagar essa memória recuperável".
  
  Como evitar?
  
  1 - Usar Captcha.
  
  2 - A imagens usadas em Captcha deverão ter fundo com illustrações a fim de evitar a leitura da mesma via OCR.
  
  3 - O código sequencial da Captcha nunca poderá ser repetido, pois mesmo sem OCR, existe possibilidade de recuperar a imagem da Captcha e retorná-la dentro do xploit usado no ataque.

Boa noite pessoal, vamos dar continuidade ao nosso artigo de OO. Vou dar algumas dicas interessantes hoje!

A PROPRIEDADE PROTOTYPE

Essa propriedade nos permite adicionar e, em alguns casos modificar, propriedades ou métodos do construtor após sua definição.

Poderemos adicionar propriedades durante a execução. Todo construtor javascript possui a propriedade function.prototype.

function animal()
{
    
};
// instancia-se o objeto
var cavalo = new animal;  

//altera propriedades do construtor em tempo de execução
cavalo.prototype.orelhas = 2;
cavalo.prototype.olhos = 2;

alert(cavalo.olhos);// alerta 2

Esta propriedade não pode ser usada para sobrescrever nada que ja tenho sido definido no construtor. Uma dica é definir tudo no construtor ou fora do construto via function.prototype

ENCAPSULAMENTO

Não há ainda suporte a encapsulamento no javascript, porém poderemos simular utilzando o escopo. Observem o exemplo:

function animal()
{
    // propriedades públicas
    this.orelhas = 2;
    this.olhos = 2;
	 
	 // propriedades privadas
	 var privada_variavel = "azul";
     
    //método público
    this.emitir_som = function(som) {
            alert(som);
    }

	 //método privado
    var privado_metodo = function() {
            alert();
    }
};
 
var cavalo = new animal;
 
// le propriedade publica do objeto
alert(cavalo.olhos); // alerta -> 2
alert(cavalo.orelhas); // alerta -> 2

// le propriedade privada do objeto
alert(cavalo.privada_variavel); // alerta -> undefined
 
// invoca método público do objeto
cavalo.emitir_som("innhornhornhorn"); // alerta innhornhornhorn

// invoca método privado do objeto
cavalo.privado_metodo(); // retornará erro

O Javascript é de fato orientado à objetos, porém não possui nativamente diversas características desta prática. Originalmente não há herança, não há classes, não é possível acessar métodos públicos diretamente de fora do objeto, etc.

Porém, tudo isso é possível "emular", na maioria da vezes com a poderosa função prototype do JS.

Para se criar um construtor em Javascript, basta criar uma função:

function animal(){};

Para se instanciar o objeto, usamos o new 

var cavalo = new animal;

Caso sua função retorne o objeto

function animal()
{
	return this;
};

não é necessário usar o new

var cavalo = animal;

Métodos e propriedades

function animal()
{
	// propriedade
	this.orelhas = 2;
	this.olhos = 2;
	
	//método
	this.emitir_som = function(som) {
			alert(som);
	}
};

var cavalo = new animal;

// le propriedade do objeto
alert(cavalo.olhos); // alerta -> 2
alert(cavalo.orelhas); // alerta -> 2

// invoca método emitir_som do objeto
cavalo.emitir_som("innhornhornhorn"); // alerta -> innhornhornhorn

Por enquanto é isso. No próximo falarei de encapsulamento e herança.

Nos últimos tempos, um problema recorrente e perigoso em aplicações web conhecido como CSRF (Cross-Site Request Forgery) tem sido muito comentado.

Um ataque de CSRF consiste em inserir requisições em uma sessão já aberta pelo usuário.

O processo básico é: o usuário se autentica em uma aplicação web alvo o usuário utiliza a mesma instância de browser para navegar em um site malévolo o site malévolo manipula o browser para que seja feita uma requisição à aplicação alvo como há uma sessão autenticada aberta para o usuário, a aplicação alvo executa a operação conforme a requisição recebida.

Ou seja, o site malévolo consegue manipular a situação de forma a executar uma ação em nome do usuário. A manipulação do browser citada no item 3 acima pode ser feita de várias formas: se a aplicação alvo aceitar requisições via método GET, basta incluir uma tag <img > contendo todos os parâmetros necessários à aplicação alvo (qualquer outra tag que faça uma requisição HTTP funcionará da mesma forma); usando scripts incluídos na página, o que permite a execução de requisições GET ou POST.

Este ataque é extremamente difícil de ser detectado, dado que um identificador de sessão correto e válido será incluído na requisição recebida pela aplicação e a requisição partirá do mesmo browser e endereço IP das requisições legítimas. A aplicação web não como separar a requisição correspondente ao ataque das requisições legítimas.

< scri pt type="text/javascript" src="codebase/dhtmlxcommon.js" >< /script >
< sc ript type="text/javascript" >// < ![ CDATA[
var postStr="parametro1=valor1&parametro2=valor2";
dhtmlxAjax.post("receberequisicao.asp", encodeURI(postStr), outputResponse);
function outputResponse(loader)
{
	if(loader.xmlDoc.responseText=="sucesso")
	{
		alert("sucesso");
	}
	else
	{
		alert(loader.xmlDoc.responseText);
	}
};
// ]] >< /sc ript >



###### receberequisicao.asp


Form("parametro1")->item();
		my $parametro1=$Request->Form("parametro2")->item();
		
		## rotina que efetua os procedimentos e retorna sucesso ou erro
		
		print "sucesso";

%>