Change templates to support CSP on WYSIWYG editors like TinyMCE

contao-themes-net · Feb 21, 2024 · 32d7c7e · 32d7c7e
1 parent 16a9ef9
commit 32d7c7e
Show file tree

Hide file tree

Showing 25 changed files with 836 additions and 3,575 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,12 @@ Types of changes
     Security in case of vulnerabilities.
 )
 
+## [2.3.1](https://github.com/contao-themes-net/nature-theme-bundle/tree/2.3.1) – 2024-02-21
+
+- [Changed] Change templates to support CSP on WYSIWYG editors like TinyMCE
+- [Changed] Now require contao version ^5.3
+- [Changed] Update sql files
+
 ## [2.3.0](https://github.com/contao-themes-net/nature-theme-bundle/tree/2.3.0) – 2024-08-02
 
 - [Added] Add quote element

diff --git a/composer.json b/composer.json
@@ -27,7 +27,7 @@
     },
     "require": {
         "php": "^8.0",
-        "contao/core-bundle": "^5.0",
+        "contao/core-bundle": "^5.3",
         "terminal42/contao-folderpage": "^3.0",
         "pdir/contao-theme-helper-bundle": "^1.5",
         "contao-themes-net/theme-components-bundle": "^1.4",

diff --git a/contao/sql/contao50/full.sql b/contao/sql/contao50/full.sql
diff --git a/contao/sql/contao50/minimal.sql b/contao/sql/contao50/minimal.sql
diff --git a/contao/sql/contao51/full.sql b/contao/sql/contao51/full.sql
diff --git a/contao/sql/contao51/minimal.sql → contao/sql/contao53/full.sql b/contao/sql/contao51/minimal.sql → contao/sql/contao53/full.sql
diff --git a/contao/templates/elements/ce_cthemes_feature_element_nature.html5 b/contao/templates/elements/ce_cthemes_feature_element_nature.html5
@@ -14,7 +14,7 @@
         <?= $this->headline ?>
         <?php if($this->iconLink != ""): ?></a><?php endif; ?>
       </div>
-      <div class="text"><?= $this->text ?></div>
+      <div class="text"><?= $this->cspInlineStyles($this->text) ?></div>
     </div>
   </div>
 </div>
diff --git a/contao/templates/elements/ce_cthemes_teaserbox_fullheight.html5 b/contao/templates/elements/ce_cthemes_teaserbox_fullheight.html5
@@ -3,27 +3,27 @@
   <?php $this->block('content'); ?>
 
   <?php if ($this->addImage): ?>
-  <figure class="image_container float_above" style="background-image:url('<?= $this->picture['img']['src'] ?>')"></figure>
+    <figure class="image_container float_above" style="background-image:url('<?= $this->picture['img']['src'] ?>')"></figure>
   <?php endif; ?>
 
   <div class="content">
     <?php if ($this->headline): ?>
-    <<?= $this->hl ?>>
-    <?php if($this->page != ""): ?><a href="<?= $this->page ?>"<?= $this->target ?><?= $this->rel ?><?= $this->pageTitle ?>><?php endif; ?>
-    <?= $this->headline ?>
-    <?php if($this->page != ""): ?></a><?php endif; ?>
-  </<?= $this->hl ?>>
-  <?php endif; ?>
+      <<?= $this->hl ?>>
+      <?php if($this->page != ""): ?><a href="<?= $this->page ?>"<?= $this->target ?><?= $this->rel ?><?= $this->pageTitle ?>><?php endif; ?>
+      <?= $this->headline ?>
+      <?php if($this->page != ""): ?></a><?php endif; ?>
+      </<?= $this->hl ?>>
+    <?php endif; ?>
 
-  <?= $this->text ?>
+    <?= $this->cspInlineStyles($this->text) ?>
 
-  <?php if($this->page != ""): ?>
-  <div class="pageLink">
-    <a href="<?= $this->page ?>"<?= $this->target ?><?= $this->rel ?><?= $this->pageTitle ?>><?= $this->pageText ?></a>
+    <?php if($this->page != ""): ?>
+      <div class="pageLink">
+        <a href="<?= $this->page ?>"<?= $this->target ?><?= $this->rel ?><?= $this->pageTitle ?>><?= $this->pageText ?></a>
+      </div>
+    <?php endif; ?>
   </div>
-  <?php endif; ?>
-</div>
 
-<?php $this->endblock(); ?>
+  <?php $this->endblock(); ?>
 </div>
 </div>
diff --git a/contao/templates/elements/ce_cthemes_teaserbox_nature.html5 b/contao/templates/elements/ce_cthemes_teaserbox_nature.html5
@@ -15,7 +15,7 @@
   </<?= $this->hl ?>>
   <?php endif; ?>
 
-  <?= $this->text ?>
+  <?= $this->cspInlineStyles($this->text) ?>
 
   <?php if($this->page != ""): ?>
   <div class="pageLink">

diff --git a/contao/templates/elements/ce_slider_element_nature.html5 b/contao/templates/elements/ce_slider_element_nature.html5
@@ -28,7 +28,7 @@
       </<?= $this->hl ?>>
     <?php endif; ?>
 
-    <?= $this->text ?>
+    <?= $this->cspInlineStyles($this->text) ?>
 
     <?php if($this->page): ?>
       <a href="<?= $this->page ?>" class="readmore"<?= $this->target ?><?= $this->rel ?>><?= $this->linkText ?></a>

diff --git a/contao/templates/elements/ce_text_modal_nature.html5 b/contao/templates/elements/ce_text_modal_nature.html5
@@ -10,7 +10,7 @@
 
     <div class="teaser">
       <div>
-        <?= $this->text ?>
+        <?= $this->cspInlineStyles($this->text) ?>
       </div>
     </div>
 
@@ -29,6 +29,6 @@
   <div class="modal-background"></div>
   <div class="modal-content">
     <button class="delete float_right" aria-label="close"></button>
-    <?= $this->modalContent ?>
+    <?= $this->cspInlineStyles($this->modalContent) ?>
   </div>
 </div>
diff --git a/contao/templates/events/event_full_nature.html5 b/contao/templates/events/event_full_nature.html5
@@ -27,15 +27,15 @@
   <?php else: ?>
     <div class="ce_text block">
       <?php if (!$this->addBefore): ?>
-      <?= $this->teaser ?>
+      <?= $this->cspInlineStyles($this->teaser) ?>
       <?php endif; ?>
 
       <?php if ($this->addImage): ?>
       <?php $this->insert('image', $this->arrData); ?>
       <?php endif; ?>
 
       <?php if ($this->addBefore): ?>
-      <?= $this->teaser ?>
+      <?= $this->cspInlineStyles($this->teaser) ?>
       <?php endif; ?>
     </div>
   <?php endif; ?>

diff --git a/contao/templates/events/event_list_nature.html5 b/contao/templates/events/event_list_nature.html5
@@ -18,7 +18,7 @@
     <?php endif; ?>
 
     <div class="ce_text block" itemprop="description">
-      <?= $this->teaser ?>
+      <?= $this->cspInlineStyles($this->teaser) ?>
     </div>
 
     <p class="time"><i class="far fa-calendar-alt"></i><time datetime="<?= $this->datetime ?>" itemprop="startDate"><?= $this->date ?><?php if ($this->time):?> <?= $this->time ?><?php endif; ?></time></p>

diff --git a/contao/templates/events/event_teaser_nature.html5 b/contao/templates/events/event_teaser_nature.html5
@@ -26,7 +26,7 @@
       <?php endif; ?>
 
       <div class="ce_text block" itemprop="description">
-        <?= $this->teaser ?>
+        <?= $this->cspInlineStyles($this->teaser) ?>
       </div>
 
       <p class="time"><i class="far fa-calendar-alt"></i><time datetime="<?= $this->datetime ?>" itemprop="startDate"><?= $this->date ?><?php if ($this->time):?> <?= $this->time ?><?php endif; ?></time></p>

diff --git a/contao/templates/forms/form_captcha.html5 b/contao/templates/forms/form_captcha.html5
@@ -1,37 +1,48 @@
 <?php $this->extend('form_row'); ?>
 
+<?php $this->block('label'); ?>
+<?php if ($this->label): ?>
+<label for="ctrl_<?= $this->id ?>"<?php if ($this->class): ?> class="<?= $this->class ?>"<?php endif; ?>>
+<span class="invisible"><?= $this->mandatoryField ?> </span><?= $this->label ?><span class="mandatory">*</span>
+</label>
+<?php endif; ?>
+<?php $this->endblock(); ?>
+
 <?php $this->block('field'); ?>
+<?php if ($this->hasErrors()): ?>
+<p class="error"><?= $this->getErrorAsString() ?></p>
+<?php endif; ?>
 
-  <div class="control">
-  <?php if ($this->label): ?>
-    <label for="ctrl_<?= $this->id ?>" class="label<?php if ($this->class): ?> <?= $this->class ?><?php endif; ?>">
-    <span class="invisible"><?= $this->mandatoryField ?> </span><?= $this->label ?><span class="mandatory">*</span>
-    </label>
-  <?php endif; ?>
-
-  <input type="text" name="<?= $this->name ?>" id="ctrl_<?= $this->id ?>" class="captcha mandatory input<?php if ($this->class): ?> <?= $this->class ?><?php endif; ?>" value="" aria-describedby="captcha_text_<?= $this->id ?>"<?= $this->getAttributes() ?>>
-  <span id="captcha_text_<?= $this->id ?>" class="captcha_text<?php if ($this->class): ?> <?= $this->class ?><?php endif; ?>"><?= $this->getQuestion() ?></span>
-  <input type="hidden" name="<?= $this->name ?>_hash" value="<?= $this->getHash() ?>">
-  </div>
-  <?php if ($this->hasErrors()): ?>
-  <p class="help is-danger"><?= $this->getErrorAsString() ?></p>
-  <?php endif; ?>
-  <?php if (!$this->hasErrors()): ?>
-  <div style="display:none">
-    <label for="ctrl_<?= $this->id ?>_hp">Do not fill in this field</label>
-    <input type="text" name="<?= $this->name ?>_name" id="ctrl_<?= $this->id ?>_hp" value="">
-  </div>
-  <script>
-    var e = document.getElementById('ctrl_<?= $this->id ?>'),
-    p = e.parentNode, f = p.parentNode;
-
-    if ('fieldset' === f.nodeName.toLowerCase() && 1 === f.children.length) {
-    p = f;
-    }
-
-    p.style.display = 'none';
-    e.value = '<?= $this->getSum() ?>';
-  </script>
-  <?php endif ?>
+<input type="text" name="<?= $this->name ?>" id="ctrl_<?= $this->id ?>" class="captcha mandatory<?php if ($this->class): ?> <?= $this->class ?><?php endif; ?>" value="" aria-describedby="captcha_text_<?= $this->id ?>"<?= $this->getAttributes() ?>>
+<span id="captcha_text_<?= $this->id ?>" class="captcha_text<?php if ($this->class): ?> <?= $this->class ?><?php endif; ?>"><?= $this->getQuestion() ?></span>
+<input type="hidden" name="<?= $this->name ?>_hash" value="<?= $this->hasErrors() ? $this->getHash() : '' ?>">
 
-<?php $this->endblock(); ?>
+<?php if (!$this->hasErrors()): ?>
+<div style="<?= $this->cspInlineStyle('display:none') ?>">
+  <label for="ctrl_<?= $this->id ?>_hp">Do not fill in this field</label>
+  <input type="text" name="<?= $this->name ?>_name" id="ctrl_<?= $this->id ?>_hp" value="">
+</div>
+<script<?= $this->attr()->setIfExists('nonce', $this->nonce('script-src')) ?>>
+(function() {
+var e = document.getElementById('ctrl_<?= $this->id ?>'),
+p = e.parentNode, f = p.parentNode;
+
+if (f.classList.contains('widget-captcha') || 'fieldset' === f.nodeName.toLowerCase() && 1 === f.children.length) {
+p = f;
+}
+
+e.required = false;
+p.style.display = 'none';
+
+setTimeout(() => {
+fetch(<?= json_encode($this->getAjaxUrl()) ?>).then(r => r.json()).then(d => {
+e.value = d.sum;
+e.form.elements[<?= json_encode($this->name.'_hash') ?>].value = d.hash;
+document.getElementById('captcha_text_<?= $this->id ?>').textContent = d.question;
+});
+}, 5000);
+})();
+</script>
+<?php endif ?>
+
+<?php $this->endblock(); ?>
diff --git a/contao/templates/news/news_full_nature.html5 b/contao/templates/news/news_full_nature.html5
@@ -15,7 +15,7 @@
     <?= $this->text ?>
   <?php else: ?>
     <div class="content-text block">
-      <?= $this->teaser ?>
+      <?= $this->cspInlineStyles($this->teaser) ?>
     </div>
   <?php endif; ?>
 

diff --git a/contao/templates/news/news_latest_nature_col2.html5 b/contao/templates/news/news_latest_nature_col2.html5
@@ -13,7 +13,7 @@
       <h2><?= $this->linkHeadline ?></h2>
 
       <div class="ce_text block" itemprop="description">
-        <?= $this->teaser ?>
+        <?= $this->cspInlineStyles($this->teaser) ?>
       </div>
 
       <?php if ($this->hasMetaFields): ?>

diff --git a/contao/templates/news/news_latest_nature_col3.html5 b/contao/templates/news/news_latest_nature_col3.html5
@@ -13,7 +13,7 @@
       <h2><?= $this->linkHeadline ?></h2>
 
       <div class="ce_text block" itemprop="description">
-        <?= $this->teaser ?>
+        <?= $this->cspInlineStyles($this->teaser) ?>
       </div>
 
       <?php if ($this->hasMetaFields): ?>

diff --git a/contao/templates/news/news_short_nature.html5 b/contao/templates/news/news_short_nature.html5
@@ -10,7 +10,7 @@
       <h2><?= $this->headline ?></h2>
 
       <div class="ce_text block" itemprop="description">
-        <?= $this->teaser ?>
+        <?= $this->cspInlineStyles($this->teaser) ?>
       </div>
 
       <?php if ($this->hasMetaFields): ?>

diff --git a/contao/templates/news/news_social_feed_extended_nature.html5 b/contao/templates/news/news_social_feed_extended_nature.html5
@@ -29,7 +29,7 @@
     <?php endif; ?>
 
     <div class="ce_text block" itemprop="description">
-      <p><?= preg_replace('#(?:<br\s*/?>\s*?){2,}#', '</p><p>', $this->teaser) ?></p>
+      <p><?= preg_replace('#(?:<br\s*/?>\s*?){2,}#', '</p><p>', $this->cspInlineStyles($this->teaser)) ?></p>
     </div>
 
     <a href="<?= $this->url ?>" target="_blank" class="more" rel="noreferrer noopener">

diff --git a/contao/templates/news/news_social_feed_nature.html5 b/contao/templates/news/news_social_feed_nature.html5
@@ -35,7 +35,7 @@
 
     <a href="<?= $this->url ?>" target="_blank">
       <div class="ce_text block" itemprop="description">
-        <p><?= preg_replace('#(?:<br\s*/?>\s*?){2,}#', '</p><p>', $this->teaser) ?></p>
+        <p><?= preg_replace('#(?:<br\s*/?>\s*?){2,}#', '</p><p>', $this->cspInlineStyles($this->teaser)) ?></p>
       </div>
     </a>
 

diff --git a/public/scss/parts/elements.scss b/public/scss/parts/elements.scss
@@ -1382,6 +1382,12 @@ pre {
       height: 100vh;
       z-index: 10;
 
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+
       @for $i from 1 through 20 {
         &:nth-of-type(#{$i}) {
           z-index: #{$i};

diff --git a/src/Migration/InitialDemoDataMigration.php b/src/Migration/InitialDemoDataMigration.php
@@ -56,11 +56,6 @@ public function shouldRun(): bool
             $this->sqlFile = str_replace('minimal', 'full', $this->sqlFile);
         }
 
-        // Contao 5.1
-        if (isset($schemaManager->listTableColumns('tl_form')['ajax'])) {
-            $this->sqlFile = str_replace('50', '51', $this->sqlFile);
-        }
-
         // check some tables for content
         $count = $this->connection->fetchOne('SELECT COUNT(*) FROM `tl_article`');
         $count += $this->connection->fetchOne('SELECT COUNT(*) FROM `tl_content`');

diff --git a/src/Migration/MigrationHelperTrait.php b/src/Migration/MigrationHelperTrait.php
@@ -31,7 +31,7 @@ trait MigrationHelperTrait
 
     private string $contaoFolder = 'vendor/contao-themes-net/nature-theme-bundle/contao';
     private string $themeFolder = 'naturetheme';
-    private string $sqlFile = 'sql/contao50/minimal.sql';
+    private string $sqlFile = 'sql/contao53/minimal.sql';
 
     private array $minTables = [ // @phpstan-ignore-line
         'tl_article', 'tl_content', 'tl_css_style_selector', 'tl_files', 'tl_form', 'tl_form_field', 'tl_image_size',

diff --git a/src/Module/NatureThemeSetup.php b/src/Module/NatureThemeSetup.php
@@ -22,7 +22,7 @@
 
 class NatureThemeSetup extends BackendModule
 {
-    public const VERSION = '2.3.0';
+    public const VERSION = '2.3.1';
 
     protected $strTemplate = 'be_naturetheme_setup';