How to activate a function by an attribute?

Asked

Viewed 263 times

1

Imagine a code:

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

I want you to take the attribute data-conteudo the function "function()" is triggered, as if it were a value of the attribute "onclick".

javascript html

2 answers

3

I wouldn’t use eval for security reasons. Instead it would create a new function that would call the function funcao() using 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>

It would only happen that the funcao() would have another name: funcao2(), without ceasing to be funcao().

  • 1

    I didn’t know that object Function

  • 1

    For it is rrsss... it is life teaching us :))

1


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

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

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

XSS

Credits to Jefferson Quesado for remembering

If a malicious user enters your site and does so

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>

Now imagine the mess he can make

In short

Avoid eval()

How to avoid

Since this is a string, with each function called, you can check if it is the same thing you want, e.g.:

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>

  • 1

    would have accepted if time leaves xD thank you very much guy

  • @Kidnapper comes tomorrow and accepts ;-)

  • 2

    @Marcelorafael, just remembering that the eval It’s a powerful weapon that doesn’t care if it’s going to be used for good or evil, it’ll just use everything in there. It is usually dangerous to use it without further care

  • @Jeffersonquesado truth, forgot about XSS, but it’s there :)

  • Just leaving the alert to the future reader. I myself recently had to use eval coming from user input in a reply.

  • 1

    I loved the example of the attack!

  • @Jeffersonquesado worth remembering, credits to you man, vlw.

  • 1

    I took the liberty of adding a link related to "avoid Eval()"

Show 3 more comments

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.