Fix cross-site scripting issues and version bump to 0.1.1

Author: sbstnmsch-zz

README.md

@@ -12,28 +12,29 @@ The _accept-terms_ plugin is only loaded for the checkout contact information st
 
 To enable a plugin add this code to your _Google Analytics Additional Scripts_ section in Shopify's Admin / Online Store / Preferences.
 
-```
-  (function() {
+```javascript
+fetch('//cdn.jsdelivr.net/gh/nerdsofalltrades/[email protected]/dist/shopify-plugin-loader.min.js').then(function(
+  result
+) {
+  result.text().then(function(script) {
     var plugin = document.createElement('script');
-    plugin.src = '//cdn.jsdelivr.net/gh/nerdsofalltrades/[email protected]/dist/shopify-plugin-loader.min.js';
+    plugin.innerHTML = script;
     document.body.appendChild(plugin);
 
-    plugin.onload = function () {
-      var ctx = window.ShopifyPlugins;
-
-      // Load plugins here
+    // Load plugins here
+    var ctx = window.ShopifyPlugins;
 
-      // Load the accept-terms plugin only in checkout
-      // contact information step
-      ctx.checkout.contactInformation.load('accept-terms');
+    // Load the accept-terms plugin only in checkout
+    // contact information step
+    ctx.checkout.contactInformation.load('accept-terms');
 
-      // Load the progress-bar plugin for all steps
-      // in checkout
-      ctx.checkout.all.load('progress-bar');
+    // Load the progress-bar plugin for all steps
+    // in checkout
+    ctx.checkout.all.load('progress-bar');
 
-      // Load other plugins here...
-    }
-  })();
+    // Load other plugins...
+  });
+});
 ```
 
 ## Plugins
@@ -45,26 +46,26 @@ Checkbox in Shopify's contact information checkout step.
 
 ![Accept terms plugin in action](examples/accept-terms/accept-terms.png)
 
-Add this code to your `plugin.onload` function to enable it.
+Add this code to enable it.
 
-```
+```javascript
 ctx.checkout.contactInformation.load('accept-terms');
 ```
 
 Without options standard english texts are displayed and the url of your terms
 is expected to be found at `/pages/terms`. To change that just pass options
 and set it up as you like.
 
-```
+```javascript
 ctx.checkout.contactInformation.load('accept-terms', {
   // The checkbox label
-  label: "I have read and I agree to the",
+  label: 'I have read and I agree to the',
   // The label of the terms link
-  termsName: "terms",
+  termsName: 'terms',
   // The url to your terms
-  termsURL: "/pages/terms",
+  termsURL: '/pages/terms',
   // Message displayed when customer tries to go on without agreeing
-  errorMessage: "Please agree to our terms before your purchase"
+  errorMessage: 'Please agree to our terms before your purchase'
 });
 ```
 
@@ -77,15 +78,15 @@ configuration is needed.
 
 ![Progress bar plugin in action](examples/progress-bar/progress-bar.png)
 
-Add this code to your `plugin.onload` function to enable it.
+Add this code to enable it.
 
-```
+```javascript
 ctx.checkout.all.load('progress-bar');
 ```
 
 ## Development
 
