Merge pull request #780 from supertokens/update-csp-docs

Updates dashboard CSP docs
supertokens · Mar 19, 2024 · a8e6055 · a8e6055
2 parents bfc0405 + c3d07e7
commit a8e6055
Show file tree

Hide file tree

Showing 12 changed files with 616 additions and 0 deletions.
diff --git a/v2/emailpassword/custom-ui/init/user-management-dashboard/setup.mdx b/v2/emailpassword/custom-ui/init/user-management-dashboard/setup.mdx
@@ -261,16 +261,72 @@ init(
 
 ## Content Security Policy
 
+<BackendSDKTabs>
+<TabItem value="nodejs">
+
+If your backend returns a `Content-Security-Policy` header, you will encounter the following UI displaying the CSP violation details. Follow the instructions provided in this UI to make necessary adjustments to your backend CSP configuration.
+
+![CSP error handled UI](/img/dashboard/csp-error.png)
+
+
+For example, to address the error message displayed in the above screenshot, you need to modify your `original policy`. In the given example, it appears as follows:
+
+```text
+script-src:
+  'self' 
+  'unsafe-inline' 
+  https://google.com
+
+img-src:
+  https://google.com
+```
+
+To resolve this issue, make the following adjustments:
+
+
+```text
+script-src:
+  'self' 
+  'unsafe-inline' 
+  https://google.com
+
+img-src:
+  https://google.com
+  https://cdn.jsdelivr.net/gh/supertokens/
+
+```
+Essentially, you need to include the domain listed as the  `Blocked URI` in your violated directive block within your original policy.
+</TabItem>
+<TabItem value="go">
+
 If you return a `Content-Security-Policy` header in from your backend, you will need to include the following directives for the user management dashboard to work correctly
 
 ```text
 script-src:
   'self' 
   'unsafe-inline' 
   https://cdn.jsdelivr.net/gh/supertokens/
+img-src:
+  https://cdn.jsdelivr.net/gh/supertokens/
+  https://purecatamphetamine.github.io/
+```
+
+</TabItem>
+<TabItem value="python">
+
+If you return a `Content-Security-Policy` header in from your backend, you will need to include the following directives for the user management dashboard to work correctly
 
+```text
+script-src:
+  'self' 
+  'unsafe-inline' 
+  https://cdn.jsdelivr.net/gh/supertokens/
 img-src:
   https://cdn.jsdelivr.net/gh/supertokens/
+  https://purecatamphetamine.github.io/
 ```
 
+</TabItem>
+</BackendSDKTabs>
+
 <!-- END COPY SECTION -->
diff --git a/v2/emailpassword/pre-built-ui/setup/user-management-dashboard/setup.mdx b/v2/emailpassword/pre-built-ui/setup/user-management-dashboard/setup.mdx
@@ -261,16 +261,72 @@ init(
 
 ## Content Security Policy
 
+<BackendSDKTabs>
+<TabItem value="nodejs">
+
+If your backend returns a `Content-Security-Policy` header, you will encounter the following UI displaying the CSP violation details. Follow the instructions provided in this UI to make necessary adjustments to your backend CSP configuration.
+
+![CSP error handled UI](/img/dashboard/csp-error.png)
+
+
+For example, to address the error message displayed in the above screenshot, you need to modify your `original policy`. In the given example, it appears as follows:
+
+```text
+script-src:
+  'self' 
+  'unsafe-inline' 
+  https://google.com
+
+img-src:
+  https://google.com
+```
+
+To resolve this issue, make the following adjustments:
+
+
+```text
+script-src:
+  'self' 
+  'unsafe-inline' 
+  https://google.com
+
+img-src:
+  https://google.com
+  https://cdn.jsdelivr.net/gh/supertokens/
+
+```
+Essentially, you need to include the domain listed as the  `Blocked URI` in your violated directive block within your original policy.
+</TabItem>
+<TabItem value="go">
+
 If you return a `Content-Security-Policy` header in from your backend, you will need to include the following directives for the user management dashboard to work correctly
 
 ```text
 script-src:
   'self' 
   'unsafe-inline' 
   https://cdn.jsdelivr.net/gh/supertokens/
+img-src:
+  https://cdn.jsdelivr.net/gh/supertokens/
+  https://purecatamphetamine.github.io/
+```
+
+</TabItem>
+<TabItem value="python">
+
+If you return a `Content-Security-Policy` header in from your backend, you will need to include the following directives for the user management dashboard to work correctly
 
+```text
+script-src:
+  'self' 
+  'unsafe-inline' 
+  https://cdn.jsdelivr.net/gh/supertokens/
 img-src:
   https://cdn.jsdelivr.net/gh/supertokens/
+  https://purecatamphetamine.github.io/
 ```
 
+</TabItem>
+</BackendSDKTabs>
+
 <!-- END COPY SECTION -->
diff --git a/v2/passwordless/custom-ui/init/user-management-dashboard/setup.mdx b/v2/passwordless/custom-ui/init/user-management-dashboard/setup.mdx
@@ -261,16 +261,72 @@ init(
 
 ## Content Security Policy
 
+<BackendSDKTabs>
+<TabItem value="nodejs">
+
+If your backend returns a `Content-Security-Policy` header, you will encounter the following UI displaying the CSP violation details. Follow the instructions provided in this UI to make necessary adjustments to your backend CSP configuration.
+
+![CSP error handled UI](/img/dashboard/csp-error.png)
+
+
+For example, to address the error message displayed in the above screenshot, you need to modify your `original policy`. In the given example, it appears as follows:
+
+```text
+script-src:
+  'self' 
+  'unsafe-inline' 
+  https://google.com
+
+img-src:
+  https://google.com
+```
+
+To resolve this issue, make the following adjustments:
+
+
+```text
+script-src:
+  'self' 
+  'unsafe-inline' 
+  https://google.com
+
+img-src:
+  https://google.com
+  https://cdn.jsdelivr.net/gh/supertokens/
+
+```
+Essentially, you need to include the domain listed as the  `Blocked URI` in your violated directive block within your original policy.
+</TabItem>
+<TabItem value="go">
+
 If you return a `Content-Security-Policy` header in from your backend, you will need to include the following directives for the user management dashboard to work correctly
 
 ```text
 script-src:
   'self' 
   'unsafe-inline' 
   https://cdn.jsdelivr.net/gh/supertokens/
+img-src:
+  https://cdn.jsdelivr.net/gh/supertokens/
+  https://purecatamphetamine.github.io/
+```
+
+</TabItem>
+<TabItem value="python">
+
+If you return a `Content-Security-Policy` header in from your backend, you will need to include the following directives for the user management dashboard to work correctly
 
+```text
+script-src:
+  'self' 
+  'unsafe-inline' 
+  https://cdn.jsdelivr.net/gh/supertokens/
 img-src:
   https://cdn.jsdelivr.net/gh/supertokens/
+  https://purecatamphetamine.github.io/
 ```
 
+</TabItem>
+</BackendSDKTabs>
+
 <!-- END COPY SECTION -->
diff --git a/v2/passwordless/pre-built-ui/setup/user-management-dashboard/setup.mdx b/v2/passwordless/pre-built-ui/setup/user-management-dashboard/setup.mdx
@@ -261,16 +261,72 @@ init(
 
 ## Content Security Policy
 
+<BackendSDKTabs>
+<TabItem value="nodejs">
+
+If your backend returns a `Content-Security-Policy` header, you will encounter the following UI displaying the CSP violation details. Follow the instructions provided in this UI to make necessary adjustments to your backend CSP configuration.
+
+![CSP error handled UI](/img/dashboard/csp-error.png)
+
+
+For example, to address the error message displayed in the above screenshot, you need to modify your `original policy`. In the given example, it appears as follows:
+
+```text
+script-src:
+  'self' 
+  'unsafe-inline' 
+  https://google.com
+
+img-src:
+  https://google.com
+```
+
+To resolve this issue, make the following adjustments:
+
+
+```text
+script-src:
+  'self' 
+  'unsafe-inline' 
+  https://google.com
+
+img-src:
+  https://google.com
+  https://cdn.jsdelivr.net/gh/supertokens/
+
+```
+Essentially, you need to include the domain listed as the  `Blocked URI` in your violated directive block within your original policy.
+</TabItem>
+<TabItem value="go">
+
 If you return a `Content-Security-Policy` header in from your backend, you will need to include the following directives for the user management dashboard to work correctly
 
 ```text
 script-src:
   'self' 
   'unsafe-inline' 
   https://cdn.jsdelivr.net/gh/supertokens/
+img-src:
+  https://cdn.jsdelivr.net/gh/supertokens/
+  https://purecatamphetamine.github.io/
+```
+
+</TabItem>
+<TabItem value="python">
+
+If you return a `Content-Security-Policy` header in from your backend, you will need to include the following directives for the user management dashboard to work correctly
 
+```text
+script-src:
+  'self' 
+  'unsafe-inline' 
+  https://cdn.jsdelivr.net/gh/supertokens/
 img-src:
   https://cdn.jsdelivr.net/gh/supertokens/
+  https://purecatamphetamine.github.io/
 ```
 
+</TabItem>
+</BackendSDKTabs>
+
 <!-- END COPY SECTION -->
diff --git a/v2/static/img/dashboard/csp-error.png b/v2/static/img/dashboard/csp-error.png
diff --git a/v2/thirdparty/custom-ui/init/user-management-dashboard/setup.mdx b/v2/thirdparty/custom-ui/init/user-management-dashboard/setup.mdx
@@ -261,16 +261,72 @@ init(
 
 ## Content Security Policy
 
+<BackendSDKTabs>
+<TabItem value="nodejs">
+
+If your backend returns a `Content-Security-Policy` header, you will encounter the following UI displaying the CSP violation details. Follow the instructions provided in this UI to make necessary adjustments to your backend CSP configuration.
+
+![CSP error handled UI](/img/dashboard/csp-error.png)
+
+
+For example, to address the error message displayed in the above screenshot, you need to modify your `original policy`. In the given example, it appears as follows:
+
+```text
+script-src:
+  'self' 
+  'unsafe-inline' 
+  https://google.com
+
+img-src:
+  https://google.com
+```
+
+To resolve this issue, make the following adjustments:
+
+
+```text
+script-src:
+  'self' 
+  'unsafe-inline' 
+  https://google.com
+
+img-src:
+  https://google.com
+  https://cdn.jsdelivr.net/gh/supertokens/
+
+```
+Essentially, you need to include the domain listed as the  `Blocked URI` in your violated directive block within your original policy.
+</TabItem>
+<TabItem value="go">
+
 If you return a `Content-Security-Policy` header in from your backend, you will need to include the following directives for the user management dashboard to work correctly
 
 ```text
 script-src:
   'self' 
   'unsafe-inline' 
   https://cdn.jsdelivr.net/gh/supertokens/
+img-src:
+  https://cdn.jsdelivr.net/gh/supertokens/
+  https://purecatamphetamine.github.io/
+```
+
+</TabItem>
+<TabItem value="python">
+
+If you return a `Content-Security-Policy` header in from your backend, you will need to include the following directives for the user management dashboard to work correctly
 
+```text
+script-src:
+  'self' 
+  'unsafe-inline' 
+  https://cdn.jsdelivr.net/gh/supertokens/
 img-src:
   https://cdn.jsdelivr.net/gh/supertokens/
+  https://purecatamphetamine.github.io/
 ```
 
+</TabItem>
+</BackendSDKTabs>
+
 <!-- END COPY SECTION -->