如何安全地使用 innerHTML？

Question

我没有为 Javascript 中的边栏重新键入重复代码，而是制作了一个边栏功能，用于为每个页面填充相似的代码。它看起来像这样：

function addSidebarTemplate(){
      const template = document.createElement('template');
      template.innerHTML = `<aside class="aside-container">
                            <header>
                <a href="."> link here</a>
                <a class="mr-1" href="#">
                    <i class="fab fa-linkedin"></i>
                </a>
                <a class="mr-1" href="#">
                    <i class="fab fa-facebook"></i>
                </a>
                <a class="mr-1" href="#">
                    <i class="fab fa-github"></i>
                </a>
                 </header>`
       document.querySelector('#sidebar').appendChild(sidebar.content);

此代码下方还有其他元素。但是其中 none 需要用户输入。我只是想知道在这种情况下使用 innerHTML 是否安全？如果没有，有没有更好的方法像这样插入侧边栏？

谢谢

Answer 1

如果没有使用用户输入，那么innerHTML就可以使用。话虽这么说，如果您正在做很多这样的事情，您可能需要考虑使用像 React 这样的 UI 库来帮助您。

如何安全地使用 innerHTML？

How to use innerHTML safely?

javascript

xss