Add nonce option (CSP)

README.md

@@ -313,6 +313,7 @@ Option C: Import `tns` directly start from v2.8.2
 | `startIndex` | positive integer | Default: 0. <br> The initial `index` of the slider. |
 | `onInit` | Function \| false | Default: false. <br> Callback to be run on initialization. |
 | `useLocalStorage` | Boolean | Default: true. <br> Save browser capability variables to [localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) and without detecting them everytime the slider runs if set to `true`. |
+| `nonce`| String / false | Default: false. <br> Optional Nonce attribute for inline style tag to allow slider usage without `unsafe-inline Content Security Policy source. |
 
 NOTE:
 Prior to v2.0.2, options "container", "controlsContainer", "navContainer" and "autoplayButton" still need to be DOM elements.

src/helpers/createStyleSheet.js

@@ -1,5 +1,5 @@
 // create and append style sheet
-export function createStyleSheet (media) {
+export function createStyleSheet (media, nonce) {
   // Create the <style> tag
   var style = document.createElement("style");
   // style.setAttribute("type", "text/css");
@@ -9,6 +9,9 @@ export function createStyleSheet (media) {
   // style.setAttribute("media", "only screen and (max-width : 1024px)")
   if (media) { style.setAttribute("media", media); }
 
+  // Add nonce attribute for Content Security Policy
+  if (nonce) { style.setAttribute("nonce", nonce); }
+
   // WebKit hack :(
   // style.appendChild(document.createTextNode(""));
 

src/tiny-slider.d.ts

@@ -194,13 +194,13 @@ export interface TinySliderSettings extends CommonOptions {
      */
     nextButton?: HTMLElement | string | false;
     /**
-     * Customized previous buttons. 
+     * Customized previous buttons.
      * This option will be ignored if controlsContainer is a Node element or a CSS selector.
      * @defaultValue false
      */
     prevButton?: HTMLElement | string | false;
     /**
-     * Customized next buttons. 
+     * Customized next buttons.
      * This option will be ignored if controlsContainer is a Node element or a CSS selector.
      * @defaultValue false
      */
@@ -237,6 +237,11 @@ export interface TinySliderSettings extends CommonOptions {
      * @defaultValue true
      */
     freezable?: boolean;
+    /**
+    * Nonce attribute for inline style tag to allow slider usage without unsafe-inline CSP Option
+    * @defaultValue false
+    */
+    nonce?: string | false;
     /**
      * Callback to be run on initialization.
      * @defaultValue false

src/tiny-slider.js

@@ -107,7 +107,8 @@ export var tns = function(options) {
     preventScrollOnTouch: false,
     freezable: true,
     onInit: false,
-    useLocalStorage: true
+    useLocalStorage: true,
+    nonce: false
   }, options || {});
 
   var doc = document,
@@ -284,7 +285,7 @@ export var tns = function(options) {
       autoplayText = getOption('autoplayText'),
       autoplayHoverPause = getOption('autoplayHoverPause'),
       autoplayResetOnVisibility = getOption('autoplayResetOnVisibility'),
-      sheet = createStyleSheet(),
+      sheet = createStyleSheet(null, getOption('nonce')),
       lazyload = options.lazyload,
       lazyloadSelector = options.lazyloadSelector,
       slidePositions, // collection of slide positions

src/tiny-slider.module.js

@@ -107,7 +107,8 @@ export var tns = function(options) {
     preventScrollOnTouch: false,
     freezable: true,
     onInit: false,
-    useLocalStorage: true
+    useLocalStorage: true,
+    nonce: false
   }, options || {});
 
   var doc = document,
@@ -284,7 +285,7 @@ export var tns = function(options) {
       autoplayText = getOption('autoplayText'),
       autoplayHoverPause = getOption('autoplayHoverPause'),
       autoplayResetOnVisibility = getOption('autoplayResetOnVisibility'),
-      sheet = createStyleSheet(),
+      sheet = createStyleSheet(null, getOption('nonce')),
       lazyload = options.lazyload,
       lazyloadSelector = options.lazyloadSelector,
       slidePositions, // collection of slide positions