Skip to content

Commit 274e3f9

Browse files
Chakravarthy7102Chakravarthy7102
authored
feat: CSP frontend alert screen (#797)
* Adds csp error screen * build files * fixes firefox execution order. * make sure that js bundle script only gets executed only after the html parsing is completed * bump v16.7.4 * fixes styling issues on safari
1 parent aed7b09 commit 274e3f9

File tree

8 files changed

+77
-8
lines changed

8 files changed

+77
-8
lines changed

‎CHANGELOG.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
77

88
## [unreleased]
99

10+
## [16.7.4] - 2024-03-01
11+
12+
- Adds a user friendly error screen that provides helpful information regarding Content Security Policy (CSP) issues..
13+
1014
## [16.7.3] - 2024-02-26
1115

1216
- Fixes dashboard URI path. Now it returns the complete user given path instead of just the normalized connectionURI domain.

‎lib/build/recipe/dashboard/api/implementation.js

Lines changed: 33 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,11 +54,25 @@ function getAPIImplementation() {
5454
// Only enable search if CDI version is 2.20 or above
5555
isSearchEnabled = true;
5656
}
57+
const htmlContent = `
58+
'<div class="csp-screen-container">' +
59+
'<div>' +
60+
'<p>It looks like you have encountered a <u>Content Security Policy (CSP) </u> violation while trying to load a resource. Here is the breakdown of the details:</p>' +
61+
'<span class="csp-screen-point"><strong>Blocked URI:</strong> ' + event.blockedURI + '<br></span>' +
62+
'<span class="csp-screen-point"><strong>Violated Directive:</strong> ' + event.violatedDirective + '<br></span>' +
63+
'<span class="csp-screen-point"><strong>Original Policy:</strong> ' + event.originalPolicy + '<br></span>' +
64+
'<p>To resolve this issue, you will need to update your CSP configuration to allow the blocked URI.</p>' +
65+
'</div>' +
66+
'</div>'`;
5767
return `
5868
<html>
5969
<head>
6070
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6171
<script>
72+
window.addEventListener('securitypolicyviolation', function (event) {
73+
const root = document.getElementById("root");
74+
root.innerHTML = ${htmlContent}
75+
});
6276
window.staticBasePath = "${bundleDomain}/static"
6377
window.dashboardAppPath = "${input.options.appInfo.apiBasePath
6478
.appendPath(new normalisedURLPath_1.default(constants_1.DASHBOARD_API))
@@ -67,7 +81,25 @@ function getAPIImplementation() {
6781
window.authMode = "${authMode}"
6882
window.isSearchEnabled = "${isSearchEnabled}"
6983
</script>
70-
<script defer src="${bundleDomain}/static/js/bundle.js"></script></head>
84+
85+
<style>
86+
.csp-screen-container{
87+
display: flex;
88+
height: 100vh;
89+
align-items: center;
90+
justify-content: center;
91+
max-width: 480px;
92+
margin: auto;
93+
94+
font-size: 16px;
95+
}
96+
.csp-screen-point{
97+
display: inline-block;
98+
margin: 4px 0px;
99+
}
100+
</style>
101+
102+
<script defer src="${bundleDomain}/static/js/bundle.js"></script>
71103
<link href="${bundleDomain}/static/css/main.css" rel="stylesheet" type="text/css">
72104
<link rel="icon" type="image/x-icon" href="${bundleDomain}/static/media/favicon.ico">
73105
</head>

‎lib/build/version.d.ts

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎lib/build/version.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎lib/ts/recipe/dashboard/api/implementation.ts

Lines changed: 34 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,11 +54,26 @@ export default function getAPIImplementation(): APIInterface {
5454
isSearchEnabled = true;
5555
}
5656

57+
const htmlContent = `
58+
'<div class="csp-screen-container">' +
59+
'<div>' +
60+
'<p>It looks like you have encountered a <u>Content Security Policy (CSP) </u> violation while trying to load a resource. Here is the breakdown of the details:</p>' +
61+
'<span class="csp-screen-point"><strong>Blocked URI:</strong> ' + event.blockedURI + '<br></span>' +
62+
'<span class="csp-screen-point"><strong>Violated Directive:</strong> ' + event.violatedDirective + '<br></span>' +
63+
'<span class="csp-screen-point"><strong>Original Policy:</strong> ' + event.originalPolicy + '<br></span>' +
64+
'<p>To resolve this issue, you will need to update your CSP configuration to allow the blocked URI.</p>' +
65+
'</div>' +
66+
'</div>'`;
67+
5768
return `
5869
<html>
5970
<head>
6071
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6172
<script>
73+
window.addEventListener('securitypolicyviolation', function (event) {
74+
const root = document.getElementById("root");
75+
root.innerHTML = ${htmlContent}
76+
});
6277
window.staticBasePath = "${bundleDomain}/static"
6378
window.dashboardAppPath = "${input.options.appInfo.apiBasePath
6479
.appendPath(new NormalisedURLPath(DASHBOARD_API))
@@ -67,7 +82,25 @@ export default function getAPIImplementation(): APIInterface {
6782
window.authMode = "${authMode}"
6883
window.isSearchEnabled = "${isSearchEnabled}"
6984
</script>
70-
<script defer src="${bundleDomain}/static/js/bundle.js"></script></head>
85+
86+
<style>
87+
.csp-screen-container{
88+
display: flex;
89+
height: 100vh;
90+
align-items: center;
91+
justify-content: center;
92+
max-width: 480px;
93+
margin: auto;
94+
95+
font-size: 16px;
96+
}
97+
.csp-screen-point{
98+
display: inline-block;
99+
margin: 4px 0px;
100+
}
101+
</style>
102+
103+
<script defer src="${bundleDomain}/static/js/bundle.js"></script>
71104
<link href="${bundleDomain}/static/css/main.css" rel="stylesheet" type="text/css">
72105
<link rel="icon" type="image/x-icon" href="${bundleDomain}/static/media/favicon.ico">
73106
</head>

‎lib/ts/version.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
* License for the specific language governing permissions and limitations
1313
* under the License.
1414
*/
15-
export const version = "16.7.3";
15+
export const version = "16.7.4";
1616

1717
export const cdiSupported = ["4.0"];
1818

‎package-lock.json

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "supertokens-node",
3-
"version": "16.7.3",
3+
"version": "16.7.4",
44
"description": "NodeJS driver for SuperTokens core",
55
"main": "index.js",
66
"scripts": {

0 commit comments

Comments
 (0)