Added nonce attribute support to be used with CSP.

ernaniaz · Feb 19, 2024 · 6e0dd19 · 6e0dd19
1 parent 3611c62
commit 6e0dd19
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 6 deletions.
diff --git a/README.md b/README.md
@@ -20,7 +20,7 @@ Basic Usage
 ```javascript
 $.loader (
 {
-  // Add array with JavaScript file list to be loaded. Structure must has 'name', 'src' and 'dep' informations.
+  // Add array with JavaScript file list to be loaded. Structure must has 'name', 'src' and 'dep' informations. Optional attribute 'nonce' could be used.
   js: [
         {
           name: 'main-javascript',
@@ -56,6 +56,8 @@ $.loader (
            dep: []
          }
        ],
+  // Nonce value (to be used with CSP) to be used in all objects (if an object has a nonce, it will superseed global nonce). Default is empty (doesn't add the variable).
+  nonce: '',
   // Should permit or not the use of cache. If false, will be added ?_(TIMESTAMP NUMBER) to URL, to avoid browser cache.
   cache: false,
   // Number of retries in case of failure. 0 will disable retry.
@@ -132,6 +134,9 @@ v1.5 - Released Feb/04/2019:
 v1.6 - Released Dec/21/2021:
 * Added loaded sequence order debugging feature.
 
+v1.7 - Released Feb/16/2024:
+* Added nonce variable (to be used with CSP pages)
+
 Note: The release date was original date I wrote and versioned this script. I just published it now with MIT license!
 
 License

diff --git a/jquery.loader.js b/jquery.loader.js
@@ -1,10 +1,10 @@
 /**
- *       jQuery Loader Plugin v1.5
+ *       jQuery Loader Plugin v1.7
  * by Ernani Azevedo <ernaniaz@gmail.com>
  *
  * @name        jQuery Loader
  * @description Loader is a jQuery plugin that loads JS and CSS with dependencies.
- * @version     1.6
+ * @version     1.7
  * @requires    jQuery 1.8.0 or newer (not testes with older versions, probably works)
  * @author      Ernani Azevedo <ernaniaz@gmail.com>
  * @license     MIT
@@ -43,6 +43,9 @@
  *
  * v1.6 - Released Dec/21/2021:
  * - Added loaded sequence order debugging feature
+ *
+ * v1.7 - Released Feb/16/2024:
+ * - Added nonce variable (to be used with CSP pages)
  */
 
 ;( function ( $)
@@ -64,6 +67,10 @@
     {
       $.loader.cache = options.cache;
     }
+    if ( typeof ( options.nonce) == 'string')
+    {
+      $.loader.nonce = options.nonce;
+    }
     if ( typeof ( options.retryLimit) == 'integer')
     {
       $.loader.retryLimit = options.retryLimit;
@@ -286,6 +293,15 @@
                      };
     script.src = $.loader.data[name].src + ( $.loader.data[name].cache == true ? '?_=' + new Date ().getTime () : '');
     script.id = name;
+    if ( $.loader.data[name].nonce)
+    {
+      script.nonce = $.loader.nonce;
+    } else {
+      if ( $.loader.nonce)
+      {
+        script.nonce = $.loader.nonce;
+      }
+    }
     document.body.appendChild ( script);
   };
 
@@ -317,8 +333,17 @@
                    {
                      iecss.class = $.loader.data[name].class;
                    }
+                   if ( $.loader.data[name].nonce)
+                   {
+                     iecss.nonce = $.loader.data[name].nonce;
+                   } else {
+                     if ( $.loader.nonce)
+                     {
+                       iecss.nonce = $.loader.nonce;
+                     }
+                   }
                  } else {
-                   $('<link rel="stylesheet" type="text/css" media="' + $.loader.data[name].media + '" href="' + $.loader.data[name].src + '"' + ( $.loader.data[name].id != '' ? ' id="' + $.loader.data[name].id + '"' : '') + ( $.loader.data[name].class != '' ? ' class="' + $.loader.data[name].class + '"' : '') + ' />').appendTo ( 'head');
+                   $('<link rel="stylesheet" type="text/css" media="' + $.loader.data[name].media + '" href="' + $.loader.data[name].src + '"' + ( $.loader.data[name].id != '' ? ' id="' + $.loader.data[name].id + '"' : '') + ( $.loader.data[name].class != '' ? ' class="' + $.loader.data[name].class + '"' : '') + ( $.loader.data[name].nonce != '' ? ' nonce="' + $.loader.data[name].nonce + '"' : '') + ( $.loader.data[name].nonce == '' && $.loader.nonce != '' ? ' nonce="' + $.loader.nonce + '"' : '') + ' />').appendTo ( 'head');
                  }
                  $.loader.data[name].status = 'loaded';
                  $.loader.order.css.push ( name);

diff --git a/jquery.loader.min.js b/jquery.loader.min.js
@@ -6,6 +6,8 @@ if(typeof(options.css)!='object')
 {options.css=[];}
 if(typeof(options.cache)=='boolean')
 {$.loader.cache=options.cache;}
+if(typeof(options.nonce)=='string')
+{$.loader.nonce=options.nonce;}
 if(typeof(options.retryLimit)=='integer')
 {$.loader.retryLimit=options.retryLimit;}
 if(typeof(options.timeout)=='integer')
@@ -68,13 +70,19 @@ $.loader.data[name].status='loading';$.loader.data[name].loaded=true;$.loader.da
 {$.loader.data[name].try++;if($.loader.data[name].try>$.loader.retryLimit)
 {script.onerror('max retry reached!');}else{$('#'+name).remove();$.loader.loadjs(name);}}}}};script.onerror=function(textStatus)
 {if($.loader.data[name].status=='loading')
-{$.loader.data[name].status='failed'+(typeof textStatus=='string'&&textStatus!=''?': '+textStatus:'');console.log('Loader error on '+name+' <'+$.loader.data[name].src+'>'+(typeof textStatus=='string'&&textStatus!=''?': '+textStatus:''));$.loader.onfail(name);$.loader.onupdate(name);$.loader.refresh();}};script.src=$.loader.data[name].src+($.loader.data[name].cache==true?'?_='+new Date().getTime():'');script.id=name;document.body.appendChild(script);};$.loader.loadcss=function(name)
+{$.loader.data[name].status='failed'+(typeof textStatus=='string'&&textStatus!=''?': '+textStatus:'');console.log('Loader error on '+name+' <'+$.loader.data[name].src+'>'+(typeof textStatus=='string'&&textStatus!=''?': '+textStatus:''));$.loader.onfail(name);$.loader.onupdate(name);$.loader.refresh();}};script.src=$.loader.data[name].src+($.loader.data[name].cache==true?'?_='+new Date().getTime():'');script.id=name;if($.loader.data[name].nonce)
+{script.nonce=$.loader.nonce;}else{if($.loader.nonce)
+{script.nonce=$.loader.nonce;}}
+document.body.appendChild(script);};$.loader.loadcss=function(name)
 {$.loader.data[name].status='loading';$.loader.data[name].loaded=true;$.ajax({type:'GET',url:$.loader.data[name].src,dataType:'text',timeout:$.loader.timeout,tryCount:0,retryLimit:$.loader.retryLimit,cache:$.loader.data[name].cache,success:function(script,textStatus)
 {if(document.createStyleSheet)
 {iecss=document.createStyleSheet($.loader.data[name].src);iecss.media=$.loader.data[name].media;if($.loader.data[name].id!='')
 {iecss.id=$.loader.data[name].id;}
 if($.loader.data[name].class!='')
-{iecss.class=$.loader.data[name].class;}}else{$('<link rel="stylesheet" type="text/css" media="'+$.loader.data[name].media+'" href="'+$.loader.data[name].src+'"'+($.loader.data[name].id!=''?' id="'+$.loader.data[name].id+'"':'')+($.loader.data[name].class!=''?' class="'+$.loader.data[name].class+'"':'')+' />').appendTo('head');}
+{iecss.class=$.loader.data[name].class;}
+if($.loader.data[name].nonce)
+{iecss.nonce=$.loader.data[name].nonce;}else{if($.loader.nonce)
+{iecss.nonce=$.loader.nonce;}}}else{$('<link rel="stylesheet" type="text/css" media="'+$.loader.data[name].media+'" href="'+$.loader.data[name].src+'"'+($.loader.data[name].id!=''?' id="'+$.loader.data[name].id+'"':'')+($.loader.data[name].class!=''?' class="'+$.loader.data[name].class+'"':'')+($.loader.data[name].nonce!=''?' nonce="'+$.loader.data[name].nonce+'"':'')+($.loader.data[name].nonce==''&&$.loader.nonce!=''?' nonce="'+$.loader.nonce+'"':'')+' />').appendTo('head');}
 $.loader.data[name].status='loaded';$.loader.order.css.push(name);$.loader.onsuccess(name);$.loader.onupdate(name);$.loader.refresh();},error:function(jqxhr,textStatus,errorThrown)
 {if(textStatus=='timeout')
 {this.tryCount++;if(this.tryCount<=this.retryLimit)