执行插入.innerHTML的<script>元素


111

我有一个脚本,可使用将某些内容插入到元素中innerHTML

内容例如可以是:

<script type="text/javascript">alert('test');</script>
<strong>test</strong>

问题是<script>标签内的代码无法执行。我用谷歌搜索了一下,但是没有明显的解决方案。如果我使用jQuery插入内容,$(element).append(content);则脚本部分eval在被注入DOM之前就已经存在。

有人能执行所有<script>元素的代码片段吗?jQuery代码有点复杂,所以我无法真正弄清楚它是如何完成的。

编辑

通过查看jQuery代码,我设法弄清楚了jQuery是如何做到的,从而产生了以下代码:

Demo:
<div id="element"></div>

<script type="text/javascript">
  function insertAndExecute(id, text)
  {
    domelement = document.getElementById(id);
    domelement.innerHTML = text;
    var scripts = [];

    ret = domelement.childNodes;
    for ( var i = 0; ret[i]; i++ ) {
      if ( scripts && nodeName( ret[i], "script" ) && (!ret[i].type || ret[i].type.toLowerCase() === "text/javascript") ) {
            scripts.push( ret[i].parentNode ? ret[i].parentNode.removeChild( ret[i] ) : ret[i] );
        }
    }

    for(script in scripts)
    {
      evalScript(scripts[script]);
    }
  }
  function nodeName( elem, name ) {
    return elem.nodeName && elem.nodeName.toUpperCase() === name.toUpperCase();
  }
  function evalScript( elem ) {
    data = ( elem.text || elem.textContent || elem.innerHTML || "" );

    var head = document.getElementsByTagName("head")[0] || document.documentElement,
    script = document.createElement("script");
    script.type = "text/javascript";
    script.appendChild( document.createTextNode( data ) );
    head.insertBefore( script, head.firstChild );
    head.removeChild( script );

    if ( elem.parentNode ) {
        elem.parentNode.removeChild( elem );
    }
  }

  insertAndExecute("element", "<scri"+"pt type='text/javascript'>document.write('This text should appear as well.')</scr"+"ipt><strong>this text should also be inserted.</strong>");
</script>

1
您为什么不能只迭代该元素的子元素,而对于每个作为脚本元素的元素,您只需要eval()该子元素的innerHtml?这就是我看到的由大型组件供应商完成的方式,每当他们完成ajax回调并将其添加到DOM中时,他们就会做到这一点。请记住,这可能会很慢,尤其是在IE7中。
slugster 2010年

2
Andreas:例如function testFunction(){ alert('test'); },如果我向插入innerHTML的代码中添加一个函数,然后尝试调用它,则表示该函数未定义。
phidah 2010年

1
真棒披萨,像魅力一样,欢呼声
Marcin

3
我认为了解这是浏览器的预期行为以防止跨站点脚本攻击是绝对重要的。如果您设置为innerHTML的文本是由Bob提供的,它将在Alice的浏览器上执行,从而造成损坏(例如,在论坛上,人们可以在其中添加脚本标签的注释)。您可以在此处了解更多信息:en.wikipedia.org/wiki/Cross-site_scripting。保持保存!
Xatian

1
自2010年以来,HTML发生了很大变化。这些天,也许您想看看:stackoverflow.com/a/58862506/890357
marciowb

Answers:


27

OP的脚本在IE 7中不起作用。在SO的帮助下,以下脚本可以:

exec_body_scripts: function(body_el) {
  // Finds and executes scripts in a newly added element's body.
  // Needed since innerHTML does not run scripts.
  //
  // Argument body_el is an element in the dom.

  function nodeName(elem, name) {
    return elem.nodeName && elem.nodeName.toUpperCase() ===
              name.toUpperCase();
  };

  function evalScript(elem) {
    var data = (elem.text || elem.textContent || elem.innerHTML || "" ),
        head = document.getElementsByTagName("head")[0] ||
                  document.documentElement,
        script = document.createElement("script");

    script.type = "text/javascript";
    try {
      // doesn't work on ie...
      script.appendChild(document.createTextNode(data));      
    } catch(e) {
      // IE has funky script nodes
      script.text = data;
    }

    head.insertBefore(script, head.firstChild);
    head.removeChild(script);
  };

  // main section of function
  var scripts = [],
      script,
      children_nodes = body_el.childNodes,
      child,
      i;

  for (i = 0; children_nodes[i]; i++) {
    child = children_nodes[i];
    if (nodeName(child, "script" ) &&
      (!child.type || child.type.toLowerCase() === "text/javascript")) {
          scripts.push(child);
      }
  }

  for (i = 0; scripts[i]; i++) {
    script = scripts[i];
    if (script.parentNode) {script.parentNode.removeChild(script);}
    evalScript(scripts[i]);
  }
};