-```
+```shell
 $ npm install
 $ npm run dev
 ```

dist/accept-terms.html

@@ -47,20 +47,21 @@ <h2>Shipping address</h2>
   </script>
   <script>
 
-    var plugin = document.createElement('script');
-    plugin.src = 'shopify-plugin-loader.min.js';
-
-    document.body.appendChild(plugin);
-
-    plugin.onload = function () {
-      var ctx = window.ShopifyPlugins;
-      ctx.checkout.contactInformation.load('accept-terms', {
-        label: "I have read and I agree to the",
-        termsName: "terms",
-        termsURL: "/pages/terms",
-        errorMessage: "Please agree to our terms before your purchase"
-      });
-    }
+    fetch('shopify-plugin-loader.min.js').then(
+      function (result) {
+        result.text().then(function (script) {
+          var plugin = document.createElement('script');
+          plugin.innerHTML = script;
+          document.body.appendChild(plugin);
+          window.ShopifyPlugins.checkout.contactInformation.load('accept-terms', {
+            label: "I have read and I agree to the",
+            termsName: "terms",
+            termsURL: "/pages/terms",
+            errorMessage: "Please agree to our terms before your purchase"
+          });
+        })
+      }
+    );
   </script>
 </body>
 

dist/progress-bar.html

@@ -69,16 +69,16 @@ <h1>Progress Bar</h1>
     }
   </script>
   <script>
-
-    var plugin = document.createElement('script');
-    plugin.src = 'shopify-plugin-loader.min.js';
-
-    document.body.appendChild(plugin);
-
-    plugin.onload = function () {
-      var ctx = window.ShopifyPlugins;
-      ctx.checkout.all.load('progress-bar');
-    }
+    fetch('shopify-plugin-loader.min.js').then(
+      function (result) {
+        result.text().then(function (script) {
+          var plugin = document.createElement('script');
+          plugin.innerHTML = script;
+          document.body.appendChild(plugin);
+          window.ShopifyPlugins.checkout.all.load('progress-bar');
+        })
+      }
+    );
   </script>
 </body>
 

dist/shopify-plugin-loader.min.js

@@ -47,20 +47,21 @@ <h2>Shipping address</h2>
   </script>
   <script>
 
-    var plugin = document.createElement('script');
-    plugin.src = 'shopify-plugin-loader.min.js';
-
-    document.body.appendChild(plugin);
-
-    plugin.onload = function () {
-      var ctx = window.ShopifyPlugins;
-      ctx.checkout.contactInformation.load('accept-terms', {
-        label: "I have read and I agree to the",
-        termsName: "terms",
-        termsURL: "/pages/terms",
-        errorMessage: "Please agree to our terms before your purchase"
-      });
-    }
+    fetch('shopify-plugin-loader.min.js').then(
+      function (result) {
+        result.text().then(function (script) {
+          var plugin = document.createElement('script');
+          plugin.innerHTML = script;
+          document.body.appendChild(plugin);
+          window.ShopifyPlugins.checkout.contactInformation.load('accept-terms', {
+            label: "I have read and I agree to the",
+            termsName: "terms",
+            termsURL: "/pages/terms",
+            errorMessage: "Please agree to our terms before your purchase"
+          });
+        })
+      }
+    );
   </script>
 </body>
 

examples/accept-terms/accept-terms.html

@@ -69,16 +69,16 @@ <h1>Progress Bar</h1>
     }
   </script>
   <script>
-
-    var plugin = document.createElement('script');
-    plugin.src = 'shopify-plugin-loader.min.js';
-
-    document.body.appendChild(plugin);
-
-    plugin.onload = function () {
-      var ctx = window.ShopifyPlugins;
-      ctx.checkout.all.load('progress-bar');
-    }
+    fetch('shopify-plugin-loader.min.js').then(
+      function (result) {
+        result.text().then(function (script) {
+          var plugin = document.createElement('script');
+          plugin.innerHTML = script;
+          document.body.appendChild(plugin);
+          window.ShopifyPlugins.checkout.all.load('progress-bar');
+        })
+      }
+    );
   </script>
 </body>
 

examples/progress-bar/progress-bar.html

@@ -1,6 +1,6 @@
 {
   "name": "shopify-plugins",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Add features to your Shopify storefront and checkout with lightweight and easily integrateable plugins.",
   "main": "src/loader.js",
   "scripts": {

package.json

@@ -1,12 +1,18 @@
 class Loader {
   static load(plugin, options) {
-    const script = document.createElement('script');
-    script.src = `shopify-plugin-${plugin}.min.js`;
-    script.onload = function() {
-      window.ShopifyPlugins.plugins[plugin](options);
-    };
+    const origin =
+      process.env.NODE_ENV === 'production'
+        ? `//cdn.jsdelivr.net/gh/nerdsofalltrades/shopify-plugins@${process.env.VERSION}/dist/`
+        : '';
     process.env.NODE_ENV === 'development' && console.log(`Lazy-Loading ${plugin} plugin...`);
-    document.body.appendChild(script);
+    fetch(`${origin}shopify-plugin-${plugin}.min.js`).then(result => {
+      result.text().then(script => {
+        const code = document.createElement('script');
+        code.innerHTML = script;
+        document.body.appendChild(code);
+        window.ShopifyPlugins.plugins[plugin](options);
+      });
+    });
   }
 }