Execute script with InnerHtml without using eval ();

Question

Execute script with InnerHtml without using eval ();

Navigation

#1 by (3 votes)

1

I'm inserting a <script> at the end of the body with an innerHtml, but the script is not executed. I can not use the eval () function, because it will not pass the fortify.

How do I make the script run? This is my main problem ... I tried using the onLoad with insertAdjacentHTML but I can not get it to work either.

<html class="no-js" lang="es">
    <head> 
        <script src="js/spp.js"></script>
        <script src="elementos.js"></script>
        <script src="transform_multiproducto_asistente.js"></script>

        <script>
            function transform(){
                cargarProducto();
            }
        </script>
    </head>
     <body class="spp-loading" onload="transform();">
        <main class="spp-main">
            <article id="zona_despliegue">
            </article>
        </main>
        <div id="transform">
        </div>
    </body>
</html>

<script src="elementos.js"></script>

It's a .js with functions to generate labels - > function generarP() {return "<p>"; }

<script src="transform_multiproducto_asistente.js"></script>

It's where I have the functions of taking the JSON from the server and generating the html and the script. It starts running with loadProduct ();

Finally when I run, nothing happens because the script has not been executed, but if I inspect it, it is created fine.

function procesar(JSON){

    var cadena=procesarComponenteMultiProductoAsistente(JSON.pasos);
    cadena+=abrirDivConId("js-spp-assistant")+cerrarDiv();
    document.getElementById(JSON.areaCarga).innerHTML+=cadena;
    cadena=generarScriptAsistente(JSON);
    /*

    document.getElementById(JSON.areaCarga).innerHTML+=cadena;
    var ele = document.getElementById(JSON.areaCarga);
    var codes=document.getElementsByTagName("script");
    for(var i=0;i<codes.length;i++){
        eval(codes[i].text);
    }
    */

       var div = document.getElementById("transform");
       div.insertAdjacentHTML('afterend', cadena);
}

This is the snippet of code that executes the creation of the script. I tried it with the innerhtml, with the insertAdj and putting it at the end of the body and I can not make it work ...

Only with the commented option "eval" makes it work, but I can not use it, because fortify will not happen in the future.

Edit : The problem is that HTML content is added dynamically and finally, the script is added > to the html, that is to say, it is not the one that the content of the html was already and only the script is generated.

How it looks in the HTML code that I left, I only have the main and the article in the html.

Thank you.

javascript html

asked by EduBw 05.11.2018 в 12:32

source

1 answer

Wait for Server response in Javascript HELP WITH CONDITIONERS (IF ELSE)

score 3 · Accepted Answer

You can add a script dynamically like that.

const valor=document.getElementById('texto').innerText;
let codigo='console.log("Hola ' +valor+'");' + 'console.log("'+holaMundo+'");';


let script=document.createElement('script');
script.text = codigo;
document.body.appendChild(script);

<script>
  var holaMundo='Hola Mundo';
</script>
<div id="texto">EDU</div>

By using appendChild we ensure that it is added to the end of everything, so that all the variables and elements that have been created in the document should be available without problems, be executed when the code is executed.