Refactored README.md; fixed callbacks cleaning;

Author: DigitalBrainJS

.npmignore

@@ -4,5 +4,5 @@
 /public/
 /test/
 /src/
-/dist/safe-jsonp.spec.js
-gulpfile.js
+gulpfile.js
+.travis.yml

README.md

@@ -7,23 +7,26 @@
 
 A sandboxed JSONP implementation for the browser.
 
+# Why
+
+If for any reason you still have to use JSONP instead of ajax & CORS on a page with sensitive data to fetch data
+from third-party services, you can use this package which makes jsonp requests more secure using a temporary sandboxed
+iframe as a proxy. This could potentially protect from the XSS attack injected in the jsonp response,
+since the sandbox iframe does not have unsafe access to its parent page. At the same time, json data can be sent
+from iframe to the parent document as a simple json string using the window.postMessage feature. 
+The package supports sandbox and non-sandbox mode (like typical jsonp packages), by default
+sandbox mode is preffered, but not required.
+
 # Features
-- optional sandbox mechanism for safer requests to untrusted origins (internally used iframes)
-- support Promise and callback style
+- **optional sandbox mechanism for safer requests to untrusted origins (internally used iframes)**
+- support Promise and callback styles
 - support custom Promise class
 - anti-caching `_rnd` query param
 - support query params in url string and/or options.params property
 - automatically encoding params, converting objects and arrays params to JSON strings  
 
