如何使用 JavaScript 防止 textarea 元素上的跨站请求伪造 (CSRF)？

Question

我在这里和其他地方找到了很多关于防止 CSRF 的答案。

我设法将它们从 jQuery 转换为 ES6。遗憾的是，它只适用于 input，但不适用于 textarea 元素。

/* 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))
})

如您所见，我尝试使用 innerText 以及 innerHTML 作为 textarea，但均无效。我也用 innerContent 尝试过同样的事情，但这只会导致错误日志。

注意：这里是 CodePen，删除了前三行。

Answer 1

这不是跨站请求伪造（CSRF) you are trying to prevent, it is Cross Site Scripting (XSS）。

CSRF：将表单的 HTML 代码保存在另一台服务器上，并从其他地方发送 POST 请求。 CSRF 令牌是通常的解决方案。它们是在服务器端创建和验证的。

XSS：不阻止或过滤HTML标签会导致攻击者添加带有恶意代码的脚本标签。 JavaScript 可以帮助净化无辜用户，但也必须在服务器端采取对策。

您希望过滤掉 HTML 个标签。您正在使用 JavaScript.
JavaScript 可以使用浏览器的开发工具在浏览器中轻松编辑。攻击者只需添加一个断点，在您的卫生功能被调用之前添加 return; 作为第一行，就可以完全抵消您的努力。您可以将一些卫生设施放入 JavaScript 只是为了抵消浏览器的一些计算能力，但似乎这是您唯一的策略。
无论如何，您都必须在服务器端过滤 HTML 个标签。

现在我们已经解决了这个问题...
您还可以使用 .value 更改文本区域的值：How to change the Content of a textarea with JavaScript.

如何使用 JavaScript 防止 textarea 元素上的跨站请求伪造 (CSRF)？

How to prevent Cross Site Request Forgery (CSRF) on textarea element with JavaScript?

javascript

csrf

ecmascript-6