有没有一种方法可以在不使用 !important 的情况下清理用户输入？

Question

我正在使用 wp_editor 在我的 WordPress 网站上创建一个前端表单，用户可以使用该表单进行发布，而无需转到管理部分。它可以工作，但是因为他们可以剪切和粘贴到其中，所以他们可能会在其中复制内联样式，这将与网站的整体设计发生冲突。

为了解决这个问题，我用 clean 类将所有帖子封装在 div 中，这会去除任何潜在的内联样式：SCSS 代码如下：

.clean {
            /*Stops inline styles overwriting when people cut and paste */
            * {
                font-color: inherit !important;
                font-family: inherit !important;
                font-size: inherit !important;              
                font-weight: inherit !important;                
                line-height: inherit !important;
            }
            b, strong {
                font-weight: bold !important;
            }
            p {
                margin:0;
                padding: .5em 0 !important;
                -webkit-margin-before:0;
                -webkit-margin-after:0;             
            }
        }

但是，我知道在您的 css 中使用 !important 通常被认为是不好的做法，因此我正在寻找解决方法。这可以在 css 中完成吗？

Answer 1

这听起来有潜在的危险。您应该在将提交的 html 保存到数据库之前对其进行清理。

例如，有人可以插入以下帖子：

<a href="javascript:alert('asd')">click me</a>

这并不危险，但攻击者可以使用此方法向您的页面注入任何内容。

但是，为了绕过您的示例，“攻击者”还可以包含他们自己的 <style></style> 块，这些块引用您页面上的任何元素并以这种方式进行更改。

在您的清理过程中，您可能希望删除所有标记或获得一个聪明的解析器来删除您不想要的部分。我个人不会允许公共用户在我的网站上插入 html。