@apollographql/graphql-playground-html - npm Package Compare versions

Comparing version 1.6.24 to 1.6.25

dist/index.d.ts

@@ -1,1 +0,1 @@
-export { renderPlaygroundPage, MiddlewareOptions, RenderPageOptions } from './render-playground-page';
+export { renderPlaygroundPage, MiddlewareOptions, RenderPageOptions, } from './render-playground-page';

dist/index.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var render_playground_page_1 = require("./render-playground-page");
-exports.renderPlaygroundPage = render_playground_page_1.renderPlaygroundPage;
+Object.defineProperty(exports, "renderPlaygroundPage", { enumerable: true, get: function () { return render_playground_page_1.renderPlaygroundPage; } });
 //# sourceMappingURL=index.js.map

dist/render-playground-page.js

 "use strict";
-var __assign = (this && this.__assign) || Object.assign || function(t) {
-    for (var s, i = 1, n = arguments.length; i < n; i++) {
-        s = arguments[i];
-        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-            t[p] = s[p];
-    }
-    return t;
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderPlaygroundPage = void 0;
+var xss_1 = require("xss");
 var get_loading_markup_1 = require("./get-loading-markup");
+var filter = function (val) {
+    return xss_1.filterXSS(val, {
+        // @ts-ignore
+        whiteList: [],
+        stripIgnoreTag: true,
+        stripIgnoreTagBody: ["script"]
+    });
+};
 var loading = get_loading_markup_1.default();
 var getCdnMarkup = function (_a) {
     var version = _a.version, _b = _a.cdnUrl, cdnUrl = _b === void 0 ? '//cdn.jsdelivr.net/npm/@apollographql' : _b, faviconUrl = _a.faviconUrl;
-    return "\n    <link rel=\"stylesheet\" href=\"" + cdnUrl + "/graphql-playground-react" + (version ? "@" + version : '') + "/build/static/css/index.css\" />\n    " + (typeof faviconUrl === 'string'
-        ? "<link rel=\"shortcut icon\" href=\"" + faviconUrl + "\" />"
-        : '') + "\n    " + (faviconUrl === undefined
-        ? "<link rel=\"shortcut icon\" href=\"" + cdnUrl + "/graphql-playground-react" + (version ? "@" + version : '') + "/build/favicon.png\" />"
-        : '') + "\n    <script src=\"" + cdnUrl + "/graphql-playground-react" + (version ? "@" + version : '') + "/build/static/js/middleware.js\"></script>\n";
+    var buildCDNUrl = function (packageName, suffix) { return filter(cdnUrl + "/" + packageName + "/" + (version ? "@" + version + "/" : '') + suffix || ''); };
+    return "\n    <link \n      rel=\"stylesheet\" \n      href=\"" + buildCDNUrl('graphql-playground-react', 'build/static/css/index.css') + "\"\n    />\n    " + (typeof faviconUrl === 'string' ? "<link rel=\"shortcut icon\" href=\"" + filter(faviconUrl || '') + "\" />" : '') + "\n    " + (faviconUrl === undefined ? "<link rel=\"shortcut icon\" href=\"" + buildCDNUrl('graphql-playground-react', 'build/favicon.png') + "\" />" : '') + "\n    <script \n      src=\"" + buildCDNUrl('graphql-playground-react', 'build/static/js/middleware.js') + "\"\n    ></script>\n";
 };
+var renderConfig = function (config) {
+    return xss_1.filterXSS("<div id=\"config\">" + JSON.stringify(config) + "</div>", {
+        whiteList: { div: ['id'] },
+    });
+};
 function renderPlaygroundPage(options) {
-    var extendedOptions = __assign({}, options, { canSaveConfig: false });
+    var extendedOptions = __assign(__assign({}, options), { canSaveConfig: false });
     // for compatibility
     if (options.subscriptionsEndpoint) {
-        extendedOptions.subscriptionEndpoint = options.subscriptionsEndpoint;
+        extendedOptions.subscriptionEndpoint = filter(options.subscriptionsEndpoint || '');
     }
@@ -34,7 +49,10 @@ if (options.config) {
     }
+    else if (extendedOptions.endpoint) {
+        extendedOptions.endpoint = filter(extendedOptions.endpoint || '');
+    }
     return "\n  <!DOCTYPE html>\n  <html>\n  <head>\n    <meta charset=utf-8 />\n    <meta name=\"viewport\" content=\"user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui\">\n    <link href=\"https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700|Source+Code+Pro:400,700\" rel=\"stylesheet\">\n    <title>" + (extendedOptions.title || 'GraphQL Playground') + "</title>\n    " + (extendedOptions.env === 'react' || extendedOptions.env === 'electron'
         ? ''
-        : getCdnMarkup(extendedOptions)) + "\n  </head>\n  <body>\n    <style type=\"text/css\">\n      html {\n        font-family: \"Open Sans\", sans-serif;\n        overflow: hidden;\n      }\n  \n      body {\n        margin: 0;\n        background: #172a3a;\n      }\n  \n      .playgroundIn {\n        -webkit-animation: playgroundIn 0.5s ease-out forwards;\n        animation: playgroundIn 0.5s ease-out forwards;\n      }\n  \n      @-webkit-keyframes playgroundIn {\n        from {\n          opacity: 0;\n          -webkit-transform: translateY(10px);\n          -ms-transform: translateY(10px);\n          transform: translateY(10px);\n        }\n        to {\n          opacity: 1;\n          -webkit-transform: translateY(0);\n          -ms-transform: translateY(0);\n          transform: translateY(0);\n        }\n      }\n  \n      @keyframes playgroundIn {\n        from {\n          opacity: 0;\n          -webkit-transform: translateY(10px);\n          -ms-transform: translateY(10px);\n          transform: translateY(10px);\n        }\n        to {\n          opacity: 1;\n          -webkit-transform: translateY(0);\n          -ms-transform: translateY(0);\n          transform: translateY(0);\n        }\n      }\n    </style>\n    " + loading.container + "\n    <div id=\"root\" />\n    <script type=\"text/javascript\">\n      window.addEventListener('load', function (event) {\n        " + loading.script + "\n  \n        const root = document.getElementById('root');\n        root.classList.add('playgroundIn');\n  \n        GraphQLPlayground.init(root, " + JSON.stringify(extendedOptions, null, 2) + ")\n      })\n    </script>\n  </body>\n  </html>\n";
+        : getCdnMarkup(extendedOptions)) + "\n  </head>\n  <body>\n    <style type=\"text/css\">\n      html {\n        font-family: \"Open Sans\", sans-serif;\n        overflow: hidden;\n      }\n  \n      body {\n        margin: 0;\n        background: #172a3a;\n      }\n  \n      .playgroundIn {\n        -webkit-animation: playgroundIn 0.5s ease-out forwards;\n        animation: playgroundIn 0.5s ease-out forwards;\n      }\n  \n      @-webkit-keyframes playgroundIn {\n        from {\n          opacity: 0;\n          -webkit-transform: translateY(10px);\n          -ms-transform: translateY(10px);\n          transform: translateY(10px);\n        }\n        to {\n          opacity: 1;\n          -webkit-transform: translateY(0);\n          -ms-transform: translateY(0);\n          transform: translateY(0);\n        }\n      }\n  \n      @keyframes playgroundIn {\n        from {\n          opacity: 0;\n          -webkit-transform: translateY(10px);\n          -ms-transform: translateY(10px);\n          transform: translateY(10px);\n        }\n        to {\n          opacity: 1;\n          -webkit-transform: translateY(0);\n          -ms-transform: translateY(0);\n          transform: translateY(0);\n        }\n      }\n    </style>\n    " + loading.container + "\n    " + renderConfig(extendedOptions) + "\n    <div id=\"root\" />\n    <script type=\"text/javascript\">\n      window.addEventListener('load', function (event) {\n        " + loading.script + "\n  \n        const root = document.getElementById('root');\n        root.classList.add('playgroundIn');\n        const configText = document.getElementById('config').innerText\n        if(configText && configText.length) {\n          try {\n            GraphQLPlayground.init(root, JSON.parse(configText))\n          }\n          catch(err) {\n            console.error(\"could not find config\")\n          }\n        }\n      })\n    </script>\n  </body>\n  </html>\n";
 }
 exports.renderPlaygroundPage = renderPlaygroundPage;
 //# sourceMappingURL=render-playground-page.js.map

