1

I found many answers here and elsewhere on preventing CSRF.

I managed to convert them from jQuery to ES6. Sadly it only works well for input, but not for textarea elements.

/* Prevent click-jacking with invisible iframes */
if (top.location !== window.location) 
    top.location = window.location;

/* Prevent HTML tags in inputs and textareas */
const sanitizationRegex = /<(|\/|[^>\/bi]|\/[^>bi]|[^\/>][^>]+|\/[^>][^>]+)>/g
const inputs = [...document.querySelectorAll('input')]
const textareas = [...document.querySelectorAll('textarea')]
const sanitizeInput = function(element) {
    element.value = element.value.replaceAll(sanitizationRegex, '')
}
const sanitizeTextarea = function(element) {
    element.innerText = element.innerText.replaceAll(sanitizationRegex, '')
    element.innerHTML = element.innerHTML.replaceAll(sanitizationRegex, '')
};
inputs.forEach(element => {
    element.addEventListener('keyup', () => sanitizeInput(element))
    element.addEventListener('change', () => sanitizeInput(element))
});
textareas.forEach(element => {
    element.addEventListener('keyup', () => sanitizeTextarea(element))
    element.addEventListener('change', () => sanitizeTextarea(element))
})

As you can see I tried using innerText as well as innerHTML for textarea but neither worked. I also tried the same thing with innerContent but that just resulted in error logs.

Note: Here's a CodePen, with the first three lines removed.

s3c
  • 1,481
  • 19
  • 28
  • 1
    CodePen has been fixed to reflect Peter answer on how to do it for textareas. But please read his answer and visit links for further explanation. – s3c Jun 22 '21 at 10:14

1 Answers1

2

This is not Cross Site Request Forgery (CSRF) you are trying to prevent, it is Cross Site Scripting (XSS).

CSRF: Save the form's HTML code on another server and send the POST request from somewhere else. CSRF Tokens are the usual solution for this. They are created and validated server-side.

XSS: Not preventing or filtering HTML tags can lead to attackers adding script tags with malicious code. JavaScript can help sanitize for innocent users, but countermeasures must be done server-side as well.

You want HTML tags to be filtered out. You are using JavaScript.
JavaScript can be easily edited in-browser with the browser's development tools. An attacker can just add a break point, add return; as the first line of your sanitation function before it is called and completely negate your efforts. You can put some sanitation into JavaScript just to offset some computation power to the browser but it seems this is your only strategy.
You must filter HTML tags server-side no matter what.

Now we have that out of the way...
You change the value of textareas with .value as well: How to change the Content of a textarea with JavaScript.

Peter Krebs
  • 3,831
  • 2
  • 15
  • 29
  • Extremely useful answer @PeterKrebs! I see there's REFLECTED cross site scripting as well. Would you mind editing your answer to take it into consideration? Also would anyone care to suggest a better question title for this answer to appropriately reach more people? – s3c Jun 22 '21 at 10:08
  • 1
    Reflected cross-site scripting is also already talked about in the linked article about XSS. In general: Just read all of [OWASP](https://owasp.org/)'s articles : ) – Peter Krebs Jun 22 '21 at 10:11