4
更好地使用jQuery- $(parent).html(code)参见下面的答案。
iirekm

将脚本注入DOM后,应该如何删除它?
S4beR 2014年

1
该脚本不是递归的,因此只会查看直接子级。这对我if (nodeName(child, "script" ) && (!child.type || child.type.toLowerCase() === "text/javascript")) { scripts.push(child); } else { exec_body_scripts(child); }
有用

2
请注意,上面的代码不会执行通过src加载的脚本。可以将以上脚本更改为检查elem.src并有条件地设置src创建的脚本元素的属性,而不是设置其文本内容。
瑞安·莫洛克

为什么不使用全局eval技巧而不是创建<script>元素并将其插入到<head>?他们都执行JS代码,而没有公开当前的闭包。
Finesse,2017年

31

@phidah ...这是一个非常有趣的解决方案:http : //24ways.org/2005/have-your-dom-and-script-it-too

因此它看起来像这样:

<img src="empty.gif" onload="alert('test');this.parentNode.removeChild(this);" />


2
甚至更好,不需要具有“ onerror”事件的图像,非常适合快速XSS注入jvfconsulting.com/blog/47/… :)
baptx 2012年

11
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" onload="alert('test');">如果要阻止无用的http请求,可以使用。
Savas Vedova 2015年

