如何安全地使用innerHTML？

Question

我沒有為 Javascript 中的側邊欄重新輸入重復代碼，而是制作了一個側邊欄 function 用於為每個頁面填充類似的代碼。 它看起來像這樣：

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);

此代碼下方還有其他元素。 但它們都不需要用戶輸入。 我只是想知道在這種情況下使用 innerHTML 是否安全？ 如果沒有，有沒有更好的方法來插入這樣的側欄？

謝謝

Answer 1

如果不使用用戶輸入，則可以使用innerHTML 。 話雖如此，如果你做了很多這樣的事情，你可能想考慮使用像 React 這樣的 UI 庫來幫助你。