1

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?

Kroxitrock
  • 35
  • 11
  • You'll have to check *all input* you send to the server *@ the server* for this kind of injection. – KooiInc Aug 13 '18 at 08:06
  • I like https://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 '18 at 08:14

1 Answers1

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:

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.

CertainPerformance
  • 356,069
  • 52
  • 309
  • 320
  • 1
    Note that this will not protect against XSS. Counterexample: `click here`, or `
    `, and so on. If html input is expected and required, proper sanitization is needed. Google Caja or some [other](https://github.com/punkave/sanitize-html) sanitizer may be appropriate, possibly together with a `Content-Security-Policy` header.
     – Gabor Lengyel Aug 13 '18 at 08:12
  • 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 '18 at 08:15
  • @GaborLengyel Thank you! I forgot about inline handlers. – CertainPerformance Aug 13 '18 at 08:30
  • 1
    @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: https://www.google.com/search?q=html+sanitiser If you want to go the `DOMParser` route at first, you may replace `` tags with something like `some text` before running it through the sanitizer. – CertainPerformance Aug 13 '18 at 08:30