1

Imagine um código:

<div id='teste' data-conteudo="funcao()"></div>

Quero que ao pegar o atributo data-conteudo a função "função()" seja acionada, como se fosse um valor do atributo "onclick".

2 Respostas 2

3

Eu não usaria eval por motivos de segurança. Em vez disso criaria uma nova função que chamaria a função funcao() usando new Function(nome_da_função()):

function funcao(){
   console.log("função executada");
}

var atr = document.getElementById("teste").dataset.conteudo;
var funcao2 = new Function(atr);
funcao2(); // outro nome que chama funcao()
funcao(); // nome original
<div id='teste' data-conteudo="funcao()"></div>

Somente aconteceria que a funcao() passaria a ter um outro nome: funcao2(), sem deixar também de ser funcao().

2
  • 1
    Não conhecia esse objeto Function Commented 2/03/2018 às 1:18
  • 1
    Pois é rrsss... é a vida nos ensinando :))
    – Sam
    Commented 2/03/2018 às 1:22
1

function funcao()
{
  alert("Dolly guaraná");
}

var dc = document.getElementById("teste").getAttribute("data-conteudo");

eval(dc);
<div id='teste' data-conteudo="funcao()"></div>

XSS

Créditos a Jefferson Quesado por me lembrar


Se um usuário mau intencionado entrar no seu site e fizer isso

function pegar_todos_os_usuarios(){
 return [
   {name:"zé ramalho", pass:"ramalho"},
   {name:"Largato",    pass:"mosca"}
 ];
}
function funcao()
{
  alert("Dolly guaraná");
}

var dc = document.getElementById("teste").getAttribute("data-conteudo");

eval(dc);
<div id='teste' data-conteudo="alert(JSON.stringify(pegar_todos_os_usuarios(), null, 4))"></div>

Agora imagine a bagunça que ele pode fazer

Resumindo

Evite eval()

Como evitar

Como isso é uma string, a cada função chamada, você poderá verificar se é aquilo mesmo que você quer, ex:

function pegar_todos_os_usuarios(){
 return [
   {name:"zé ramalho", pass:"ramalho"},
   {name:"Largato",    pass:"mosca"}
 ];
}
function funcao()
{
  alert("Dolly guaraná");
}

var btn = document.querySelector(".opa");

btn.onclick = function () {
  var dc = document.getElementById("teste").getAttribute("data-conteudo");

  if (dc === 'funcao()') {
    eval(dc);
  } else {
    alert("Falha");
  }
}
<div id="teste" data-conteudo="pegar_todos_os_usuarios()"></div>

<button class="opa">EXECUTAR</button>

8
  • 1
    teria aceitado se o tempo deixa-se xD muito obrigado cara
    – Raptador
    Commented 2/03/2018 às 1:02
  • @Raptador vem amanhã e aceita ;-) Commented 2/03/2018 às 1:04
  • 2
    @MarceloRafael, só lembrando que o eval é uma arma poderosa que não liga se vai ser usada para o bem ou para o mal, simplesmente usará tudo que tem lá. Normalmente é perigoso usar ele sem maiores cuidados Commented 2/03/2018 às 1:06
  • 1
    Adorei o exemplo do ataque! Commented 2/03/2018 às 1:19
  • 1
    Tomei a liberdade de acrescentar um link relacionado ao "evite o eval()" Commented 2/03/2018 às 1:42

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .