dfinity · ghost · Nov 18, 2024 · Nov 18, 2024 · Nov 18, 2024 · Nov 18, 2024
@@ -22,7 +22,7 @@
     "@types/react-dom": "^18.2.6",
     "@vitejs/plugin-react": "^4.0.1",
     "dotenv": "^16.3.1",
-    "sass": "^1.63.6",
+    "sass": "^1.81.0",
     "typescript": "^5.1.3",
     "vite": "^4.3.9",
     "vite-plugin-environment": "^1.1.3"

@@ -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/

@@ -4,26 +4,25 @@ import { __backend_name_ident__ } from 'declarations/__backend_name__';
 function App() {
   const [greeting, setGreeting] = useState('');
 
-  function handleSubmit(event) {
+  async function handleSubmit(event) {
     event.preventDefault();
     const name = event.target.elements.name.value;
-    __backend_name_ident__.greet(name).then((greeting) => {
-      setGreeting(greeting);
-    });
+    const greeting = await __backend_name_ident__.greet(name);
+    setGreeting(greeting);
     return false;
   }
 
   return (
-    <main>
-      <img src="/logo2.svg" alt="DFINITY logo" />
-      <br />
-      <br />
-      <form action="#" onSubmit={handleSubmit}>
-        <label htmlFor="name">Enter your name: &nbsp;</label>
-        <input id="name" alt="Name" type="text" />
-        <button type="submit">Click Me!</button>
-      </form>
-      <section id="greeting">{greeting}</section>
+    <main className="container">
+      <div className="card">
+        <h1>{greeting}</h1>
+        <form action="#" onSubmit={handleSubmit}>
+          <label htmlFor="name">Enter your name:</label>
+          <input type="text" id="name" required />
+          <button type="submit">Click Me!</button>
+        </form>
+        <img src="/logo.svg" alt="DFINITY logo" width="256" />
+      </div>
     </main>
   );
 }

@@ -1,37 +1,98 @@
-body {
-  font-family: sans-serif;
-  font-size: 1.5rem;
+:root {
+  --vc-brand-gradient: radial-gradient(at 100% 100%, hsla(265, 80%, 75%, 1) 0px, transparent 50%), radial-gradient(at 100% 0%, hsla(272, 86%, 55%, 1) 0px, transparent 50%), radial-gradient(at 0% 18%, hsla(223, 79%, 66%, 1) 0px, transparent 50%);
+  --vc-brand-purple: #4b19d6;
+
+  --rc-background-image--highlight: var(--vc-brand-gradient);
+  --rc-background--highlight: var(--vc-brand-purple);
+
+  --rc-interaction-color: #4b19d6;
+  --rc-interaction-color-hover: #3c14aa;
 }
 
-img {
-  max-width: 50vw;
-  max-height: 25vw;
-  display: block;
-  margin: auto;
+body, html {
+  margin: 0;
+  padding: 0;
+  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  height: 100%;
 }
 
-form {
+#root {
+  height: 100%;
+}
+
+.container {
+  min-height: 100%;
   display: flex;
   justify-content: center;
-  gap: 0.5em;
-  flex-flow: row wrap;
-  max-width: 40vw;
-  margin: auto;
-  align-items: baseline;
+  align-items: center;
+  background-image: var(--rc-background-image--highlight);
+  background-color: var(--rc-background--highlight);
+}
+
+.card {
+  background: white;
+  padding: 2rem;
+  border-radius: 8px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  width: 100%;
+  max-width: 320px;
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+  align-items: center;
+}
+
+.logo {
+  text-align: center;
+  margin-bottom: 1rem;
 }
 
-button[type="submit"] {
-  padding: 5px 20px;
-  margin: 10px auto;
-  float: right;
+.logo svg {
+  width: 100px;
+  height: auto;
 }
 
-#greeting {
-  margin: 10px auto;
-  padding: 10px 60px;
-  border: 1px solid #222;
+h1 {
+  color: #333;
+  text-align: center;
+  margin: 0 0 1rem;
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  width: 100%;
+
+  &:empty {
+    display: none;
+  }
+}
+
+form {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
 }
 
-#greeting:empty {
-  display: none;
+label {
+  margin-bottom: 0.5rem;
+  color: #333;
 }
+
+input {
+  padding: 0.5rem;
+  margin-bottom: 1rem;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+button {
+  padding: 0.5rem;
+  background-color: var(--rc-interaction-color);
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+button:hover {
+  background-color: var(--rc-interaction-color-hover);
+}
@@ -13,29 +13,37 @@ export default defineConfig({
   optimizeDeps: {
     esbuildOptions: {
       define: {
-        global: "globalThis",
+        global: 'globalThis',
       },
     },
   },
   server: {
     proxy: {
-      "/api": {
-        target: "http://127.0.0.1:4943",
+      '/api': {
+        target: 'http://127.0.0.1:4943',
         changeOrigin: true,
       },
     },
   },
   plugins: [
     react(),
-    environment("all", { prefix: "CANISTER_" }),
-    environment("all", { prefix: "DFX_" }),
+    environment('all', { prefix: 'CANISTER_' }),
+    environment('all', { prefix: 'DFX_' }),
   ],
+  css: {
+    preprocessorOptions: {
+      scss: {
+        api: 'modern-compiler',
+        silenceDeprecations: ['legacy-js-api'],
+      },
+    },
+  },
   resolve: {
     alias: [
       {
-        find: "declarations",
+        find: 'declarations',
         replacement: fileURLToPath(
-          new URL("../declarations", import.meta.url)
+          new URL('../declarations', import.meta.url),
         ),
       },
     ],

@@ -10,7 +10,7 @@ describe('App', () => {
         <App />
       </StrictMode>,
     );
-    expect(document.body.innerHTML).toMatchInlineSnapshot('"<div><main><img src="/logo2.svg" alt="DFINITY logo"><br><br><form action="#"><label for="name">Enter your name: &nbsp;</label><input id="name" alt="Name" type="text"><button type="submit">Click Me!</button></form><section id="greeting"></section></main></div>"');
+    expect(document.body.innerHTML).toMatchInlineSnapshot('"<div><main class="container"><div class="card"><h1></h1><form action="#"><label for="name">Enter your name:</label><input type="text" id="name" required=""><button type="submit">Click Me!</button></form><img src="/logo.svg" alt="DFINITY logo" width="256"></div></main></div>"');
     expect(1).toEqual(1);
   });
 });
@@ -3,7 +3,7 @@
 @@ -1,1 +1,2 @@
 +/// <reference types="vitest" />
  import { fileURLToPath, URL } from 'url';
-@@ -33,1 +33,5 @@
+@@ -41,1 +41,5 @@
 +  test: {
 +    environment: 'jsdom',
 +    setupFiles: 'src/setupTests.js',

@@ -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
     },

@@ -20,7 +20,7 @@
     "@sveltejs/kit": "^2.5.26",
     "@sveltejs/vite-plugin-svelte": "^3.1.2",
     "dotenv": "^16.3.1",
-    "sass": "^1.63.6",
+    "sass": "^1.81.0",
     "svelte": "^4.2.19",
     "svelte-check": "^4.0.1",
     "typescript": "^5.6.2",