diff --git a/src/dfx/assets/project_templates/react/src/__frontend_name__/public/.ic-assets.json5 b/src/dfx/assets/project_templates/react/src/__frontend_name__/public/.ic-assets.json5 index 9ec78c35d2..a9e3a76251 100644 --- a/src/dfx/assets/project_templates/react/src/__frontend_name__/public/.ic-assets.json5 +++ b/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/ 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 fecadb1fdb..a70c38bb8a 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 @@ -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; diff --git a/src/dfx/assets/project_templates/simple_assets/src/__frontend_name__/assets/.ic-assets.json5 b/src/dfx/assets/project_templates/simple_assets/src/__frontend_name__/assets/.ic-assets.json5 index c74c1e1181..a9e3a76251 100644 --- a/src/dfx/assets/project_templates/simple_assets/src/__frontend_name__/assets/.ic-assets.json5 +++ b/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 }, 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 fecadb1fdb..a70c38bb8a 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 @@ -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; diff --git a/src/dfx/assets/project_templates/svelte/src/__frontend_name__/static/.ic-assets.json5 b/src/dfx/assets/project_templates/svelte/src/__frontend_name__/static/.ic-assets.json5 index fb70803324..a151bbf358 100644 --- a/src/dfx/assets/project_templates/svelte/src/__frontend_name__/static/.ic-assets.json5 +++ b/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 }, diff --git a/src/dfx/assets/project_templates/vanilla_js/src/__frontend_name__/assets/.ic-assets.json5 b/src/dfx/assets/project_templates/vanilla_js/src/__frontend_name__/assets/.ic-assets.json5 index 12f321437d..a9e3a76251 100644 --- a/src/dfx/assets/project_templates/vanilla_js/src/__frontend_name__/assets/.ic-assets.json5 +++ b/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 }, 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 fecadb1fdb..a70c38bb8a 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 @@ -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; diff --git a/src/dfx/assets/project_templates/vue/src/__frontend_name__/public/.ic-assets.json5 b/src/dfx/assets/project_templates/vue/src/__frontend_name__/public/.ic-assets.json5 index c74c1e1181..a9e3a76251 100644 --- a/src/dfx/assets/project_templates/vue/src/__frontend_name__/public/.ic-assets.json5 +++ b/src/dfx/assets/project_templates/vue/src/__frontend_name__/public/.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 }, 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 2af64e1da4..9fcd344f7b 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 @@ -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;