I understand that utilizing innerhtml is generally considered a poor practice due to the potential for XSS vulnerabilities ().
However, consider the scenario below:
I have a webpage generated through a Twig template called index.html.twig.
When using templates like Twig (), all content is automatically escaped to prevent any security risks.
The index.html.twig template includes a div (#my-div) that is populated by a sub-template called my-list.html.twig:
|--------------------------|
| index.html.twig |
| |
| <div id="my-list"> |
| |------------------| |
| | my-list.html.twig| |
| | | |
| | | |
| |------------------| |
| </div> |
|--------------------------|
When accessing my page via HTTPS without Ajax, everything remains secure as both index.html.twig and my-list.html.twig are properly escaped by Twig.
Now, if I want to update the content of #my-div using Ajax:
- An Ajax request over HTTPS is made (within the same site)
- The server generates the response with the template
my-list.html.twigin a safe manner identical to non-Ajax requests - The div content gets updated using
innerhtmlwith the server's response
If we trust that HTTPS requests without Ajax are secure, why can't we trust Ajax requests with innerhtml if the data is handled similarly?
Conversely, if Ajax requests with innerhtml are deemed insecure, then why do we assume HTTPS requests without Ajax are safe?
I could opt to eliminate Ajax and innerhtml, sticking solely to traditional HTTPS navigation. However, this wouldn't enhance security significantly since any XSS vulnerability would exist regardless of Ajax usage (as the template generation remains consistent).
Your insights on this matter are much appreciated.