✨ support for nonce in style element

Signed-off-by: Bruno Meilick <[email protected]>

classes/Bnomei/Srcset.php

@@ -254,7 +254,11 @@ public function applyRatio(string $text, array $data = []): string
         );
         $ratio = $srcfile->ratio();
 
-        $text = '<style>.'.A::get($data, 'ratio').'[data-ratio="'.$ratio.'"]{padding-bottom:'.$ratio.'%;}</style>' . $text;
+        $nonceAttr = '';
+        if ($nonce = $this->option('nonce')) {
+            $nonceAttr = ' nonce="'.$nonce.'"';
+        }
+        $text = '<style'.$nonceAttr.'>.'.A::get($data, 'ratio').'[data-ratio="'.$ratio.'"]{padding-bottom:'.$ratio.'%;}</style>' . $text;
 
         if (A::get($data, 'caption')) {
             $text = str_replace(
@@ -286,6 +290,11 @@ public function html(): string
      */
     public static function defaultOptions(): array
     {
+        $nonce = option('bnomei.srcset.nonce');
+        if (is_callable($nonce)) {
+            $nonce = $nonce();
+        }
+
         return [
             'debug' => option('debug'),
             'lazy' => option('bnomei.srcset.lazy'),
@@ -294,6 +303,7 @@ public static function defaultOptions(): array
             'figure' => option('bnomei.srcset.figure') === true,
             'ratio' => option('bnomei.srcset.ratio'),
             'quality' => intval(option('thumbs.quality', 80)),
+            'nonce' => $nonce,
         ];
     }
 }

composer.json

@@ -1,7 +1,7 @@
 {
   "name": "bnomei/kirby3-srcset",
   "type": "kirby-plugin",
-  "version": "3.1.5",
+  "version": "3.2.0",
   "license": "MIT",
   "description": "Kirby 3 Plugin for creating lazyloading image srcset",
   "authors": [

index.php

@@ -9,6 +9,13 @@
         'autosizes' => 'auto',
         'figure' => true,
         'ratio' => 'lazysrcset-ratio',
+        'nonce' => function() {
+            $nonce = site()->nonce();
+            if (is_a($nonce, \Kirby\Cms\Field::class)) {
+                $nonce = $nonce->isNotEmpty() ? $nonce->value() : null;
+            }
+            return $nonce;
+        },
     ],
     'snippets' => [
         'editor/srcset' => __DIR__ . '/snippets/srcset.php',

readme.md

@@ -220,6 +220,14 @@ Each figure element will be prefixed with a style element defining the ratio. Fo
 <style>.lazysrcset-ratio[data-ratio="56.25"]{padding-bottom:56.25%;}</style><figure><div data-ratio="56.25" class="lazysrcset-ratio"><!--- image tag with srcset --></div><figcaption>with caption</figcaption></figure>
 ```
 
+**with nonce**
+
+You can set a custom nonce using the options or install the [security headers plugin](https://github.com/bnomei/kirby3-security-headers). 
+```html
+<style nonce="A-NONCE-HERE">...
+```
+
+
 ## Settings
 
 | bnomei.srcset.            | Default        | Description               |            
@@ -229,6 +237,7 @@ Each figure element will be prefixed with a style element defining the ratio. Fo
 | autosizes | `auto` | bool or string. related to `data-sizes` attribute |
 | figure | `true` | bool. wrap image in figure or not |
 | ratio | `lazysrcset-ratio` | bool or string. adds data-ratio to parent of `img` |
+| nonce | `null` | null, string or callback. default nonce for style element |
 
  
 ## FAQ

tests/SrcsetTest.php

@@ -39,6 +39,39 @@ public function testOption()
         $this->assertEquals('test2000.png', $srcset->option('value'));
     }
 
+    public function testNonce()
+    {
+        // csp plugin or callback could provide this
+        $srcset = new Srcset([
+            'value' => 'test2000.png',
+            'parent' => page('home'),
+            'nonce' => '',
+        ]);
+        $this->assertRegExp(
+            '/^<style>/',
+            $srcset->html()
+        );
+        $srcset = new Srcset([
+            'value' => 'test2000.png',
+            'parent' => page('home'),
+            'nonce' => null,
+        ]);
+        $this->assertRegExp(
+            '/^<style>/',
+            $srcset->html()
+        );
+        $srcset = new Srcset([
+            'value' => 'test2000.png',
+            'parent' => page('home'),
+            'nonce' => '@NONCE@',
+        ]);
+        $this->assertRegExp(
+            '/^<style nonce="@NONCE@">/',
+            $srcset->html()
+        );
+
+    }
+
     public function testImageFromData()
     {
         $srcset = new Srcset([