How do I insert special characters to an HTML iframe document?

I am trying to add JavaScript to an HTML sandbox iframe. The JavaScript code contains a strange character. When the code is run outside of an iframe, it works perfectly. Unfortunately, though, Stack Overflow cannot display this character.

<!DOCTYPE html>
    <body>
        <script>
            console.log("Special character: ''")
        </script>
    </body>
</html>

Now I want to insert this code into a sandbox iframe using srcdoc.

<!DOCTYPE html>
    <body>
        <iframe sandbox = "allow-scripts" srcdoc = "<!DOCTYPE html><body><script>console.log(Special character: '')</script></body></html>"></iframe>
    </body>
</html>

When I run the code above in the Firefox web browser, it sometimes displays the character in the console. At other times, it raises an error: Uncaught SyntaxError: invalid range in character class. The main reason why this is odd is because the result is different each time. This made me wonder if it was a Firefox bug. Please explain the reason for this.

After spending a lot of time on this, I decided to take another approach.

<!DOCTYPE html>
    <body>
        <iframe id = frame sandbox = "allow-scripts allow-same-origin"></iframe>

        <script>
            const content = frame.contentWindow || frame.contentDocument
            content.document.open()
            content.document.write("<!DOCTYPE html><body><script>console.log(Special character: '')<\/script></body></html>")
            content.document.close()
        </script>
    </body>
</html>

This time, I get a different error: missing ) after argument list. I know that no brackets are missing. The thing causing the problem is the special character.

Finally, I tried something else.

<!DOCTYPE html>
    <body>
        <iframe id = frame sandbox = "allow-scripts allow-same-origin"></iframe>

        <script>
            const content = frame.contentWindow || frame.contentDocument
            content.document.open()
            content.document.write("<!DOCTYPE html><body></body></html>")
            content.document.close()

            content.eval("console.log(Special character: '')")
        </script>
    </body>
</html>

The code above sometimes works and sometimes doesn't. This is very frustrating. Another problem with the code above is that I have to include allow-same-origin in the iframe sandbox, I want the iframe to be as secure as possible and I don't really want to give the iframe too much control.

Is this just a Firefox bug? Even if I can't display this character in the console, how can I ensure that no errors occur?

Edit: Stack Overflow keeps removing the character from my post. Here is a fiddle instead.

Solution

Thank you for the helpful comments. This is not a Firefox bug. When you are dealing with special characters, you can't just paste them as plain HTML. Also, I was making a big mistake. I was writing the following code.

<!DOCTYPE html>
    <body>
        <iframe access = "allow-scripts" srcdoc = "<!DOCTYPE html><body><script>console.log(Special character: '')</script></body></html>"></iframe>
    </body>
</html>

If you look closely, you will see that I was missing the quotes in the console.log function. This caused a JavaScript error. The JavaScript charCodeAt() function is useful for getting the character code, @Old Geezer helped me to understand this.

After you have the character code, you can then write the HTML code.

<!DOCTYPE html>
    <body>
        <iframe access = "allow-scripts" srcdoc = "<!DOCTYPE html><body><script>console.log(&#34;Special character: '&#28;'&#34;)</script></body></html>"></iframe>
    </body>
</html>

The code above runs without any errors. The fact that the character is displayed differently on different browsers is not a problem because this specific character doesn't have a visible glyph.