Dúvida e Problema com Javascript Obstrusivo

Tenho um grande problema e uma grande dúvida…Vou tentar explicar usando apenas os códigos e a lógica necesária para a compreensão.

Sitema de Adicionar Amigo:
Eeu tenho uma função JavaScript que envia um POST para o PHP após clicar num botão.

Meu botão feito com PHP:
<button id="bnt" onclick="addFriend('addFriend','<php echo $user; ?>'), )">Adicionar Amigo</button>
fica asim:
<button id="bnt" onclick="addFriend('addFriend','renato'), )">Adicionar Amigo</button>

Eu passo dois parâmetros no Onclick e pego os mesmos na função JS, e ai está o problema! “Obstrusividade”

Function addFriend(postType, user) {
//aqui dentro tem o restante da função com o post Ajax e tudo mais
//Tudo funciona perfeitamente
}

Simplesmente, se um usuário que sabe programar, chegar a inspecionar o elemento Button e alterar os parâmetros do HTML, ele pode enviar um convite de amizade para qualquer pessoa que ele conhecer no meu site mesmo se o Button estiver sem o Onclick e com Disabled=“true”…Como eu resolvo isso? como passar parâmentros da maneira correta para que isso não aconteça?

Qualquer dica será muito bem vinda! Agradeço desde já!!!

1 curtida

É complicado, pois se há o botão de adicionar amigo, significa que é uma ação que o usuário consegue realizar, seja por meio visual ou por codificação, aliás, o botão existe para que isso seja fácil e intuitivo para o usuário. Agora, se o mesmo possui conhecimento para abrir o console do navegador e executar o comando, ele apenas está fazendo a ação que ele já consegue de uma forma diferente (desde que isso não vá violar qualquer regra do seu sistema).

O importante é que sejam feitas validações na lógica do seu sistema, e não deixar apenas na tela, como por exemplo o botão como disable = true. Se há uma condição que o deixe desabilitado, então deve ser usada essa mesma condição ao chamar o botão para validar a ação.


Tecnicamente, você pode fazer o bind do click de uma forma mais discreta para dificultar a chamada direta da função:

$( "#idDoBotao" ).bind( "click", function() {
  addFriend('addFriend','renato');
});

Isso evitará que seja colocada a função javascript diretamente no HTML. E, para dificultar ainda mais, o javascript pode ser minificado.


Outra coisa é, em vez de usar o nome do amigo a ser adicionado,você pode usar um ID, e até mesmo utilizar um captcha para validar a ação de adicionar amigo.


Emfim, são vários pontos que podem ser levados em consideração ao validar uma ação do usuário, o importante é que as devidas tratativas sejam feitas para que a lógica do sistema não seja quebrada por alguma ação indevida.

1 curtida

Esses dias estive penando em usar o ID do Usuário ao invés do Nome para dificultar a operação, vou alterar nos meus scripts PHP as validações que faço com o nome do usuário…Em breve

Uma dúvida chama outras dúvidas @Lucas_Camara

Sobre a função BIND, eu uso mais Javcript Puro do que jQuery, ai não sei bem como ficaría esta função em JavaScript no momento, (Saindo daqui vou pesquisar para aprender)…

Outra dúvida, se puder responder, agradeço , os ID’s dos botões em alguns casos são criados dinâmicamente depois do POST com dados retornados em JSON.

Pergunta: Eu poderia usar THIS.ID para substituir a técnica de criar ID’s dinâmico? Qual seria a maneira mais prática? Eu gopsto muito de uar ID’ dinâmico, mas serpa que é legal fazer isso?

Sobre o bind, caso não esteja usando jquery, dá para fazer com js puro, veja: https://codepen.io/anon/pen/jwPjNz?editors=1010

Sobre o uso de ID’s dinâmicos nos elementos HTML, não acho que seja uma boa ideia, pois o ID serve para identificar os elementos e poder manipulá-los mais facilmente, inclusive, para fazer testes automatizados em tela. Caso não seja uma situação bem específica, não vejo razão para usar ID dinâmico.

1 curtida

Voltando a primeira pergunta, se você tá preocupado com a questao de segurança, tudo que fizer no cliente é relativamente fácil de burlar pelo usuário. Mesmo seguindos as dicas do @Lucas_Camara, que sao muito boas por si só*, você pode simplesmente monitorar os requests enviados ao servidor e manipular diretamente ali, sem nem entender como seu javascript funciona.

Se quer garantir que isso nao aconteça, você deve colocar essa validaçao no servidor, na parte que processa esse request de adicionar amigos. Nessa hora você aplica a mesma lógica que usou para saber se o botao fica habilitado ou nao.

De forma geral, em aplicaçoes web, se você quer segurança, você poe validaçao no servidor. Validaçao no cliente serve mais como comodidade ao usuário, já que o tempo de resposta é bem menor, do que esperar ir no servidor e voltar.

*: Eu só nao gosto da idéia de captchas, mas nesse caso, é só questao de gosto mesmo.

1 curtida

Obrigado pelas dicas, ajudou bastanjte, Valeu mesmo!!!

Eu vou ter que reorganizar muitas coisas nos meus cripta então, refazer muita delas…
Obrigado pela ajuda, valeu!!!