From c6e57890182035c5391d263b571412c2b8f5ad13 Mon Sep 17 00:00:00 2001
From: Ahmed Tarek <ahmed.tokyo1@gmail.com>
Date: Mon, 12 Oct 2020 16:25:11 +0200
Subject: [PATCH 1/5] =?UTF-8?q?=F0=9F=93=9A=20Update=20docs=20with=20Helme?=
 =?UTF-8?q?t=20CSP=20support?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md | 38 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 38 insertions(+)

diff --git a/README.md b/README.md
index ef1a5803..6ef6db11 100644
--- a/README.md
+++ b/README.md
@@ -348,6 +348,44 @@ getGraphQLParams(request).then((params) => {
 });
 ```
 
+### Integration with other express middlewares
+#### [Helmet](https://helmetjs.github.io/)
+When using Helmet the default CSP of helmet blocks graphiql's inline scripts support. To enable graphiql with helmet you need to update the contentSecurityPolicies with graphiql's needs.
+The code snippet below makes use of Helmet's default CSP and adds what graphiql needs.
+```js
+app.use(
+  helmet({
+    /**
+     * Default helmet policy + own customizations - graphiql support
+     * - https://helmetjs.github.io/
+     */
+    contentSecurityPolicy: helmet.contentSecurityPolicy({
+      directives: {
+        defaultSrc: [
+          "'self'",
+          /** @by-us - adds graphiql support over helmet's default CSP */
+          "'unsafe-inline'",
+        ],
+        baseUri: ["'self'"],
+        blockAllMixedContent: [],
+        fontSrc: ["'self'", 'https:', 'data:'],
+        frameAncestors: ["'self'"],
+        imgSrc: ["'self'", 'data:'],
+        objectSrc: ["'none'"],
+        scriptSrc: [
+          "'self'",
+          /** @by-us - adds graphiql support over helmet's default CSP */
+          "'unsafe-inline'",
+          /** @by-us - adds graphiql support over helmet's default CSP */
+          "'unsafe-eval'",
+        ],
+        upgradeInsecureRequests: [],
+      },
+    }),
+  }),
+);
+```
+
 ## Debugging Tips
 
 During development, it's useful to get more information from errors, such as

From 9714ef765f19d241840215084cc8f01ea60800f7 Mon Sep 17 00:00:00 2001
From: Tokyo <ahmed.tokyo1@gmail.com>
Date: Mon, 12 Oct 2020 16:47:54 +0200
Subject: [PATCH 2/5] :rotating_light: run prettier

---
 README.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/README.md b/README.md
index 6ef6db11..0e05bb94 100644
--- a/README.md
+++ b/README.md
@@ -349,9 +349,12 @@ getGraphQLParams(request).then((params) => {
 ```
 
 ### Integration with other express middlewares
+
 #### [Helmet](https://helmetjs.github.io/)
+
 When using Helmet the default CSP of helmet blocks graphiql's inline scripts support. To enable graphiql with helmet you need to update the contentSecurityPolicies with graphiql's needs.
 The code snippet below makes use of Helmet's default CSP and adds what graphiql needs.
+
 ```js
 app.use(
   helmet({

From 4644f4a756179244283a061fc2e1590ab3dffee9 Mon Sep 17 00:00:00 2001
From: Tokyo <ahmed.tokyo1@gmail.com>
Date: Mon, 12 Oct 2020 16:55:03 +0200
Subject: [PATCH 3/5] :rotating_light: add new words to cspell

---
 cspell.json | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/cspell.json b/cspell.json
index b96b05ac..b939e042 100644
--- a/cspell.json
+++ b/cspell.json
@@ -14,7 +14,10 @@
     "tsconfig.json"
   ],
   "words": [
+    "eval",
     "graphiql",
+    "graphiql's",
+    "middlewares",
     "unfetch",
     "noindex",
     "codecov",

From 299ddb47488f62389c372b4cc1560b3900819c87 Mon Sep 17 00:00:00 2001
From: Tokyo <ahmed.tokyo1@gmail.com>
Date: Mon, 12 Oct 2020 18:07:36 +0200
Subject: [PATCH 4/5] :books: update docs

---
 README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 0e05bb94..401483fd 100644
--- a/README.md
+++ b/README.md
@@ -362,7 +362,7 @@ app.use(
      * Default helmet policy + own customizations - graphiql support
      * - https://helmetjs.github.io/
      */
-    contentSecurityPolicy: helmet.contentSecurityPolicy({
+    contentSecurityPolicy: {
       directives: {
         defaultSrc: [
           "'self'",
@@ -384,7 +384,7 @@ app.use(
         ],
         upgradeInsecureRequests: [],
       },
-    }),
+    },
   }),
 );
 ```

From 3db79313833405772d02818c9769363b27f18ac7 Mon Sep 17 00:00:00 2001
From: Ahmed Tarek <ahmed.tokyo1@gmail.com>
Date: Mon, 23 Nov 2020 15:51:20 +0200
Subject: [PATCH 5/5] =?UTF-8?q?=F0=9F=93=9A=20update=20helmet=20docs=20to?=
 =?UTF-8?q?=20use=20getDefaultDirectives?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md | 16 +++++-----------
 1 file changed, 5 insertions(+), 11 deletions(-)

diff --git a/README.md b/README.md
index 401483fd..2a648193 100644
--- a/README.md
+++ b/README.md
@@ -364,25 +364,19 @@ app.use(
      */
     contentSecurityPolicy: {
       directives: {
-        defaultSrc: [
-          "'self'",
+        ...helmet.contentSecurityPolicy.getDefaultDirectives(),
+        ['default-src']: [
+          ...helmet.contentSecurityPolicy.getDefaultDirectives()['default-src'],
           /** @by-us - adds graphiql support over helmet's default CSP */
           "'unsafe-inline'",
         ],
-        baseUri: ["'self'"],
-        blockAllMixedContent: [],
-        fontSrc: ["'self'", 'https:', 'data:'],
-        frameAncestors: ["'self'"],
-        imgSrc: ["'self'", 'data:'],
-        objectSrc: ["'none'"],
-        scriptSrc: [
-          "'self'",
+        ['script-src']: [
+          ...helmet.contentSecurityPolicy.getDefaultDirectives()['script-src'],
           /** @by-us - adds graphiql support over helmet's default CSP */
           "'unsafe-inline'",
           /** @by-us - adds graphiql support over helmet's default CSP */
           "'unsafe-eval'",
         ],
-        upgradeInsecureRequests: [],
       },
     },
   }),