Don't execute javascript inside html tag
Clash Royale CLAN TAG#URR8PPP
Don't execute javascript inside html tag
I have been reading about xss and some questions have raised, but most of all I was wondering if there is a way to avoid it in the frontend?
Let's say my backend logic is not working properly and I have entered a field with value:
"name": "<script> alert('hello') </script>"
If we use the html tag <p> to display the information it executes the javascript.
I have searched it and found the tag <xmp> but it is marked as "Obsolete", but I didn't find any other way that is not obsolete to not execute the javascript. So is there any way to protect the end-user in the front end from executing malicious scripts even if we somehow allow the script to be injected in the database?
<p>
<xmp>
I like stackoverflow.com/a/15348311/487813 as a solution to escape HTML markup (which is in practice one solution to prevent the script from running).
– apokryfos
Aug 13 at 8:14
1 Answer
1
Although it would certainly be better to secure the database from unsafe input, one option is to simply assign to an element's textContent rather than its innerHTML, to ensure that the string from the database gets parsed as text, rather than as HTML markup:
textContent
innerHTML
const databaseText = "test input 1<span>test input 2</span><script> alert('EVIL SCRIPT')</scr" + "ipt><span>test input 3</span>";
const p = document.body.appendChild(document.createElement('p'));
p.textContent = databaseText;
If the string is expected to contain HTML markup in addition to possibly unsafe script tags, one might think that you could use something like DOMParser to strip out all script tags before inserting the HTML markup into the actual document, but that wouldn't be enough protection, due to possible inline handlers like <.. onclick="...">. Thanks to @GaborLengyel for pointing that out.
script
script
<.. onclick="...">
Note that this will not protect against XSS. Counterexample:
<a href="javascript:alert(1)">click here</a>, or <div onclick="alert(1)">, and so on. If html input is expected and required, proper sanitization is needed. Google Caja or some other sanitizer may be appropriate, possibly together with a Content-Security-Policy header.– Gabor Lengyel
Aug 13 at 8:12
<a href="javascript:alert(1)">click here</a>
<div onclick="alert(1)">
Content-Security-Policy
Ok, that way we can preprocess the information, but what if we want to put tags in the text (for example to bold some parts), but we want the "script" tags and such to be displayed as a normal text?
– Kroxitrock
Aug 13 at 8:15
@GaborLengyel Thank you! I forgot about inline handlers.
– CertainPerformance
Aug 13 at 8:30
@Kroxitrock If you have to parse possibly-unsafe HTML strings as HTML and not as text, it would probably be best to use a tried-and-tested tool for the job. There are many libraries out there that (claim to) accomplish this: google.com/search?q=html+sanitiser If you want to go the
DOMParser route at first, you may replace <script>some text</script> tags with something like <span>some text</span> before running it through the sanitizer.– CertainPerformance
Aug 13 at 8:30
DOMParser
<script>some text</script>
<span>some text</span>
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
You'll have to check all input you send to the server @ the server for this kind of injection.
– KooiInc
Aug 13 at 8:06