如何保护父级样式免受用户在描述字段中添加的样式的影响

我使用Wordpress，但我认为这个问题适用于用户有权访问具有发布功能的前端的任何网站。

我想允许用户设置他们的帖子样式，但只能在描述区域中。我不希望作者能够用一些聪明的CSS来更改整个页面。我已经考虑了一些想法，但似乎总有一个解决方法。我很困惑，所以我现在关闭了 HTML 允许功能。

它们是保护父级样式的过程吗？也许使用 jquery 为每个用户样式附加一个 id，或者在他们的样式执行之前用 php 包装它。?

例如，如果用户添加：.body 或 #description：parent .. "包装"的父 ID 会通过像这样包装来修改或破坏他们的样式：

/* #forced_container would be added before their style is applied */
#forced_container.body{ /* user evil invasive style/script */ }
#forced_container #description:parent{ /* user evil invasive style/script */ }

或嵌套它

#forced_container {

 .body{ 
       /* user evil invasive style/script */ 
  }
  #description:parent {
       font-weight: bold;
       text-decoration: none;
     }
 }

不要让用户直接设置任何样式。

有一个自定义 css 区域，它接受选择器、key: value;对，没有别的。然后使用您自己的逻辑将其解析为 css。我会有一个选择器不能触摸的内容列表，或者它可以触摸的选择器的白名单。

下面是伪代码示例。您不应该只是复制和粘贴它，因为它实际上不会检查任何内容。

<head>
    <style>
<?php
    // append custom css in style tag as long as 
    // the selector passes your function's approval
    foreach ( $myCustomCSsInput as $CSS ) {
        if ( isOkaySelector( $CSS['selector'] ) ) {
            // add selector 
            echo "{$CSS['selector']} {";
            // check each `attribute: value;` pair
            foreach ( $CSS['attrs'] as $attr ) {
                if ( isAlsoNotABannedAttribute( $attr['attr'] ) ) {
                    // add the attribute: value; pair
                    echo "{$attr['attr']}: {$attr['value']};";
                } //end if
            }  //end foreach
            // end the selector
            echo "}";
         } //end if
      } //end foreach

function isOkaySelector($value) {
    return true;
}
function isAlsoNotABannedAttribute($value) {
    return true;
}

示例数据如下所示

$myCustomCSsInput = array (
        array(
            'selector' => ".OKselector",
            'attrs' => array(
                array(
                    'attr' => "color",
                    'value' => "#BADA55"
                    ),
                array(
                    'attr' => "max-width",
                    'value' => "500px"
                )
            )
        )
    );

.OKselector {color: #BADA55;max-width: 500px;}

CSS 不像编程语言那样具有范围，这意味着用户输入样式可以覆盖站点定义的样式。如果你非常认真地让人们设置某些东西的样式，而不是其他的东西，你可以编写一个解析器，根据你的主题中已经存在的内容重命名（或剥离）他们创建的样式，但这比它可能值得的要多得多。

相关内容

最新更新

热门标签：