简体   繁体   English

表格所见即所得,但阻止用户破坏页面布局

[英]Form WYSIWYG but stop user from breaking page layout

I am looking into using a HTML WYSIWYG editor such as CKEditor but I am curious about what is to stop a user from submitting some HTML code that will change the layout of the page when I try to output their HTML. 我正在考虑使用HTML所见即所得(WYSIWYG)编辑器,例如CKEditor,但是我很好奇是什么阻止用户提交一些HTML代码,这些代码将在尝试输出HTML时更改页面的布局。

Here is an example of two posts: 这是两个帖子的示例:

<p><b>This is my post</b></p>
<p>It has some nice HTML that does not break stuff</p>

and

</div>
<div style="height:10000px; width:10000px;">
    <p>muhahaha</p>
</div>

As you can see, the first post is nice and simple, I can display that and it wont look crazy. 如您所见,第一篇文章很好而且很简单,我可以展示它,而且看起来不会发疯。 But the second post could alter my page layout completely (have not tested but you get the idea. 但是第二篇文章可能会完全改变我的页面布局(未经测试,但您明白了。)

<html>
<head>...</head>
<body>
    <div class='content'>
        <div class='post'>
            <p><b>This is my post</b></p>
            <p>It has some nice HTML that does not break stuff</p>
        </div>
        <div class='post'>
            </div>
            <div style="height:10000px; width:10000px;">
                <p>muhahaha</p>
            </div>
        </div>
    </div>
</body>
</html>

I know I can use htmlentities but this would then display the first post without the bold and I do not want that. 我知道我可以使用htmlentities,但是这样一来,第一篇文章就不会显示为粗体,我也不想这样做。

The stackoverflow website must have something like this built in, and I am wondering if there is a simple way to stop users being able to submit layout-changing HTML via a WYSIWYG editor? stackoverflow网站必须内置这样的东西,我想知道是否有一种简单的方法来阻止用户能够通过WYSIWYG编辑器提交更改布局的HTML?

CKEditor has a feature called Advanced Content Filter that in its default, automatic mode filters incoming HTML content by transforming and deleting disallowed elements, attributes, classes and styles. CKEditor具有一项称为“ 高级内容过滤器”的功能,默认情况下,自动模式通过转换和删除不允许的元素,属性,类和样式来过滤传入的HTML内容。 CKEditor will only allow content that was defined as allowed by enabled editor features (buttons, plugins). CKEditor仅允许已启用的编辑器功能(按钮,插件)定义的内容。

It is highly configurable, too, so it lets you fully control what your users can and cannot submit to your website. 它也是高度可配置的,因此它使您可以完全控制用户可以提交和不能提交到您的网站的内容。

Have a look at the following resources to figure it out: 请查看以下资源来弄清楚:

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM