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

IT技术 javascript dom eval innerhtml
2021-01-27 08:10:14

我有一个脚本，它使用innerHTML.

例如，内容可以是：

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

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

有没有人有一段执行所有<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>
6个回答

@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
请注意，在链接的 plnkr 中，函数名称是setInnerHTML但它是setInnerHtml从runB函数内部调用的。因此该示例不起作用
2021-03-18 08:10:14
错别字：函数的名称setInnerHtml不是setInnerHTML
2021-03-26 08:10:14
我对 VUE 和 v-html 有问题，我想在其中注入一些带有脚本的 HTML ......这有助于我解决我的问题。stackoverflow.com/questions/68042540/...
2021-03-26 08:10:14
2021-04-05 08:10:14

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

所以它看起来像这样：

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

实际上，<style>比 好<img>，因为它不发出网络请求
2021-03-16 08:10:14
是的，@basin 是正确的。我用过<style onload="alert('test');"/>，效果很好。没有网络请求，文档/请求大小的增加最小，不可见......如果你仍然想删除它，你也可以使用removeChild技巧。谢谢！
2021-03-27 08:10:14
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" onload="alert('test');">如果您想阻止无用的 http 请求，您可以使用。
2021-03-30 08:10:14
甚至更好的是，不需要带有“onerror”事件的图像，非常适合快速 XSS 注入jvfconsulting.com/blog/47/... :)
2021-03-31 08:10:14
爱它 ！（添加style="display:none;）隐藏损坏的图像图标
2021-04-02 08:10:14

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]);
  }
};
请注意，上面的代码不会执行通过 src 加载的脚本。上面的脚本可以更改为检查elem.src并有条件地设置src创建的脚本元素的属性，而不是设置其文本内容。
2021-03-17 08:10:14
该脚本不是递归的，因此只会查看直接子级。这对我有用：if (nodeName(child, "script" ) && (!child.type || child.type.toLowerCase() === "text/javascript")) { scripts.push(child); } else { exec_body_scripts(child); }
2021-03-23 08:10:14
一旦脚本被注入到 DOM，我应该如何删除它？
2021-03-28 08:10:14
更好地使用 jQuery $(parent).html(code)- 请参阅下面的答案。
2021-04-03 08:10:14
为什么不使用全局eval技巧而不是创建一个<script>元素并将其插入到<head>? 它们都在不暴露当前闭包的情况下执行 JS 代码。
2021-04-05 08:10:14

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

确保您理解这node.innerHTML 与 node.appendChild. 您可能想花一些时间在 Javascript Client Reference 上了解更多详细信息和 DOM。希望以下内容有帮助...

进样工作：

<!DOCTYPE HTML>
<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>

问候

我 uv 这是因为它是注入 javascript 代码的最简单方法，该代码在注入后执行。我只是不明白使用不执行的innerHTML添加与上面使用执行的appendChild的方式之间的区别。我成功地使用它从头开始使用 socket.io 创建了一个带有脚本的动态页面
2021-03-21 08:10:14
好的，但我收到一个错误： parameter 1 is not of type 'Node'.
2021-03-26 08:10:14
var _in = document.getElementById(inject);， 我认为。
2021-03-31 08:10:14
终于有人真正解释了这个问题而不是所有其他try this, look how clever I am答案。应该得到紫外线，它得到了我的。
2021-04-05 08:10:14

这是一个更短、更高效的脚本，它也适用于具有该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如果使用不当可能会导致安全漏洞，但它比动态创建脚本标签要快得多。

具有该src属性的脚本将被异步下载并在到达时执行。不保留排序。内联脚本也将无序执行，在异步脚本之前同步执行。
2021-03-15 08:10:14
当 appendChild 被调用时，在 Chrome 44 中测试会导致无限循环，因为这会增加 scripts.length 值。
2021-03-26 08:10:14
这对我有帮助，但我觉得使用 eval 很脏。确保文本不会受到损害，我没有看到漏洞。
2021-03-30 08:10:14
@random-usereval旨在伤害用户。任何动态脚本执行都存在风险，这就是 CSP 之所以称之为风险的原因'unsafe-eval'。如果您在图书馆中使用它，您也会损害网站的安全性，因为他们无法将其关闭。
2021-03-31 08:10:14
较新的调用： [...document.querySelectorAll(`#${id} script`)].forEach(script => { if (scripts.src != "") { ... }})
2021-04-09 08:10:14
其它你可能感兴趣的问题
上一篇单击后退按钮时是否有跨浏览器的 onload 事件？ 下一篇删除嵌套的Promise