chore: update security policy for compatibility with safari

src/dfx/assets/project_templates/react/src/__frontend_name__/public/.ic-assets.json5

@@ -1,6 +1,8 @@
 [
     {
         "match": "**/*",
+        "security_policy": "standard",
+        "disable_security_policy_warning": true,
         "headers": {
             // Security: The Content Security Policy (CSP) given below aims at working with many apps rather than providing maximal security.
             // We recommend tightening the CSP for your specific application. Some recommendations are as follows:
@@ -21,7 +23,7 @@
             // Notes about the CSP below:
             // - We added img-src data: because data: images are used often.
             // - frame-ancestors: none mitigates clickjacking attacks. See https://owasp.org/www-community/attacks/Clickjacking.
-            "Content-Security-Policy": "default-src 'self';script-src 'self';connect-src 'self' http://localhost:* https://icp0.io https://*.icp0.io https://icp-api.io;img-src 'self' data:;style-src * 'unsafe-inline';style-src-elem * 'unsafe-inline';font-src *;object-src 'none';base-uri 'self';frame-ancestors 'none';form-action 'self';upgrade-insecure-requests;",
+            "Content-Security-Policy": "default-src 'self';script-src 'self' 'unsafe-inline';connect-src 'self' http://localhost:* https://icp0.io https://*.icp0.io https://icp-api.io;img-src 'self' data:;style-src * 'unsafe-inline';style-src-elem * 'unsafe-inline';font-src *;object-src 'none';base-uri 'self';frame-ancestors 'none';form-action 'self';",
 
             // Security: The permissions policy disables all features for security reasons. If your site needs such permissions, activate them.
             // To configure permissions go here https://www.permissionspolicy.com/

src/dfx/assets/project_templates/react/src/__frontend_name__/src/index.scss

@@ -56,6 +56,9 @@ h1 {
   color: #333;
   text-align: center;
   margin: 0 0 1rem;
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  width: 100%;
 
   &:empty {
     display: none;

src/dfx/assets/project_templates/simple_assets/src/__frontend_name__/assets/.ic-assets.json5

@@ -1,18 +1,54 @@
 [
     {
         "match": "**/*",
-
-        // Provides a base set of security headers that will work for most dapps.
-        // Any headers you manually specify will override the headers provided by the policy.
-        // See 'dfx info security-policy' to see the policy and for advice on how to harden the headers.
-        // Once you improved the headers for your dapp, set the security policy to "hardened" to disable the warning.
-        // Options are: "hardened" | "standard" | "disabled".
         "security_policy": "standard",
+        "disable_security_policy_warning": true,
+        "headers": {
+            // Security: The Content Security Policy (CSP) given below aims at working with many apps rather than providing maximal security.
+            // We recommend tightening the CSP for your specific application. Some recommendations are as follows:
+            // - Use the CSP Evaluator (https://csp-evaluator.withgoogle.com/) to validate the CSP you define.
+            // - Follow the “Strict CSP” recommendations (https://csp.withgoogle.com/docs/strict-csp.html). However, note that in the context of the IC,
+            //   nonces cannot be used because the response bodies must be static to work well with HTTP asset certification.
+            //   Thus, we recommend to include script hashes (in combination with strict-dynamic) in the CSP as described
+            //   in https://csp.withgoogle.com/docs/faq.html in section “What if my site is static and I can't add nonces to scripts?”.
+            //   See for example the II CSP (https://github.com/dfinity/internet-identity/blob/main/src/internet_identity/src/http.rs).
+            // - It is recommended to tighten the connect-src directive. With the current CSP configuration the browser can
+            //   make requests to https://*.icp0.io, hence being able to call any canister via https://icp0.io/api/v2/canister/{canister-ID}.
+            //   This could potentially be used in combination with another vulnerability (e.g. XSS) to exfiltrate private data.
+            //   The developer can configure this policy to only allow requests to their specific canisters,
+            //   e.g: connect-src 'self' https://icp-api.io/api/v2/canister/{my-canister-ID}, where {my-canister-ID} has the following format: aaaaa-aaaaa-aaaaa-aaaaa-aaa
+            // - It is recommended to configure style-src, style-src-elem and font-src directives with the resources your canister is going to use
+            //   instead of using the wild card (*) option. Normally this will include 'self' but also other third party styles or fonts resources (e.g: https://fonts.googleapis.com or other CDNs)
+
+            // Notes about the CSP below:
+            // - We added img-src data: because data: images are used often.
+            // - frame-ancestors: none mitigates clickjacking attacks. See https://owasp.org/www-community/attacks/Clickjacking.
+            "Content-Security-Policy": "default-src 'self';script-src 'self' 'unsafe-inline';connect-src 'self' http://localhost:* https://icp0.io https://*.icp0.io https://icp-api.io;img-src 'self' data:;style-src * 'unsafe-inline';style-src-elem * 'unsafe-inline';font-src *;object-src 'none';base-uri 'self';frame-ancestors 'none';form-action 'self';",
+
+            // Security: The permissions policy disables all features for security reasons. If your site needs such permissions, activate them.
+            // To configure permissions go here https://www.permissionspolicy.com/
+            "Permissions-Policy": "accelerometer=(), ambient-light-sensor=(), autoplay=(), battery=(), camera=(), cross-origin-isolated=(), display-capture=(), document-domain=(), encrypted-media=(), execution-while-not-rendered=(), execution-while-out-of-viewport=(), fullscreen=(), geolocation=(), gyroscope=(), keyboard-map=(), magnetometer=(), microphone=(), midi=(), navigation-override=(), payment=(), picture-in-picture=(), publickey-credentials-get=(), screen-wake-lock=(), sync-xhr=(), usb=(), web-share=(), xr-spatial-tracking=(), clipboard-read=(), clipboard-write=(), gamepad=(), speaker-selection=(), conversion-measurement=(), focus-without-user-activation=(), hid=(), idle-detection=(), interest-cohort=(), serial=(), sync-script=(), trust-token-redemption=(), window-placement=(), vertical-scroll=()",
+
+            // Security: Mitigates clickjacking attacks.
+            // See: https://owasp.org/www-community/attacks/Clickjacking.
+            "X-Frame-Options": "DENY",
+
+            // Security: Avoids forwarding referrer information to other origins.
+            // See: https://owasp.org/www-project-secure-headers/#referrer-policy.
+            "Referrer-Policy": "same-origin",
+
+            // Security: Tells the user’s browser that it must always use HTTPS with your site.
+            // See: https://owasp.org/www-project-secure-headers/#http-strict-transport-security
+            "Strict-Transport-Security": "max-age=31536000; includeSubDomains",
 
-        // Uncomment to disable the warning about using the
-        // standard security policy, if you understand the risk
-        // "disable_security_policy_warning": true,
+            // Security: Prevents the browser from interpreting files as a different MIME type to what is specified in the Content-Type header.
+            // See: https://owasp.org/www-project-secure-headers/#x-content-type-options
+            "X-Content-Type-Options": "nosniff",
 
+            // Security: Enables browser features to mitigate some of the XSS attacks. Note that it has to be in mode=block.
+            // See: https://owasp.org/www-community/attacks/xss/
+            "X-XSS-Protection": "1; mode=block"
+        },
         // Uncomment to redirect all requests from .raw.icp0.io to .icp0.io
         // "allow_raw_access": false
     },

src/dfx/assets/project_templates/svelte/src/__frontend_name__/src/index.scss

@@ -56,6 +56,9 @@ h1 {
   color: #333;
   text-align: center;
   margin: 0 0 1rem;
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  width: 100%;
 
   &:empty {
     display: none;

src/dfx/assets/project_templates/svelte/src/__frontend_name__/static/.ic-assets.json5

@@ -1,15 +1,7 @@
 [
     {
         "match": "**/*",
-        // Provides a base set of security headers that will work for most dapps.
-        // Any headers you manually specify will override the headers provided by the policy.
-        // See 'dfx info security-policy' to see the policy and for advice on how to harden the headers.
-        // Once you improved the headers for your dapp, set the security policy to "hardened" to disable the warning.
-        // Options are: "hardened" | "standard" | "disabled".
         "security_policy": "standard",
-        // Uncomment to disable the warning about using the
-        // standard security policy, if you understand the risk
-        // "disable_security_policy_warning": true,
         // Uncomment to redirect all requests from .raw.icp0.io to .icp0.io
         // "allow_raw_access": false
     },

src/dfx/assets/project_templates/vanilla_js/src/__frontend_name__/assets/.ic-assets.json5

@@ -1,18 +1,54 @@
 [
     {
         "match": "**/*",
-
-        // Provides a base set of security headers that will work for most dapps.
-        // Any headers you manually specify will override the headers provided by the policy.
-        // See 'dfx info security-policy' to see the policy and for advice on how to harden the headers.
-        // Once you improved the headers for your dapp, set the security policy to "hardened" to disable the warning.
-        // Options are: "hardened" | "standard" | "disabled".
         "security_policy": "standard",
-
-        // Uncomment to disable the warning about using the
-        // standard security policy, if you understand the risk
-        // "disable_security_policy_warning": true,
+        "disable_security_policy_warning": true,
+        "headers": {
+            // Security: The Content Security Policy (CSP) given below aims at working with many apps rather than providing maximal security.
+            // We recommend tightening the CSP for your specific application. Some recommendations are as follows:
+            // - Use the CSP Evaluator (https://csp-evaluator.withgoogle.com/) to validate the CSP you define.
+            // - Follow the “Strict CSP” recommendations (https://csp.withgoogle.com/docs/strict-csp.html). However, note that in the context of the IC,
+            //   nonces cannot be used because the response bodies must be static to work well with HTTP asset certification.
+            //   Thus, we recommend to include script hashes (in combination with strict-dynamic) in the CSP as described
+            //   in https://csp.withgoogle.com/docs/faq.html in section “What if my site is static and I can't add nonces to scripts?”.
+            //   See for example the II CSP (https://github.com/dfinity/internet-identity/blob/main/src/internet_identity/src/http.rs).
+            // - It is recommended to tighten the connect-src directive. With the current CSP configuration the browser can
+            //   make requests to https://*.icp0.io, hence being able to call any canister via https://icp0.io/api/v2/canister/{canister-ID}.
+            //   This could potentially be used in combination with another vulnerability (e.g. XSS) to exfiltrate private data.
+            //   The developer can configure this policy to only allow requests to their specific canisters,
+            //   e.g: connect-src 'self' https://icp-api.io/api/v2/canister/{my-canister-ID}, where {my-canister-ID} has the following format: aaaaa-aaaaa-aaaaa-aaaaa-aaa
+            // - It is recommended to configure style-src, style-src-elem and font-src directives with the resources your canister is going to use
+            //   instead of using the wild card (*) option. Normally this will include 'self' but also other third party styles or fonts resources (e.g: https://fonts.googleapis.com or other CDNs)
+
+            // Notes about the CSP below:
+            // - We added img-src data: because data: images are used often.
+            // - frame-ancestors: none mitigates clickjacking attacks. See https://owasp.org/www-community/attacks/Clickjacking.
+            "Content-Security-Policy": "default-src 'self';script-src 'self' 'unsafe-inline';connect-src 'self' http://localhost:* https://icp0.io https://*.icp0.io https://icp-api.io;img-src 'self' data:;style-src * 'unsafe-inline';style-src-elem * 'unsafe-inline';font-src *;object-src 'none';base-uri 'self';frame-ancestors 'none';form-action 'self';",
+
+            // Security: The permissions policy disables all features for security reasons. If your site needs such permissions, activate them.
+            // To configure permissions go here https://www.permissionspolicy.com/
+            "Permissions-Policy": "accelerometer=(), ambient-light-sensor=(), autoplay=(), battery=(), camera=(), cross-origin-isolated=(), display-capture=(), document-domain=(), encrypted-media=(), execution-while-not-rendered=(), execution-while-out-of-viewport=(), fullscreen=(), geolocation=(), gyroscope=(), keyboard-map=(), magnetometer=(), microphone=(), midi=(), navigation-override=(), payment=(), picture-in-picture=(), publickey-credentials-get=(), screen-wake-lock=(), sync-xhr=(), usb=(), web-share=(), xr-spatial-tracking=(), clipboard-read=(), clipboard-write=(), gamepad=(), speaker-selection=(), conversion-measurement=(), focus-without-user-activation=(), hid=(), idle-detection=(), interest-cohort=(), serial=(), sync-script=(), trust-token-redemption=(), window-placement=(), vertical-scroll=()",
+
+            // Security: Mitigates clickjacking attacks.
+            // See: https://owasp.org/www-community/attacks/Clickjacking.
+            "X-Frame-Options": "DENY",
+
+            // Security: Avoids forwarding referrer information to other origins.
+            // See: https://owasp.org/www-project-secure-headers/#referrer-policy.
+            "Referrer-Policy": "same-origin",
+
+            // Security: Tells the user’s browser that it must always use HTTPS with your site.
+            // See: https://owasp.org/www-project-secure-headers/#http-strict-transport-security
+            "Strict-Transport-Security": "max-age=31536000; includeSubDomains",
+
+            // Security: Prevents the browser from interpreting files as a different MIME type to what is specified in the Content-Type header.
+            // See: https://owasp.org/www-project-secure-headers/#x-content-type-options
+            "X-Content-Type-Options": "nosniff",
 
+            // Security: Enables browser features to mitigate some of the XSS attacks. Note that it has to be in mode=block.
+            // See: https://owasp.org/www-community/attacks/xss/
+            "X-XSS-Protection": "1; mode=block"
+        },
         // Uncomment to redirect all requests from .raw.icp0.io to .icp0.io
         // "allow_raw_access": false
     },

src/dfx/assets/project_templates/vanilla_js/src/__frontend_name__/src/index.scss

@@ -56,6 +56,9 @@ h1 {
   color: #333;
   text-align: center;
   margin: 0 0 1rem;
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  width: 100%;
 
   &:empty {
     display: none;