Comparing 2 html elements
const htmlElement = `<p myAttr=${attackerValue}>Appended element!</p>`;
It is easy to inject javascript here, I can use an attackerValue of </p><script>alert("injected JS") </script>
However, if the there are single quotes wrapping attackerValue in the htmlElement, is it still possible to inject javascript?
const htmlElement = `<p myAttr='${attackerValue}'>Appended element!</p>`;
Codesandbox: https://codesandbox.io/s/young-hill-4nww5k?file=/src/index.js
Edit: Found my answer, I can simply escape the string single quote by using an input such as '</p><script>alert("injected JS") </script>
For front-end code it does not matter if it is possible. <script/> tags inserted via innerHTML are not executed:
<html>
Example:
<script>
const injection = '<script>alert("hello")<\/script>';
document.body.innerHTML += ` this is a test ${injection}`;
// You will never see the "hello" alert because
// browser ignores your script tag.
</script>
</html>
The browser ignores all script tags inserted into the DOM for exactly this reason - to prevent an injection attack.
It is possible to inject scripts via document.write():
<html>
Example:
<script>
const injection = '<script>alert("hello")<\/script>';
document.write(` this is a test ${injection}`);
// You will see the "hello" alert!
</script>
</html>
The solution to that is simple: don't use document.write().