package.json

 {
   "name": "@apollographql/graphql-playground-html",
-  "version": "1.6.24",
+  "version": "1.6.25",
   "homepage": "https://github.com/graphcool/graphql-playground/tree/master/packages/graphql-playground-html",
@@ -28,5 +28,5 @@ "description": "GraphQL IDE for better development workflows (GraphQL Subscriptions, interactive docs & collaboration).",
   "devDependencies": {
-    "@types/node": "9.4.6",
+    "@types/node": "10.17.26",
     "rimraf": "2.6.2",
-    "typescript": "2.6.2"
+    "typescript": "3.9.5"
   },
@@ -37,3 +37,5 @@ "typings": "dist/index.d.ts",
   },
-  "dependencies": {}
+  "dependencies": {
+    "xss": "^1.0.6"
+  }
 }

README.md

@@ -1,6 +0,5 @@
-# graphql-playground-html
+# @apollographql/graphql-playground-html
 
-This package is being used by the GraphQL Playground middlewares.
+**NOTE:** This is a fork of [`graphql-playground-html`](https://npm.im/graphql-playground-html) which is meant to be used by Apollo Server and only by Apollo Server.  It is not intended to be used directly.  Those looking to use GraphQL Playground directly can refer to [the upstream repository](https://github.com/prisma-labs/graphql-playground) for usage instructions.
 
-For local development, you can `yarn link` this package, then use `yarn link graphql-playground-html` in the
-middleware you want to develop.
+> **SECURITY WARNING:** Via the upstream fork, this package had a severe XSS Reflection attack vulnerability until version `1.6.25` of this package. **While we have published a fix, users were only affected if they were using `@apollographql/graphql-playground-html` directly as their own custom middleware.**  The direct usage of this package was never recommended as it provided no advantage over the upstream package in that regard.  Users of Apollo Server who leverage this package automatically by the dependency declared within Apollo Sever were not affected since Apollo Server never provided dynamic facilities to customize playground options per request.  Users of Apollo Server would have had to statically embedded very explicit vulnerabilities (e.g., using malicious, unescaped code, `<script>` tags, etc.).

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

28671

increased by10.4%

Lines of code

203

increased by10.93%

Worsened metrics

Dependency count

1

increased byInfinity%

Number of lines in readme file

6

decreased by-14.29%

Dependency changes

• + Addedxss@^1.0.6

• + Addedcommander@2.20.3(transitive)

• + Addedcssfilter@0.0.10(transitive)

• + Addedxss@1.0.15(transitive)