Sanitize HTML output and increase size of Body textarea input fields …

…(CFM-62) (#293) * Sanitize HTML output and increase size of Body textarea input fields (CFM-62) * Ensure Mostly Static Page body is wrapped with a default div element (CFM-62)
COmanage · Feb 13, 2025 · 5f2e01d · 5f2e01d
1 parent 112b48a
commit 5f2e01d
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 20 deletions.
diff --git a/app/src/Controller/PagesController.php b/app/src/Controller/PagesController.php
@@ -23,6 +23,8 @@
 use Cake\ORM\TableRegistry;
 use Cake\View\Exception\MissingTemplateException;
 use \App\Lib\Enum\SuspendableStatusEnum;
+use Symfony\Component\HtmlSanitizer\HtmlSanitizer;
+use Symfony\Component\HtmlSanitizer\HtmlSanitizerConfig;
 
 /**
  * Static content controller
@@ -130,7 +132,17 @@ public function show(string $coid, string $name) {
         $this->set('vv_bc_skip', true); // this doesn't do anything?
 
         $this->set('vv_title', $msp->title);
-        $this->set('vv_body', $msp->body);
+
+        // Mostly Static Pages allow HTML input. Pass this through the Symfony HTML Sanitizer to
+        // disallow dom elements like <script> and <style>.
+        // XXX We may need to write a plugin (as in v4) if we want to allow <style> tags
+        $htmlSanitizer = new HtmlSanitizer(
+        // Allow all elements from the W3C Sanitizer API. This is more permissive than "allowSafeElements()".
+        // See: https://github.com/symfony/symfony/blob/7.2/src/Symfony/Component/HtmlSanitizer/Reference/W3CReference.php
+          (new HtmlSanitizerConfig())->allowStaticElements()
+        );
+        $sanitizedBody = $htmlSanitizer->sanitize($msp->body);
+        $this->set('vv_body', $sanitizedBody);
 
         return $this->render('/MostlyStaticPages/display');
     }

diff --git a/app/src/Lib/Traits/ValidationTrait.php b/app/src/Lib/Traits/ValidationTrait.php
@@ -33,8 +33,6 @@
 use Cake\Database\Schema\TableSchemaInterface;
 use Cake\ORM\TableRegistry;
 use Cake\Validation\Validator;
-use Symfony\Component\HtmlSanitizer\HtmlSanitizer;
-use Symfony\Component\HtmlSanitizer\HtmlSanitizerConfig;
 
 trait ValidationTrait {
   /**
@@ -241,11 +239,10 @@ public function validateInput($value, array $context) {
       switch($context['type']) {
         case 'html':
           // We are accepting HTML input. We will mostly pass it all through and ensure
-          // properly sanitized output. However, to help warn users about entering tags that 
-          // will be stripped, we can do some very rudimentary checking for script and 
-          // style tags. (An informational note should be placed below these fields as well.)
+          // properly sanitized output. However, we can do some very rudimentary checking for script tags.
+          // (An informational note should be placed below these fields as well.)
           $lowercaseVal = strtolower($value);
-          if(str_contains($lowercaseVal, '<script') || str_contains($lowercaseVal, '<style')) {
+          if(str_contains($lowercaseVal, '<script')) {
             // Disallowed HTML is in the input, so warn the user.
             return __d('error', 'input.invalid.html');
           }

diff --git a/app/templates/MessageTemplates/fields.inc b/app/templates/MessageTemplates/fields.inc
@@ -72,15 +72,20 @@ if($vv_action == 'add' || $vv_action == 'edit') {
     ]
   ]);
 
-  foreach ([
-             'subject',
-             'body_text'
-           ] as $field) {
-    print $this->element('form/listItem', [
-      'arguments' => [
-        'fieldName' => $field
-      ]]);
-  }
+  print $this->element('form/listItem', [
+    'arguments' => [
+      'fieldName' => 'subject'
+    ]
+  ]);
+
+  print $this->element('form/listItem', [
+    'arguments' => [
+      'fieldName' => 'body_text',
+      'fieldOptions' => [
+        'class' => 'big-textarea'
+      ]
+    ]
+  ]);
 
   $afterField = 
     '<div class="alert alert-info small p-2 d-flex gap-1" role="alert">' .
@@ -90,7 +95,10 @@ if($vv_action == 'add' || $vv_action == 'edit') {
 
   print $this->element('form/listItem', [
     'arguments' => [
-      'fieldName' => 'body_html'
+      'fieldName' => 'body_html',
+      'fieldOptions' => [
+        'class' => 'big-textarea'
+      ]
     ],
     'afterField' => $afterField
   ]);

diff --git a/app/templates/MostlyStaticPages/display.php b/app/templates/MostlyStaticPages/display.php
@@ -51,4 +51,7 @@
   <?php endif; // $banners ?>
 </div>
 
-<?= $vv_body ?>
+<div class="page-body">  
+  <?= $vv_body ?>
+</div>
+
diff --git a/app/templates/MostlyStaticPages/fields.inc b/app/templates/MostlyStaticPages/fields.inc
@@ -72,12 +72,27 @@ if($vv_action == 'add' || $vv_action == 'edit') {
   foreach ([
              'description',
              'status',
-             'context',
-             'body'
+             'context'
            ] as $field) {
     print $this->element('form/listItem', [
       'arguments' => [
         'fieldName' => $field
       ]]);
   }
+
+  $afterField =
+    '<div class="alert alert-info small p-2 d-flex gap-1" role="alert">' .
+    '  <em class="material-symbols-outlined" aria-hidden="true">info</em>' .
+    '  <span class="alert-text">' . __d('information','html.sanitization') . '</span>' .
+    '</div>';
+
+  print $this->element('form/listItem', [
+    'arguments' => [
+      'fieldName' => 'body',
+      'fieldOptions' => [
+        'class' => 'big-textarea'
+      ]
+    ],
+    'afterField' => $afterField
+  ]);
 }
diff --git a/app/webroot/css/co-base.css b/app/webroot/css/co-base.css
@@ -1618,6 +1618,9 @@ ul.form-list textarea {
   border: 1px solid var(--cmg-color-bg-007);
   padding: 0.5em;
 }
+ul.form-list textarea.big-textarea {
+  height: 24em;
+}
 ul.form-list li.field-stack textarea {
   margin: 0;
   width: 100%;
@@ -2185,6 +2188,9 @@ body.pages.logged-out #breadcrumbs {
 body.pages.logged-out .page-title-container {
   margin: 0;
 }
+.page-body {
+  margin-top: 1em;
+}
 /* GENERAL */
 .hidden,
 .invisible,