1
爱它 !(添加style="display:none;)以隐藏残破的图像图标
kris 17-4-26

实际上,<style>它比更好<img>,因为它没有发出网络请求
盆地

23

这是一个更短,更有效的脚本,也可用于具有src属性的脚本:

function insertAndExecute(id, text) {
    document.getElementById(id).innerHTML = text;
    var scripts = Array.prototype.slice.call(document.getElementById(id).getElementsByTagName("script"));
    for (var i = 0; i < scripts.length; i++) {
        if (scripts[i].src != "") {
            var tag = document.createElement("script");
            tag.src = scripts[i].src;
            document.getElementsByTagName("head")[0].appendChild(tag);
        }
        else {
            eval(scripts[i].innerHTML);
        }
    }
}

注:虽然eval可能会导致如果不正确使用安全漏洞,这是很多比动态创建脚本标记更快。


1
这对我有所帮助,但是我使用eval感到很脏。确保文本不会被破坏,我看不到任何漏洞。
约翰

@ random-user eval旨在伤害用户。任何动态脚本执行都是一种风险,这就是CSP调用它的'unsafe-eval'原因。如果您在库中使用站点,则也将损害站点的安全性,因为它们无法将其关闭。
jonathanKingston,2015年

在Chrome 44中对此进行测试会导致在调用appendChild时导致无限循环,因为这会增加scripts.length值。
Codewithcheese 2015年

4
具有该src属性的脚本将异步下载并在到达时执行。订单不保留。内联脚本也将在异步脚本之前无序执行。
robert4 '16

21

您不应使用innerHTML属性,而应使用Node的appendChild方法:文档树[HTML DOM]中的节点。这样,您以后就可以调用注入的代码。

确保您了解node.innerHTML 与的含义不同 node.appendChild。您可能需要花一些时间在Javascript客户端参考上,以获取更多详细信息和DOM。希望以下内容能对您有所帮助...

样品注入工程:

<html>
<head>
<title>test</title>
<script language="javascript" type="text/javascript">
    function doOnLoad(){
        addScript('inject',"function foo(){ alert('injected'); }");
    }


    function addScript(inject,code){
        var _in = document.getElementById('inject');
        var scriptNode = document.createElement('script');
        scriptNode.innerHTML = code;
        _in.appendChild(scriptNode);
    }

</script>
</head>
<body onload="doOnLoad();">
    <div id="header">some content</div>
    <div id="inject"></div>
    <input type="button" onclick="foo(); return false;" value="Test Injected" />
</body>
</html>

问候,


2
最后,实际上是对问题有所解释的人,而不是所有其他try this, look how clever I am答案。值得紫外线,它是我的。
RiggsFolly

之所以这样,是因为它是注入注入后执行的javascript代码的最简单方法。我只是不了解添加与未执行的innerHTML和上面的与执行appendChild的方式之间的区别。我成功地使用了它,使用socket.io从头开始创建了一个带有脚本的动态页面
wetlip

2
var _in = document.getElementById(inject);, 我认为。
罗恩·伯克

21

用示例简化@joshcomley答案的ES6版本。

没有JQuery,没有库,没有eval,没有DOM更改,仅是纯Javascript。

http://plnkr.co/edit/MMegiu?p=preview

var setInnerHTML = function(elm, html) {
  elm.innerHTML = html;
  Array.from(elm.querySelectorAll("script")).forEach( oldScript => {
    const newScript = document.createElement("script");
    Array.from(oldScript.attributes)
      .forEach( attr => newScript.setAttribute(attr.name, attr.value) );
    newScript.appendChild(document.createTextNode(oldScript.innerHTML));
    oldScript.parentNode.replaceChild(newScript, oldScript);
  });
}

用法

$0.innerHTML = HTML;    // does *NOT* run <script> tags in HTML
setInnerHTML($0, HTML); // does run <script> tags in HTML

1
错字:函数的名称setInnerHtml不是setInnerHTML
pery mimon

请注意,在链接的plnkr中,函数名称为,setInnerHTML但从函数setInnerHtml内部被调用runB。因此,该示例不起作用
danbars

16

试试这个片段:

function stripAndExecuteScript(text) {
    var scripts = '';
    var cleaned = text.replace(/<script[^>]*>([\s\S]*?)<\/script>/gi, function(){
        scripts += arguments[1] + '\n';
        return '';
    });

    if (window.execScript){
        window.execScript(scripts);
    } else {
        var head = document.getElementsByTagName('head')[0];
        var scriptElement = document.createElement('script');
        scriptElement.setAttribute('type', 'text/javascript');
        scriptElement.innerText = scripts;
        head.appendChild(scriptElement);
        head.removeChild(scriptElement);
    }
    return cleaned;
};


var scriptString = '<scrip' + 't + type="text/javascript">alert(\'test\');</scr' + 'ipt><strong>test</strong>';
document.getElementById('element').innerHTML = stripAndExecuteScript(scriptString);

是的,此方法有效,但是如果您有注释或console.logs,则会出错,因此请注意,您也可以修改以解决模块问题var modules = [] var cleaned = text.replace(/ <script([^> ] *)>([[\ s \ S] *?)<\ / script> / gi,function(m,tags,script){if(/type="module"/.test(tags)){modules.push (script)return} scripts + = script +'\
n'return


7

不使用“ eval”的解决方案:

var setInnerHtml = function(elm, html) {
  elm.innerHTML = html;
  var scripts = elm.getElementsByTagName("script");
  // If we don't clone the results then "scripts"
  // will actually update live as we insert the new
  // tags, and we'll get caught in an endless loop
  var scriptsClone = [];
  for (var i = 0; i < scripts.length; i++) {
    scriptsClone.push(scripts[i]);
  }
  for (var i = 0; i < scriptsClone.length; i++) {
    var currentScript = scriptsClone[i];
    var s = document.createElement("script");
    // Copy all the attributes from the original script
    for (var j = 0; j < currentScript.attributes.length; j++) {
      var a = currentScript.attributes[j];
      s.setAttribute(a.name, a.value);
    }
    s.appendChild(document.createTextNode(currentScript.innerHTML));
    currentScript.parentNode.replaceChild(s, currentScript);
  }
}

这实质上是克隆脚本标签,然后将阻塞的脚本标签替换为新生成的脚本标签,从而允许执行。


3

scriptNode.innerHTML = code不适用于IE。唯一要做的是替换为,scriptNode.text = code并且效果很好


3

使用jquery $(parent).html(code)代替parent.innerHTML = code

var oldDocumentWrite = document.write;
var oldDocumentWriteln = document.writeln;
try {
    document.write = function(code) {
        $(parent).append(code);
    }
    document.writeln = function(code) {
        document.write(code + "<br/>");
    }
    $(parent).html(html); 
} finally {
    $(window).load(function() {
        document.write = oldDocumentWrite
        document.writeln = oldDocumentWriteln
    })
}

这也适用于使用document.write脚本和通过src属性加载的脚本。不幸的是,这甚至不适用于Google AdSense脚本。


1
是什么让您说这更容易?它甚至没有更短。我一直认为过度使用jQuery是一个坏主意。
曼戈

2

做就是了:

document.body.innerHTML = document.body.innerHTML + '<img src="../images/loaded.gif" alt="" onload="alert(\'test\');this.parentNode.removeChild(this);" />';

1
看起来像个天才的想法
pery mimon

0

您可以看看这篇文章。代码可能看起来像这样:

var actualDivToBeUpdated = document.getElementById('test');
var div = document.createElement('div');
div.innerHTML = '<script type="text/javascript">alert("test");<\/script>';
var children = div.childNodes;
actualDivToBeUpdated.innerHTML = '';
for(var i = 0; i < children.length; i++) {
    actualDivToBeUpdated.appendChild(children[i]);
}

0

感谢Larry的脚本,该脚本在IE10中表现出色,这就是我使用的脚本:

$('#' + id)[0].innerHTML = result;
$('#' + id + " script").each(function() { this.text = this.text || $(this).text();} );

0

延伸拉里的。我使它以递归方式搜索整个块和子节点。
现在,该脚本还将调用用src参数指定的外部脚本。脚本被附加到头部,而不是按照找到的顺序插入和放置。因此,专门保留了订单脚本。并且每个脚本的同步执行类似于浏览器处理初始DOM加载的方式。因此,如果您有一个从CDN调用jQuery的脚本块,然后下一个脚本节点使用jQuery ...没问题!哦,我根据您在tag参数中设置的内容,使用序列化的id标记了附加的脚本,因此您可以找到此脚本添加的内容。

exec_body_scripts: function(body_el, tag) {
    // Finds and executes scripts in a newly added element's body.
    // Needed since innerHTML does not run scripts.
    //
    // Argument body_el is an element in the dom.

    function nodeName(elem, name) {
        return elem.nodeName && elem.nodeName.toUpperCase() ===
              name.toUpperCase();
    };

    function evalScript(elem, id, callback) {
        var data = (elem.text || elem.textContent || elem.innerHTML || "" ),
            head = document.getElementsByTagName("head")[0] ||
                      document.documentElement;

        var script = document.createElement("script");
        script.type = "text/javascript";
        if (id != '') {
            script.setAttribute('id', id);
        }

        if (elem.src != '') {
            script.src = elem.src;
            head.appendChild(script);
            // Then bind the event to the callback function.
            // There are several events for cross browser compatibility.
            script.onreadystatechange = callback;
            script.onload = callback;
        } else {
            try {
                // doesn't work on ie...
                script.appendChild(document.createTextNode(data));      
            } catch(e) {
                // IE has funky script nodes
                script.text = data;
            }
            head.appendChild(script);
            callback();
        }
    };

    function walk_children(node) {
        var scripts = [],
          script,
          children_nodes = node.childNodes,
          child,
          i;

        if (children_nodes === undefined) return;

        for (i = 0; i<children_nodes.length; i++) {
            child = children_nodes[i];
            if (nodeName(child, "script" ) &&
                (!child.type || child.type.toLowerCase() === "text/javascript")) {
                scripts.push(child);
            } else {
                var new_scripts = walk_children(child);
                for(j=0; j<new_scripts.length; j++) {
                    scripts.push(new_scripts[j]);
                }
            }
        }

        return scripts;
    }

    var i = 0;
    function execute_script(i) {
        script = scripts[i];
        if (script.parentNode) {script.parentNode.removeChild(script);}
        evalScript(scripts[i], tag+"_"+i, function() {
            if (i < scripts.length-1) {
                execute_script(++i);
            }                
        });
    }

    // main section of function
    if (tag === undefined) tag = 'tmp';

    var scripts = walk_children(body_el);

    execute_script(i);
}

0

尝试一下,它对我适用于Chrome,Safari和Firefox:

var script = document.createElement('script');
script.innerHTML = 'console.log("hi")';
document.body.appendChild(script); 
--> logs "hi"

但是要注意的一件事是,以下div嵌套的脚本将不会运行:

var script = document.createElement('div');
script.innerHTML = '<script>console.log("hi")</script>';
document.body.appendChild(script);
--> doesn't log anything

为了运行脚本,必须将其创建为一个节点,然后附加为子级。您甚至可以在先前注入的div内追加脚本,脚本将运行(在尝试使广告服务器代码正常工作之前,我已经遇到过此脚本):

var div = document.createElement('div');
div.id = 'test-id';
document.body.appendChild(div);
var script = document.createElement('script');
script.innerHTML = 'console.log("hi")';
document.getElementById('test-id').appendChild(script);
--> logs "hi"

0

扩展Lambder的答案

document.body.innerHTML = '<img src="../images/loaded.gif" alt="" > onload="alert(\'test\');this.parentNode.removeChild(this);" />';

您可以使用base64映像来创建和加载脚本

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMjHxIGmVAAAADUlEQVQYV2P4//8/AwAI/AL+iF8G4AAAAABJRU5ErkJggg=="
    onload="var script = document.createElement('script');  script.src = './yourCustomScript.js'; parentElement.append(script);" />

或者,如果您有一个Iframe,可以改用它

<iframe src='//your-orginal-page.com' style='width:100%;height:100%'
    onload="var script = document.createElement('script');  script.src = './your-coustom-script.js'; parentElement.append(script);"
    frameborder='0'></iframe>

0

我需要类似的东西,但需要保留脚本或将其与原始脚本在同一位置重新创建,因为我的脚本的目标是DOM中script标记的位置以创建/定位元素。我还对该脚本进行了递归处理,以确保该脚本在向下扩展多个级别时也可以正常运行。

注意:我const在这里使用,如果您使用的是较旧的浏览器,请使用var

    window.exec_body_scripts = function(body_el) {
        // ref: /programming/2592092/executing-script-elements-inserted-with-innerhtml based on Larry K's answer
        // Finds and executes scripts in a newly added element's body.
        // Needed since innerHTML does not run scripts.
        //
        // Argument body_el is an element in the dom.
        const
            type__Js = 'text/javascript',
            tagName__Script = 'script',
            tagName__Script__Upper = tagName__Script.toUpperCase();
        var scripts = [], script, i;
        function evalScript(elem) {
            var parent = elem.parentNode,
                data = (elem.text || elem.textContent || elem.innerHTML || ""),
                script = document.createElement(tagName__Script);

            script.type = type__Js;
            try {
                // doesn't work on ie...
                script.appendChild(document.createTextNode(data));
            } catch (e) {
                // IE has funky script nodes
                script.text = data;
            }
            // Make sure to re-insert the script at the same position
            // to make sure scripts that target their position
            // in the DOM function as expected.
            var parent = elem.parentNode;
            parent.insertBefore(script, elem);
            parent.removeChild(elem);
        };
        // Get all scripts (recursive)
        if (typeof (document.querySelectorAll) !== typeof (void 0)) {
            document.querySelectorAll('script').forEach((scr) => { if (!scr.type || scr.type.toLowerCase() === type__Js) scripts.push(scr); });
        }
        else {
            var children_nodes = body_el.childNodes, child;
            for (i = 0; children_nodes[i]; i++) {
                child = children_nodes[i];
                if (
                    child.nodeName
                    &&
                    child.nodeName.toUpperCase() === tagName__Script__Upper
                    &&
                    (
                        !child.type
                        ||
                        child.type.toLowerCase() === type__Js
                    )
                ) {
                    scripts.push(child);
                }
                // Recursive call
                window.exec_body_scripts(child);
            }
        }
        for (i = 0; scripts[i]; i++) {
            evalScript(scripts[i]);
        }
    };

0

在TypeScript中做了这个新的辅助函数,也许有人会喜欢的。如果从脚本参数中删除类型声明,它将只是纯JS。

const evalPageScripts = () => {
  const scripts = document.querySelectorAll('script');

  scripts.forEach((script: HTMLScriptElement) => {
    const newScript = document.createElement('script');
    newScript.type = 'text/javascript';
    newScript.src = script.src;

    if (script.parentNode) {
      script.parentNode.removeChild(script);
    }

    return document.body.appendChild(newScript);
  })
};

export default evalPageScripts;


-1

尝试使用功能eval()。

data.newScript = '<script type="text/javascript">//my script...</script>'
var element = document.getElementById('elementToRefresh');
element.innerHTML = data.newScript;
eval(element.firstChild.innerHTML);

这是我正在开发的项目中的真实示例。感谢这篇文章


-1

这是我最近的项目中的解决方案。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sample</title>
</head>
<body>
<h1 id="hello_world">Sample</h1>
<script type="text/javascript">
 var div = document.createElement("div");
  var t = document.createElement('template');
  t.innerHTML =  "Check Console tab for javascript output: Hello world!!!<br/><script type='text/javascript' >console.log('Hello world!!!');<\/script>";
  
  for (var i=0; i < t.content.childNodes.length; i++){
    var node = document.importNode(t.content.childNodes[i], true);
    div.appendChild(node);
  }
 document.body.appendChild(div);
</script>
 
</body>
</html>

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.