-## Functional diagram
-Sandbox mode: 
-
-![Sandbox functional diagram](https://github.com/DigitalBrainJS/safe-jsonp/raw/master/public/safe-jsonp.png)
-
 ## Try It!
-[Github demo](http://htmlpreview.github.io/?https://github.com/DigitalBrainJS/safe-jsonp/blob/master/public/index.html)
-
-[JSFiddle.net demo](https://jsfiddle.net/DigitalBrain/ugz5qn0r/10/)
+[JSFiddle.net demo](https://jsfiddle.net/DigitalBrain/ugz5qn0r/)
 
 ## Installation
 
@@ -33,7 +36,31 @@ Install for node.js or browserify using `npm`:
 $ npm install safe-jsonp --save
 ```
 
-## Direct usage in the browser
+## Basic usage example
+Promise style:
+```javascript
+import JSONP from "safe-jsonp";
+
+JSONP('http://api.github.com/users/DigitalBrainJS')
+    .then( data => console.log('JSONP data object:', data))
+    .catch( err => console.warn('Oops...we got an error', err.message))
+```
+
+
+Callback style:
+```javascript
+import JSONP from "safe-jsonp";
+
+JSONP('http://api.github.com/users/DigitalBrainJS', (err, data) => {
+        if(err){
+            console.warn('Oops...we got an error', err.message)
+        }else{
+            console.log('JSON data:', data)
+        }    
+    })
+```
+
+## CDN
 Use unpkg.com cdn to get link to script/module from the package:
 - UMD ES5 version (~15kB)
 ```html
@@ -44,105 +71,54 @@ Use unpkg.com cdn to get link to script/module from the package:
 <script src="https://unpkg.com/safe-jsonp/dist/safe-jsonp.umd.min.js"></script>
 ```
 - ESM ES2015 module (~14kB)
-```html
+```javascript
 import JSONP from "https://unpkg.com/safe-jsonp/dist/safe-jsonp.esm.js"
 ```
-- minified ESM ES2015 module (~7kB)
-```html
-import JSONP from "https://unpkg.com/safe-jsonp/dist/safe-jsonp.esm.min.js"
-```
-
-
-## API
-
-### JSONP(url: String, [options: Object]): \<Promise>
-### JSONP(url: String, [options: Object], cb: Function): \<JSONP>
-
-  - `url: String` url to fetch
-  - `[options: Object]`
-      - `sandbox: Boolean|Undefined= undefined` sets sandbox mode for query handling to untrusted origins. 
-      Default `undefined` value means prefer sandboxed mode, but allow non-sandboxed query if the environment doesn't 
-      support it. In sandboxed mode all requests will be done in invisible iframe proxy, created temporally for each 
-      origin 
-      - `idleTimeout: Number= 15000` idle timeout for each sandbox in ms
-      - `params: Object` Object with query params to combine with a URL string
-      - `timeout: Number= 15000` max query pending time in ms. Default: `15000` (15 seconds)
-      - `preventCache: Boolean= true` force disable cache by adding timestamp to a query param `_rnd`
-      - `cbParam: String= 'callback'` name of the query param used by backend to get the name of the JSONP callback
-      - `Promise: Function` Promise class that be used instead of native (if environment supports it)  
-      - `abortable: Boolean` enables ability to abort for Promise mode. If this option is set to true, 
-      an additional property called abort will be created in options object. 
-      This allows to get the abort function via shared options object.  
-- `[cb: Function(err: ?Error, [data: Object])]` callback function, called when jsonp query is complete 
-(with success or error). 
-If this argument is omitted, the function returns a Promise, otherwise, a JSONP instance will be returned.
-
-Returns a promise or JSON instance depending on the presence of a callback argument
-
-### JSONP class instance
-*instance methods:*
-  - `abort()` aborts the jsonp query with `Error: aborted`, handled by callback or Promise chain.
+## Functional diagram
+Sandbox mode: 
 
-*static methods:*
-  - `parseURL(url: String): URL|Object` parse URL into components
-  - `parseParams(url: String): Object` parse URL params string eg. `a=1&b=2` to params object `{a:1, b:2}`
-  - `encodeParams(params: Object): String` encode params object to string
-  
-## Usage example
-Promise style:
-```javascript
-JSONP('http://api.github.com/users/DigitalBrainJS')
-    .then( data => console.log('JSONP data object:', data), err => console.warn('Oops...we got an error', err.message))
-```
+![Sandbox functional diagram](https://github.com/DigitalBrainJS/safe-jsonp/raw/master/public/safe-jsonp.png)
 
+## More examples
+##### additional options:
 ```javascript
-//in the context of the ES2015 async function
-
 const Promise = require("bluebird");
 
+//...async function
+
 const data= await JSONP('http://api.github.com/users/DigitalBrainJS?name=bla&age=23', {
     params: {
         foo: 1,
-        bar: [1,2,3]// We can pass objects and arrays as a param value
+        bar: [1,2,3] // We can pass objects and arrays as a param value
     },
 
     timeout: 60000, //60 seconds
     preventCache: true,
     cbParam: 'callback',
-    Promise
+    Promise //custom Promise class
 })
 
 //will make request like https://api.github.com/users/DigitalBrainJS?name=bla&age=23&foo=1&bar=%5B1%2C2%2C3%5D&callback=_jsonpvqz.cb0
 //callback param is randomly generated to avoid collisions
 ```   
 
-Callback style:
-```javascript
-JSONP('http://api.github.com/users/DigitalBrainJS', (err, data) => {
-        if(err){
-            console.warn('Oops...we got an error', err.message)
-        }else{
-            console.log('JSON data:', data)
-        }    
-    })
-```
 
-Accept sandbox mode only
+##### Force sandbox mode:
 ```javascript
 JSONP('http://api.github.com/users/DigitalBrainJS', {sandbox: true})
     .then(data=>console.log(data), err=>console.warn(err))
-
+    //will fail if the browser doesn't support sandbox mode or data/blob uri for iframe
 ```
 
-Aborting the request:
+##### Aborting the request:
 ```javascript
 const jsonp= JSONP('http://api.github.com/users/DigitalBrainJS', (err, data) => {
         console.log(err) //Error: aborted  
     });
 
 jsonp.abort();
 ```
-Or
+Or when using Promise:
 ```javascript
 const sharedOptions= {abortable: true};
 
@@ -152,6 +128,41 @@ JSONP('http://api.github.com/users/DigitalBrainJS', sharedOptions)
 sharedOptions.abort();
 ```
 
+## API
+
+### JSONP(url: String, [options: Object]): \<Promise>
+### JSONP(url: String, [options: Object], cb: Function): \<JSONP>
+
+  - `url: String` url to fetch
+  - `[options: Object]`
+      - `sandbox: Boolean|Undefined= undefined` sets sandbox mode for query handling to untrusted origins. 
+      Default `undefined` value means prefer sandboxed mode, but allow non-sandboxed query if the environment doesn't 
+      support it. In sandboxed mode all requests will be done in invisible iframe proxy, created temporally for each 
+      origin 
+      - `idleTimeout: Number= 15000` idle timeout for each sandbox in ms
+      - `params: Object` Object with query params to combine with a URL string
+      - `timeout: Number= 15000` max query pending time in ms. Default: `15000` (15 seconds)
+      - `preventCache: Boolean= true` force disable cache by adding timestamp to a query param `_rnd`
+      - `cbParam: String= 'callback'` name of the query param used by backend to get the name of the JSONP callback
+      - `Promise: Function` Promise class that be used instead of native (if environment supports it)  
+      - `abortable: Boolean` enables ability to abort for Promise mode. If this option is set to true, 
+      an additional property called abort will be created in options object. 
+      This allows to get the abort function via shared options object.  
+- `[cb: Function(err: ?Error, [data: Object])]` callback function, called when jsonp query is complete 
+(with success or error). 
+If this argument is omitted, the function returns a Promise, otherwise, a JSONP instance will be returned.
+
+Returns a promise or JSON instance depending on the presence of a callback argument
+
+### JSONP class instance
+*instance methods:*
+  - `abort()` aborts the jsonp query with `Error: aborted`, handled by callback or Promise chain.
+
+*static methods:*
+  - `parseURL(url: String): URL|Object` parse URL into components
+  - `parseParams(url: String): Object` parse URL params string eg. `a=1&b=2` to params object `{a:1, b:2}`
+  - `encodeParams(params: Object): String` encode params object to string
+  
 ## License
 
 The MIT License (MIT)

esm.js

@@ -0,0 +1 @@
+export {default} from "./dist/safe-jsonp.esm"

gulpfile.js

@@ -30,9 +30,9 @@ function createBuildTask(entryFile, buildOptions) {
             toES5 = false,
             outFile = `${name}.${format}${ext}`,
             taskTargetName = outFile,
-            minify = false,
             include = "node_modules/**",
-            exclude
+            exclude,
+            minify
         } = buildOptions || {};
 
 
@@ -72,7 +72,7 @@ function createBuildTask(entryFile, buildOptions) {
 
                 noSource: true
             }) : noop())
-            .pipe(minify ? gulp.dest(destPath) : noop())
+            .pipe(minify ? gulp.dest(destPath) : noop());
     });
 
     return taskName;
@@ -91,11 +91,12 @@ gulp.task("webserver", function () {
 });
 
 const clientBuildTask = createBuildTask(clientEntryFile, {exportName: "JSONP", toES5: true, minify: true});
-const clientBuildTaskES = createBuildTask(clientEntryFile, {format: "esm", minify: true});
+const clientBuildTaskES = createBuildTask(clientEntryFile, {format: "esm"});
 const clientBuildTests = createBuildTask("test/safe-jsonp.spec.js", {
     taskTargetName: "test",
     format: "cjs",
-    toES5: true
+    toES5: true,
+    destPath: "./test/"
 });
 
 gulp.task("build", function (done) {

package.json

@@ -6,6 +6,8 @@
   "main": "index.js",
   "browser": "./dist/safe-jsonp.umd.js",
   "module": "./dist/safe-jsonp.esm.js",
+  "unpkg": "./dist/safe-jsonp.umd.min.js",
+  "jsnext:main": "./dist/safe-jsonp.esm.js",
   "scripts": {
     "test": "npm run build && mocha-phantomjs test/test.html",
     "build": "shx rm -rf dist && gulp build",
@@ -22,6 +24,11 @@
     "type": "git",
     "url": "https://github.com/DigitalBrainJS/safe-jsonp.git"
   },
+  "files": [
+    "index.js",
+    "esm.js",
+    "./dist/"
+  ],
   "keywords": [
     "jsonp",
     "json",
@@ -38,6 +45,11 @@
     "script",
     "cors"
   ],
+  "reflinks": [
+    "jsonp",
+    "json",
+    "fetch"
+  ],
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
   },

src/lib/fetch.js

@@ -1,4 +1,4 @@
-import {encodeParams, randomStr, mixin} from "./utils";
+import {encodeParams, randomStr, mixin, generateUniquePropName} from "./utils";
 
 export default function fetch(url, options, callback) {
     let wasCalled, isComplete, script, timer;
@@ -20,6 +20,8 @@ export default function fetch(url, options, callback) {
         publicCallback = function (data) {
             const {length} = arguments;
 
+            delete register[cbName];
+
             wasCalled = true;
             if (!length) {
                 done("data argument is missing");
@@ -43,11 +45,7 @@ export default function fetch(url, options, callback) {
         cbParam = "callback";
     }
 
-    let cbName, i = 0;
-
-    while ((cbName = `cb${i.toString(36)}`) in register) {
-        i++;
-    }
+    let cbName = "c" + generateUniquePropName(register, (i) => randomStr(i / 10 + 2));
 
     register[cbName] = publicCallback;
 

src/lib/sandbox.js

@@ -27,7 +27,8 @@ export default function Sandbox(options) {
             proxy,
             mixin,
             encodeParams,
-            randomStr
+            randomStr,
+            generateUniquePropName
         };
 
     let iframe = document.createElement("iframe"),

test/test.html

@@ -19,7 +19,7 @@
 </script>
 <script src="../dist/safe-jsonp.umd.js"></script>
 <!--<script src="safe-jsonp.spec.js"></script>-->
-<script src="../dist/safe-jsonp.spec.cjs.js"></script>
+<script src="../test/safe-jsonp.spec.cjs.js"></script>
 <script>
     mocha.run();
 </script>