HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

VanillaHtmlFormatter: How to do a true RTE WYSIWYG or WYWIWYG or WYGIWYW

WYSIWYG: (?.) huh!?

WYWIWYG: (n.) What You Write Is What You Get (Better)

WYGIWYW: (n.) What You Get Is What You Wrote (Best)

Sometimes you have that RTE software that lies to you. I.e, you copy and paste all kinds of fancy HTML into the RTE, the RTE does not even warn you that you are overdoing things with your scrolling marquee and such bling bling tags; then you hit the submit button with all the glee and smiles your facial muscles can muster, only to realize that the RTE stripped out all of your hardwork, and even worse, the server did some more stripping so that no part of your fancy text ever reached the Database. Or weirdly enough, your fancy stuff reached the database but the forum has rendered a sanitized version. All of this is confusing and causes a lot of unexpectedness....

BAM! Rejected! only Bold, Underline and Italics allowed in this hotel, no <font color>, <button>, etc etc.

As a forum administrator it is your duty to ensure that the RTE software you have implemented, right away and obviously, does allow and disallow exactly the same HTML tags that the forum renderer does. And this, client-side and server-side.

Client-side would be the JavaScript part; make sure you dig into the official docs of your RTE to find out how to do this very cleanly.

Server-side would be, in this case, vanilla forums plugin to save to database to match Vanilla rendering

private function RTEhtmlSanitizer($content){
  // return $content; //for debuging
  // library\core\class.vanillahtmlformatter.php
 
 //added for v3.2+
  $embedReplacer = Gdn::getContainer()->get(\Vanilla\EmbeddedContent\LegacyEmbedReplacer::class);

  $formatter = new VanillaHtmlFormatter($embedReplacer);
  $cleanedContent = $formatter->format($content);
  return $cleanedContent;
}


public function conversationMessageModel_beforeSave_handler($sender, $args) { //works
    $args['FormPostValues']['Body'] = $this->RTEhtmlSanitizer($args['FormPostValues']['Body']);
}

//this gives issues when saving comments on discussion pages
public function activityModel_beforeSave_handler($sender, $args) {
//  $args['Activity']['Story'] = $this->RTEhtmlSanitizer($args['Activity']['Story']);
}

public function activityModel_beforeSaveComment_handler($sender, $args) {
  $args['Comment']['Body'] = $this->RTEhtmlSanitizer($args['Comment']['Body']);
}

public function commentModel_beforeSaveComment_handler($sender, $args) {
  $args['FormPostValues']['Body'] = $this->RTEhtmlSanitizer($args['FormPostValues']['Body']);
}

public function discussionModel_beforeSaveDiscussion_handler($sender, $args) {
  $args['FormPostValues']['Body'] = $this->RTEhtmlSanitizer($args['FormPostValues']['Body']);
}
    


Now, what is saved to the database is exactly what vanilla will render, no hidden fees. And you have only one place to set your allowed tags, classnames etc.

Cheers.

Comments

  • R_JR_J Ex-Fanboy Munich Admin

    I start experimenting with CKEditor and the input side is quite advanced already. What I'm struggling with is a custom sanitizer for the output.

    CKEditor saves e.g. font information as class attributes in span elements <span style="font-family:'Times New Roman', Times, serif;">CKEditor</span>. There's no additional action needed to allow that to be saved to the database.

    But when rendered, it is rendered as plain text and by now I haven't found an elegant way to change that.

  • charrondevcharrondev Developer Lead (PHP, JS) Montreal Vanilla Staff

    @donshakespeare Classes are whitelist-only and styles are stripped because they can be used to deface the site. After you get a couple drive-by posts that take a tiny span and turn it into a giant fullscreen MAGA banner over the discussion page you'll understand why arbitrary styles can't be allowed. It's just too trivial to exploit.

  • @charrondev I truly am aware of this, as I have to deal with this too often. But that is the concern of the specific forum admin. I suggested at one time that the line be placed in the default-config.php instead of being hardcorded. This will allow forum addon developers some room, or even forum admins who need that feature and for whom there is no possibility of the aforesaid banner.

    Is it worth asking as a feature in the VF github issues?

  • rbrahmsonrbrahmson "You may say I'm a dreamer / But I'm not the only one" NY ✭✭✭

    There may be situations where the risk is well controlled within the environment - for example, intranet behind firewall.

  • phreakphreak Vanilla*APP (White Label) & Vanilla*Skins Shop MVP

    I second @donshakespeare opinion. In our case we have a well moderated environment and our users are trained to report anything out of line.

    We actually like to provide this freedom to our users. To me one of the ultimate goals of a community is to bring freedom and good behaviour on the same line.

    • VanillaAPP | iOS & Android App for Vanilla - White label app for Vanilla Forums OS
    • VanillaSkins | Plugins, Themes, Graphics and Custom Development for Vanilla
  • Strangely enough, my post (the second comment) has disappeared! Am I the only person not seeing it?

  • rbrahmsonrbrahmson "You may say I'm a dreamer / But I'm not the only one" NY ✭✭✭

    If you lost a post it may be a sign from heaven that there are other risks as well 😀

Sign In or Register to comment.