Issue #3262686: Add the DOMPurify library for HTML in captions.

Author: Jen Lampton

README.md

@@ -28,15 +28,25 @@ Installation
 - Install this module using the official Backdrop CMS instructions at
   https://backdropcms.org/user-guide/modules
 
-- Visit the configuration page under Administration > Configuration > Media >
-  Colorbox (admin/config/media/colorbox) and configure as necessary.
+- Configure your image fields or views to display images in colorboxes.
 
+- (Optional) Visit the configuration page under Administration > Configuration >
+  Media > Colorbox (admin/config/media/colorbox) and configure as necessary.
 
-Documentation
--------------
 
-Documentation is located in the Wiki:
-https://github.com/backdrop-contrib/colorbox/wiki/Documentation
+Differences from Drupal
+-----------------------
+
+- If you would like to use HTML tags in colorbox captions, you will need to enable
+  the new setting `Allow HTML in Colorbox captions`. This configuration will use
+  the DOMpurify library for sanitization. Please note: **The DOMpurify library
+  has several dependencies with security issues.** It is unknown whether the
+  colorbox use of DOMpurify could introduce a vulnerablity to your site. For
+  this reason it is recommend to leave this setting disabled.
+- The Backdrop version of Colorbox module does not require that you download or
+  install the Color library separately.
+- The Backdrop version of Colorbox module does not require that you download or
+  install the DomPurify library separately.
 
 
 Current Maintainers
