HTML5的contenteditable属性是否安全？

Question

所有这个问题的答案都比较旧。我在SO上找不到2016年以后的任何内容。HTML5的contenteditable=true属性安全吗？我没有看到它被广泛使用。如果要使用它，我需要做哪些安全保护？

编辑： 自从旧答案之后，现在已经被广泛接受了，http://caniuse.com/#search=contenteditable 编辑： 当我说安全时，我的意思是如何确保输入的内容是安全的？我应该寻找什么样的问题呢？XSS？还是其他什么？

编辑： 我会将编辑后的内容发送到服务器。HTML5属性和其他任何输入元素有何不同？

- johnny

Answer 1

它是完全安全的。contenteditable属性是一个枚举属性，其关键字为 空字符串、true 和 false。空字符串和 true 关键字映射到 true 状态。false 关键字映射到 false 状态。此外，还有一个第三个状态——继承状态，这是缺失值默认值（以及无效值默认值）。

contenteditable="" or contenteditable="true"

表示元素是可编辑的。

contenteditable="false"

表示该元素不可编辑。

contenteditable="inherit"

如果元素的直接父元素可编辑，则表示该元素可编辑。这是默认值。

当您给一个元素添加contenteditable属性时，浏览器会使该元素可编辑。此外，该元素的任何子元素也将变为可编辑，除非子元素明确设置了contenteditable="false"。

- ADIS bayrakcan

---

我在询问使用它是否安全，例如用户输入的内容。 - johnny

如果输入应该由用户编辑，则应使用此选项。它完全在客户端上，也就是浏览器端。当然，如果要将其发送到服务器数据库，则应确保该值安全。 - ADIS bayrakcan

这就是我所问的。使用这个HTML5属性是否有任何固有的特殊之处，可能不适用于常规输入元素？*我正在将它发送到服务器。 - johnny

请注意，用户可以通过右键单击并“检查元素”来编辑客户端上的所有内容。因此，当它添加到您的数据库中时，您应该在服务器端（php）上对其进行保护。 - ADIS bayrakcan

Answer 2

我认为你所说的“安全”，是指用户在从Word或其他网页或聊天应用程序复制内容时是否可能意外触发XSS或类似问题。

好的，这取决于：

您可以在可编辑的iframe上使用sandbox="allow-same-origin"属性，这将阻止iframe内部执行所有javascript。

为了防止加载外部资源，您可以提供一个CSP，将资源限制为您的域或完全禁止外部资源。

但请注意：如果iframe与父级源相同，则iframe中的CSP也会在某些浏览器中限制父站点。需要同源才能访问iframe的编辑内容。

然而，您可以使用不同来源的iframe，并通过CSP对其进行限制，其中包含一个如上所述被沙盒化的contenteditable iframe。第一个iframe（包含沙盒化的iframe）可以使用javascript和message passing与您的顶级页面/来源进行通信。

据我所知，您无需在服务器端执行特殊操作。您可以使用普通的文本区域来完成可编辑的所有工作。 使用HTML Purifier或一些基于白名单的类似过滤器。

- Thilo

Answer 3

首先，它并不被所有浏览器支持。其次，就安全性而言，它只是一个客户端属性，用于启用内容编辑。例如：我可以在我的浏览器中打开控制台并将contenteditable="true"添加到您的body标签中，从而删除您网页上的所有内容和元素。现在...它不会损害您的网站，因为它不影响服务器端。但这取决于您的用例。您打算如何使用它？总之，它并没有比表单输入更危险。

- Adrianopolis

---

自从旧的答案以来，现在似乎被广泛接受了，http://caniuse.com/#search=contenteditable - johnny