Issue
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("Special character: ''")</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.
Answered By - GreyHope Answer Checked By - David Goodson (PHPFixing Volunteer)
Posts
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.