From c03e41a13da2f948ba6bc08ab2d8b9357d4b9401 Mon Sep 17 00:00:00 2001
From: Adam Spofford <93943719+adamspofford-dfinity@users.noreply.github.com>
Date: Mon, 6 Jan 2025 11:28:13 -0800
Subject: [PATCH] fix: add browser warning message (#4048)
---
CHANGELOG.md | 6 ++++++
.../react/src/__frontend_name__/index.html | 4 ++++
.../react/src/__frontend_name__/src/index.scss | 4 ++++
.../svelte/src/__frontend_name__/src/app.html | 4 ++++
.../svelte/src/__frontend_name__/src/index.scss | 4 ++++
.../vanilla_js/src/__frontend_name__/index.html | 4 ++++
.../vanilla_js/src/__frontend_name__/src/index.scss | 4 ++++
.../project_templates/vue/src/__frontend_name__/index.html | 4 ++++
.../vue/src/__frontend_name__/src/index.scss | 4 ++++
9 files changed, 38 insertions(+)
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9ec00e6d19..8e76dab1a8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,12 @@
# UNRELEASED
+### fix: template frontends now have unsupported browser warnings
+
+DFX's default security headers cause Safari to break when viewing local canisters. Warning messages
+have been added to the frontend project templates when the page is broken that indicate to try switching
+browsers.
+
### feat: impersonating sender of requests to a local PocketIC instance
`dfx canister call`, `dfx canister status`, and `dfx canister update-settings` take
diff --git a/src/dfx/assets/project_templates/react/src/__frontend_name__/index.html b/src/dfx/assets/project_templates/react/src/__frontend_name__/index.html
index a8f14f76b8..0ad7b99b93 100644
--- a/src/dfx/assets/project_templates/react/src/__frontend_name__/index.html
+++ b/src/dfx/assets/project_templates/react/src/__frontend_name__/index.html
@@ -10,6 +10,10 @@
+
+ ⚠️ If this page appears broken, try reloading. If the problem persists, try switching browsers; Chrome or
+ Firefox are recommended.
+
diff --git a/src/dfx/assets/project_templates/react/src/__frontend_name__/src/index.scss b/src/dfx/assets/project_templates/react/src/__frontend_name__/src/index.scss
index c1c320834c..283585fb27 100644
--- a/src/dfx/assets/project_templates/react/src/__frontend_name__/src/index.scss
+++ b/src/dfx/assets/project_templates/react/src/__frontend_name__/src/index.scss
@@ -35,3 +35,7 @@ button[type="submit"] {
#greeting:empty {
display: none;
}
+
+.browser-warning {
+ display: none;
+}
diff --git a/src/dfx/assets/project_templates/svelte/src/__frontend_name__/src/app.html b/src/dfx/assets/project_templates/svelte/src/__frontend_name__/src/app.html
index dfae06cc73..d4a7d45f50 100644
--- a/src/dfx/assets/project_templates/svelte/src/__frontend_name__/src/app.html
+++ b/src/dfx/assets/project_templates/svelte/src/__frontend_name__/src/app.html
@@ -10,6 +10,10 @@
+
+ ⚠️ If this page appears broken, try reloading. If the problem persists, try switching browsers; Chrome or
+ Firefox are recommended.
+
%sveltekit.body%
diff --git a/src/dfx/assets/project_templates/svelte/src/__frontend_name__/src/index.scss b/src/dfx/assets/project_templates/svelte/src/__frontend_name__/src/index.scss
index c1c320834c..283585fb27 100644
--- a/src/dfx/assets/project_templates/svelte/src/__frontend_name__/src/index.scss
+++ b/src/dfx/assets/project_templates/svelte/src/__frontend_name__/src/index.scss
@@ -35,3 +35,7 @@ button[type="submit"] {
#greeting:empty {
display: none;
}
+
+.browser-warning {
+ display: none;
+}
diff --git a/src/dfx/assets/project_templates/vanilla_js/src/__frontend_name__/index.html b/src/dfx/assets/project_templates/vanilla_js/src/__frontend_name__/index.html
index 6c1db68a54..482508af30 100644
--- a/src/dfx/assets/project_templates/vanilla_js/src/__frontend_name__/index.html
+++ b/src/dfx/assets/project_templates/vanilla_js/src/__frontend_name__/index.html
@@ -9,6 +9,10 @@
+
+ ⚠️ If this page appears broken, try reloading. If the problem persists, try switching browsers; Chrome or
+ Firefox are recommended.
+
diff --git a/src/dfx/assets/project_templates/vanilla_js/src/__frontend_name__/src/index.scss b/src/dfx/assets/project_templates/vanilla_js/src/__frontend_name__/src/index.scss
index c1c320834c..283585fb27 100644
--- a/src/dfx/assets/project_templates/vanilla_js/src/__frontend_name__/src/index.scss
+++ b/src/dfx/assets/project_templates/vanilla_js/src/__frontend_name__/src/index.scss
@@ -35,3 +35,7 @@ button[type="submit"] {
#greeting:empty {
display: none;
}
+
+.browser-warning {
+ display: none;
+}
diff --git a/src/dfx/assets/project_templates/vue/src/__frontend_name__/index.html b/src/dfx/assets/project_templates/vue/src/__frontend_name__/index.html
index 6e80f94528..8ba7f24a12 100644
--- a/src/dfx/assets/project_templates/vue/src/__frontend_name__/index.html
+++ b/src/dfx/assets/project_templates/vue/src/__frontend_name__/index.html
@@ -14,6 +14,10 @@
We're sorry but this application doesn't work properly without
JavaScript enabled. Please enable it to continue.
+
+ ⚠️ If this page appears broken, try reloading. If the problem persists, try switching browsers; Chrome or
+ Firefox are recommended.
+
diff --git a/src/dfx/assets/project_templates/vue/src/__frontend_name__/src/index.scss b/src/dfx/assets/project_templates/vue/src/__frontend_name__/src/index.scss
index c1c320834c..283585fb27 100644
--- a/src/dfx/assets/project_templates/vue/src/__frontend_name__/src/index.scss
+++ b/src/dfx/assets/project_templates/vue/src/__frontend_name__/src/index.scss
@@ -35,3 +35,7 @@ button[type="submit"] {
#greeting:empty {
display: none;
}
+
+.browser-warning {
+ display: none;
+}