Running scripts with content pulled from local storage with innerHTML-CodePudding

I've been playing around with web development and wanted to create a basic application which allows users to enter html into a text area, which is saved in local storage, then later inserted into a document element with .innerHTML.

Minimum working example:

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Prototyping</title>
</head>
<body>

    <!--- Using bootstrap v. 5.2.0 --->
    <form>
        <label for="content"></label>
        <textarea  id="content"></textarea>
    </form>

    <div id="displayContent"></div>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2"
            crossorigin="anonymous"></script>
    <script src="index.js"></script>
</body>
</html>

JavaScript

const userInput = document.getElementById('content');
const displayInput = document.getElementById('displayContent')

userInput.addEventListener('input', (event) => {
    localStorage.setItem(event.target.id, event.target.value);
    displayInput.innerHTML = localStorage.getItem(event.target.id);
});

Now I was concerned that using .innerHTML would allow users to inject js code <script>alert('HAHA')</script>. However, scripts fail to run. Or at least with my limited knowledge of HTML, I cannot get a script to run. This is what I want, but I don't understand why. When inspecting the page, I will see the <script>. Is this because localStorage converts the input into strings? What is happening that prevents the script from running?

CodePudding user response：

The reason why the alert you try to inject "fails to run", is because at this stage the DOM is already parsed and all the javascript within it is already executed. So, the code would not be executed again.

Still, since you are inserting HTML, any HTML that will be added, will also be rendered. And with that, there are also some ways to execute javascript-code like this. One example is the following snippet as an input:

<img src=z one rror="alert('Injected code')">

Similar results could be achieved with other event-listener-attributes or deferred scripts.

However, if you only save and open the input on the client-side and not expose it to other users, there is no way it could do any damage. It would be the same as if you use the console in the developer-menu that is built-in in every modern browser (F12 in most of them). If that is still a problem for your use-case or you expose the inputs to other users, I would strongly recommend you to parse the text-input so that no js-code would be executed. Probably the safest way of achieving this could be to only insert text instead of HTML:

displayInput.textContent = localStorage.getItem(event.target.id)

Another way could be could be to encode the < and > to their html equivilant (source):

let content = event.target.value.replace(/</g, "&lt;").replace(/>/g, "&gt;")
localStorage.setItem(event.target.id, content)
displayInput.innerHTML = localStorage.getItem(event.target.id)

I hope this helps. Keep it up!