JavaScript中的HTMLElement.prototype.innerHTML

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2020/01/23/JavaScript%E4%B8%AD%E7%9A%84HTMLElement-prototype-innerHTML/

摘要

本文主要讲述了：

作用
安全问题

正文

作用

读取元素（包括子元素）内部的 HTML 代码
修改元素内部的 HTML 代码

注：请站在 HTML 源代码的角度理解innerHTML

安全问题

出于安全考虑，浏览器不会执行那些通过innerHTML注入的<script>

示例：<script>会被插入，但<script>不会被执行

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="foo">hello, world</div>
    <script>
      document.addEventListener('click', function () {
        document.querySelector('#foo').innerHTML =
          "<script src='./js/index.js'><\/script>";
      });
    </script>
  </body>
</html>

示例：<script>会被插入，但<script>不会被执行

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="foo">hello, world</div>
    <script>
      document.addEventListener('click', function () {
        document.querySelector('#foo').innerHTML =
          '<script>alert(123);<\/script>';
      });
    </script>
  </body>
</html>

示例：<script>会被插入，但<script>不会被执行

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="foo">hello, world</div>
    <script>
      document.addEventListener('click', function () {
        const temp = document.createElement('div');
        temp.innerHTML = '<script>alert(123);<\/script>';
        document.querySelector('#foo').appendChild(temp);
      });
    </script>
  </body>
</html>

解决思路

不通过innerHTML注入<script>，而通过append()或appendChild()实现

示例：<script>会被插入，其中的代码得到了执行

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="foo">hello, world</div>
    <script>
      document.addEventListener('click', function () {
        const temp = document.createElement('script');
        temp.innerHTML = 'alert(123);';
        document.querySelector('#foo').appendChild(temp);
      });
    </script>
  </body>
</html>

示例：<script>会被插入，其中的代码得到了执行

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="foo">hello, world</div>
    <script>
      document.addEventListener('click', function () {
        const temp = document.createElement('script');
        temp.textContent = 'alert(123);';
        document.querySelector('#foo').appendChild(temp);
      });
    </script>
  </body>
</html>