@@ -50,6 +60,7 @@ Credits
 -------
 
 - Ported to Backdrop by [Andy Martha](https://github.com/biolithic)
+- Drupal module maintainer [Paul McKibben](https://www.drupal.org/u/paulmckibben)
 - Drupal module maintainer [Fredrik Jonsson](https://drupal.org/user/5546)
 - Drupal module maintainer [Sam Becker](https://www.drupal.org/u/sam152)
 - Drupal module maintainer [Andrii Podanenko](https://www.drupal.org/u/podarok)
@@ -58,8 +69,10 @@ Credits
 - The [Colorbox jQuery library](http://www.jacklmoore.com)
 
 
-License
--------
+Licenses
+--------
 
-This project is GPL v2 software. See the LICENSE.txt file in this directory for
-complete text.
+* This project is GPL v2 software. See the LICENSE.txt file in this directory
+  for complete text.
+* The Colorbox jQuery library is released under the [MIT License](https://opensource.org/licenses/mit-license.php).
+* The DOMpurify library is released under [a dual license of Apache-2.0 and MPL-2.0](https://github.com/cure53/DOMPurify/blob/main/LICENSE).

colorbox.admin.inc

@@ -8,24 +8,43 @@
  * General configuration form for controlling the colorbox behaviour.
  */
 function colorbox_admin_settings() {
-  $colorbox_path = backdrop_get_path('module', 'colorbox') . '/libraries/colorbox';
-  $colorbox_styles = array(
-    'default' => t('Default'),
-    'plain' => t('Plain (mainly for images)'),
-    'stockholmsyndrome' => t('Stockholm Syndrome'),
-    $colorbox_path . '/example1' => t('Example 1'),
-    $colorbox_path . '/example2' => t('Example 2'),
-    $colorbox_path . '/example3' => t('Example 3'),
-    $colorbox_path . '/example4' => t('Example 4'),
-    $colorbox_path . '/example5' => t('Example 5'),
-    'none' => t('None'),
+  $module_path = backdrop_get_path('module', 'colorbox');
+  $colorbox_path = $module_path . '/libraries/colorbox';
+  backdrop_add_js($module_path . '/js/colorbox_admin_settings.js', array('preprocess' => FALSE));
+
+  $form['colorbox_extra_features'] = array(
+    '#type' => 'fieldset',
+    '#title' => t('Extra features'),
   );
-  $form['colorbox_style'] = array(
-    '#type' => 'select',
-    '#title' => t('Colorbox style'),
-    '#options' => $colorbox_styles,
-    '#default_value' => config_get('colorbox.settings', 'colorbox_style'),
-    '#description' => t('Select "None" if Colorbox styles are provided by your theme.'),
+  $form['colorbox_extra_features']['colorbox_load'] = array(
+    '#type' => 'checkbox',
+    '#title' => t('Enable Colorbox load'),
+    '#default_value' => config_get('colorbox.settings', 'colorbox_load'),
+    '#description' => t('This enables custom links that can open forms and paths in a Colorbox. Add the class "colorbox-load" to the link and build the url like this for paths "[path]?width=500&height=500&iframe=true" or "[path]?width=500&height=500" if you don\'t want an iframe. Other modules may activate this for easy Colorbox integration.'),
+  );
+  $form['colorbox_extra_features']['colorbox_inline'] = array(
+    '#type' => 'checkbox',
+    '#title' => t('Enable Colorbox inline'),
+    '#default_value' => config_get('colorbox.settings', 'colorbox_inline'),
+    '#description' => t('This enables custom links that can open inline content in a Colorbox. Add the class "colorbox-inline" to the link and build the url like this "?width=500&height=500&inline=true#id-of-content". Other modules may activate this for easy Colorbox integration.'),
+  );
+
+  $form['colorbox_dompurify'] = array(
+    '#type' => 'fieldset',
+    '#title' => t('HTML Captions'),
+    '#description' => t('The <a href="!dompurify_link">DOMPurify</a> ' .
+      'library is necessary if you want to use HTML in Colorbox captions. ' .
+      'Without it, all captions will be treated as plain text.',
+       array(
+         '!dompurify_link' => 'https://github.com/cure53/DOMPurify',
+       )
+    ),
+  );
+  $form['colorbox_dompurify']['colorbox_dompurify_include'] = array(
+    '#type' => 'checkbox',
+    '#title' => t('Allow HTML in Colorbox captions'),
+    '#default_value' => config_get('colorbox.settings', 'colorbox_dompurify_include'),
+    '#description' => t('This setting will add the DOMPurity library.'),
   );
 
   if (module_exists('insert')) {
@@ -51,24 +70,44 @@ function colorbox_admin_settings() {
     );
   }
 
-  $form['colorbox_custom_settings_activate'] = array(
-    '#type' => 'radios',
-    '#title' => t('Colorbox custom options'),
-    '#options' => array(
-      0 => t('Disabled'),
-      1 => t('Enabled'),
-    ),
-    '#default_value' => config_get('colorbox.settings', 'colorbox_custom_settings_activate'),
-  );
   $form['colorbox_custom_settings'] = array(
     '#type' => 'fieldset',
-    '#title' => t('Colorbox custom options'),
-    '#states' => array(
-      'visible' => array(
-        ':input[name="colorbox_custom_settings_activate"]' => array('value' => '1'),
-      ),
-    ),
+    '#title' => t('Styles and options'),
+  );
+  $colorbox_styles = array(
+    'default' => t('Default'),
+    'plain' => t('Plain (mainly for images)'),
+    'stockholmsyndrome' => t('Stockholm Syndrome'),
+    $library_colorbox['library path'] . '/example1' => t('Example 1'),
+    $library_colorbox['library path'] . '/example2' => t('Example 2'),
+    $library_colorbox['library path'] . '/example3' => t('Example 3'),
+    $library_colorbox['library path'] . '/example4' => t('Example 4'),
+    $library_colorbox['library path'] . '/example5' => t('Example 5'),
+    'none' => t('None'),
+  );
+  $form['colorbox_custom_settings']['colorbox_style'] = array(
+    '#type' => 'select',
+    '#title' => t('Style'),
+    '#options' => $colorbox_styles,
+    '#default_value' => config_get('colorbox.settings', 'colorbox_style'),
+    '#description' => t('Select "None" if Colorbox styles are provided by your theme.'),
+  );
+
+  $colorbox_custom_settings_activate = config_get('colorbox.settings', 'colorbox_custom_settings_activate');
+  $form['colorbox_custom_settings']['colorbox_custom_settings_activate'] = array(
+    '#type' => 'radios',
+    '#title' => t('Colorbox options'),
+    '#options' => array(0 => t('Use default options'), 1 => t('Use custom options')),
+    '#default_value' => $colorbox_custom_settings_activate,
+    '#prefix' => '<div class="colorbox-custom-settings-activate">',
+    '#suffix' => '</div>',
+  );
+
+  $js_hide_activate = $colorbox_custom_settings_activate ? '' : ' js-hide';
+  $form['colorbox_custom_settings']['wrapper_start'] = array(
+    '#markup' => '<div class="colorbox-custom-settings' . $js_hide_activate . '">',
   );
+
   $form['colorbox_custom_settings']['colorbox_transition_type'] = array(
     '#type' => 'radios',
     '#title' => t('Transition type'),
@@ -200,6 +239,7 @@ function colorbox_admin_settings() {
     '#default_value' => config_get('colorbox.settings', 'colorbox_fixed'),
     '#description' => t('If the Colorbox should be displayed in a fixed position within the visitor\'s viewport or relative to the document.'),
   );
+
   $form['colorbox_custom_settings']['colorbox_scrolling'] = array(
     '#type' => 'radios',
     '#title' => t('Scrollbars'),
@@ -208,31 +248,33 @@ function colorbox_admin_settings() {
     '#description' => t('If set to Off, Colorbox will hide scrollbars for overflowing content. This could be used in conjunction with the resize method for a smoother transition if you are appending content to an already open instance of Colorbox.'),
   );
 
-  $form['colorbox_slideshow'] = array(
+  $form['colorbox_custom_settings']['colorbox_slideshow_settings'] = array(
+    '#type' => 'fieldset',
+    '#title' => t('Slideshow settings'),
+    '#collapsible' => TRUE,
+    '#collapsed' => TRUE,
+  );
+  $form['colorbox_custom_settings']['colorbox_slideshow_settings']['colorbox_slideshow'] = array(
     '#type' => 'radios',
-    '#title' => t('Automatic Slideshow'),
-    '#options' => array(
-      0 => t('Off'),
-      1 => t('On'),
-    ),
+    '#title' => t('Slideshow'),
+    '#options' => array(0 => t('Off'), 1 => t('On')),
     '#default_value' => config_get('colorbox.settings', 'colorbox_slideshow'),
     '#description' => t('An automatic slideshow to a content group / gallery.'),
+    '#prefix' => '<div class="colorbox-slideshow-settings-activate">',
+    '#suffix' => '</div>',
   );
-  $form['colorbox_slideshow_settings'] = array(
-    '#type' => 'fieldset',
-    '#title' => t('Slideshow settings'),
-    '#states' => array(
-      'visible' => array(
-        ':input[name="colorbox_slideshow"]' => array('value' => '1'),
-      ),
-    ),
+
+  $js_hide_slideshow = config_get('colorbox.settings', 'colorbox_slideshow') ? '' : ' js-hide';
+  $form['colorbox_custom_settings']['colorbox_slideshow_settings']['wrapper_start'] = array(
+    '#markup' => '<div class="colorbox-slideshow-settings' . $js_hide_slideshow . '">',
   );
-  $form['colorbox_slideshow_settings']['colorbox_slideshowauto'] = array(
+
+  $form['colorbox_custom_settings']['colorbox_slideshow_settings']['colorbox_slideshowauto'] = array(
     '#type' => 'checkbox',
     '#title' => t('Automatically start to play the slideshow'),
     '#default_value' => config_get('colorbox.settings', 'colorbox_slideshowauto'),
   );
-  $form['colorbox_slideshow_settings']['colorbox_slideshowspeed'] = array(
+  $form['colorbox_custom_settings']['colorbox_slideshow_settings']['colorbox_slideshowspeed'] = array(
     '#type' => 'select',
     '#title' => t('Slideshow speed'),
     '#field_suffix' => t('milliseconds'),
@@ -251,34 +293,25 @@ function colorbox_admin_settings() {
     )),
     '#default_value' => config_get('colorbox.settings', 'colorbox_slideshowspeed'),
   );
-  $form['colorbox_slideshow_settings']['colorbox_text_start'] = array(
+  $form['colorbox_custom_settings']['colorbox_slideshow_settings']['colorbox_text_start'] = array(
     '#type' => 'textfield',
     '#title' => t('Start button text'),
     '#default_value' => config_get('colorbox.settings', 'colorbox_text_start'),
     '#size' => 30,
   );
-  $form['colorbox_slideshow_settings']['colorbox_text_stop'] = array(
+  $form['colorbox_custom_settings']['colorbox_slideshow_settings']['colorbox_text_stop'] = array(
     '#type' => 'textfield',
     '#title' => t('Stop button text'),
     '#default_value' => config_get('colorbox.settings', 'colorbox_text_stop'),
     '#size' => 30,
   );
 
-  $form['colorbox_extra_features'] = array(
-    '#type' => 'fieldset',
-    '#title' => t('Extra features'),
+  $form['colorbox_custom_settings']['colorbox_slideshow_settings']['wrapper_stop'] = array(
+    '#markup' => '</div>',
   );
-  $form['colorbox_extra_features']['colorbox_load'] = array(
-    '#type' => 'checkbox',
-    '#title' => t('Enable Colorbox load'),
-    '#default_value' => config_get('colorbox.settings', 'colorbox_load'),
-    '#description' => t('This enables custom links that can open forms and paths in a Colorbox. Add the class "colorbox-load" to the link and build the url like this for paths "[path]?width=500&height=500&iframe=true" or "[path]?width=500&height=500" if you don\'t want an iframe. Other modules may activate this for easy Colorbox integration.'),
-  );
-  $form['colorbox_extra_features']['colorbox_inline'] = array(
-    '#type' => 'checkbox',
-    '#title' => t('Enable Colorbox inline'),
-    '#default_value' => config_get('colorbox.settings', 'colorbox_inline'),
-    '#description' => t('This enables custom links that can open inline content in a Colorbox. Add the class "colorbox-inline" to the link and build the url like this "?width=500&height=500&inline=true#id-of-content". Other modules may activate this for easy Colorbox integration.'),
+
+  $form['colorbox_custom_settings']['wrapper_stop'] = array(
+    '#markup' => '</div>',
   );
 
   $form['colorbox_advanced_settings'] = array(

colorbox.module

@@ -105,6 +105,22 @@ function colorbox_library_info() {
       backdrop_get_path('module', 'colorbox') . '/libraries/colorbox/jquery.colorbox.js' => array(),
     ),
   );
+  $libraries['DOMPurify'] = array(
+    'title' => 'DOMPurify',
+    'website' => 'https://github.com/cure53/DOMPurify',
+    'version' => '2.3.6',
+    'js' => array(
+      backdrop_get_path('module', 'colorbox') . '/libraries/DOMPurify/purify.min.js',
+    ),
+  );
+  $libraries['DOMPurify-source'] = array(
+    'title' => 'DOMPurify',
+    'website' => 'https://github.com/cure53/DOMPurify',
+    'version' => '2.3.6',
+    'js' => array(
+      backdrop_get_path('module', 'colorbox') . '/libraries/DOMPurify/purify.js',
+    ),
+  );
 
   return $libraries;
 }
@@ -220,13 +236,20 @@ function _colorbox_doheader() {
 
   backdrop_add_js(array('colorbox' => $js_settings), array('type' => 'setting', 'scope' => JS_DEFAULT));
 
-  // Add and initialise the Colorbox plugin.
+  // Add and initialize the Colorbox and DOMPurify libraries.
   $variant = config_get('colorbox.settings', 'colorbox_compression_type');
+  $dompurify = config_get('colorbox.settings', 'colorbox_dompurify_include');
   if ($variant == 'minified') {
     backdrop_add_library('colorbox', 'colorbox');
+    if ($dompurify) {
+      backdrop_add_library('colorbox', 'DOMPurify');
+    }
   }
   elseif ($variant == 'source') {
     backdrop_add_library('colorbox', 'colorbox-source');
+    if ($dompurify) {
+      backdrop_add_library('colorbox', 'DOMPurify-source');
+    }
   }
 
   backdrop_add_js($path . '/js/colorbox.js');

js/colorbox.js

@@ -39,7 +39,7 @@ Backdrop.behaviors.initColorbox = {
         // If a title attribute is supplied, sanitize it.
         var title = $(this).attr('title');
         if (title) {
-          extendParams.title = Backdrop.checkPlain(title);
+          extendParams.title = Backdrop.colorbox.sanitizeMarkup(title);
         }
         $(this).colorbox($.extend({}, settings.colorbox, extendParams));
       });
@@ -50,4 +50,49 @@ Backdrop.behaviors.initColorbox = {
   }
 };
 
+// Create colorbox namespace if it doesn't exist.
+if (!Backdrop.hasOwnProperty('colorbox')) {
+  Backdrop.colorbox = {};
+}
+
+/**
+ * Global function to allow sanitizing captions and control strings.
+ *
+ * @param markup
+ *   String containing potential markup.
+ * @return @string
+ *  Sanitized string with potentially dangerous markup removed.
+ */
+Backdrop.colorbox.sanitizeMarkup = function(markup) {
+  // If DOMPurify installed, allow some HTML. Otherwise, treat as plain text.
+  if (typeof DOMPurify !== 'undefined') {
+    var purifyConfig = {
+      ALLOWED_TAGS: [
+        'a',
+        'b',
+        'strong',
+        'i',
+        'em',
+        'u',
+        'cite',
+        'code',
+        'br'
+      ],
+      ALLOWED_ATTR: [
+        'href',
+        'hreflang',
+        'title',
+        'target'
+      ]
+    }
+    if (Backdrop.settings.hasOwnProperty('dompurify_custom_config')) {
+      purifyConfig = Backdrop.settings.dompurify_custom_config;
+    }
+    return DOMPurify.sanitize(markup, purifyConfig);
+  }
+  else {
+    return Backdrop.checkPlain(markup);
+  }
+}
+
 })(jQuery);

js/colorbox_admin_settings.js

@@ -10,9 +10,11 @@ Backdrop.behaviors.initColorboxAdminSettings = {
 
     $('div.colorbox-custom-settings-activate input.form-radio', context).click(function () {
       if (this.value == 1) {
+        console.log('show');
         $('div.colorbox-custom-settings', context).show();
       }
       else {
+        console.log('hide');
         $('div.colorbox-custom-settings', context).hide();
       }
     });