时间戳

首页 > 解决方案 > 如何使用 JavaScript 防止 textarea 元素上的跨站请求伪造 (CSRF)？

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

问题描述

我在这里和其他地方找到了很多关于防止 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))
})

如您所见，我尝试过使用forinnerText以及innerHTMLfortextarea但都没有奏效。我也尝试过同样的事情，innerContent但这只是导致错误日志。

注意：这是一个CodePen，前三行被删除。

标签： javascriptecmascript-6csrf

解决方案

这不是您要防止的跨站请求伪造 ( CSRF )，而是跨站脚本 ( XSS )。

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

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

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

现在我们已经解决了这个问题......
您也可以更改 textarea 的值.value：如何使用 JavaScript 更改 textarea 的内容。

推荐阅读