Place CSP in root.html

Place the content security policy in root to make it easier to find it. Update BUILDIT with documentation
dwyl · Feb 7, 2023 · 71b44f8 · 71b44f8
1 parent ccbedb3
commit 71b44f8
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 11 deletions.
diff --git a/BUILDIT.md b/BUILDIT.md
@@ -1785,6 +1785,17 @@ file and replace the contents with the following:
     <meta charset="utf-8"/>
     <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
     <meta name="csrf-token" content={csrf_token_value()}>
+    <meta
+      http-equiv="Content-Security-Policy"
+      content="
+        default-src 'self' dwyl.com https://*.cloudflare.com plausible.io; 
+        connect-src 'self' wss://mvp.fly.dev plausible.io;
+        form-action 'self';
+        img-src *; child-src 'none';
+        script-src 'self' https://cdnjs.cloudflare.com plausible.io 'unsafe-eval' 'unsafe-inline';
+        style-src 'self' 'unsafe-inline';
+      "
+    />
     <%= live_title_tag assigns[:page_title] || "dwyl mvp"%>
     <%= render "icons.html" %>
     <link phx-track-static rel="stylesheet" href={Routes.static_path(@conn, "/assets/app.css")}/> 
@@ -1827,6 +1838,34 @@ file and replace the contents with the following:
 </html>
 ```
 
+Note that we are defining a content security policy with:
+
+```html
+<meta
+  http-equiv="Content-Security-Policy"
+  content="
+    default-src 'self' dwyl.com https://*.cloudflare.com plausible.io; 
+    connect-src 'self' wss://mvp.fly.dev plausible.io;
+    form-action 'self';
+    img-src *; child-src 'none';
+    script-src 'self' https://cdnjs.cloudflare.com plausible.io 'unsafe-eval' 'unsafe-inline';
+    style-src 'self' 'unsafe-inline';
+  "
+/>
+```
+
+This defines who can run scripts, forms, style css and images on the browser.
+
+The `default-src` value is used by default when the [fetch directives](https://developer.mozilla.org/en-US/docs/Glossary/Fetch_directive)
+are not specified.
+
+For scripts we want to allow `cloudfare` (used for cdn) and [`plausible`](https://plausible.io/) used 
+as an alternative to Google Analytics, to run javascript scripts.
+
+The `self` value allows the server itself (the Phoenix application) to run scripts.
+
+Read more about content security policy at https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP
+
 ## 8.2 Create the `icons` template
 
 To make the App more Mobile-friendly,

diff --git a/lib/app_web/templates/layout/icons.html.heex b/lib/app_web/templates/layout/icons.html.heex
@@ -1,16 +1,5 @@
 <meta charset="utf-8" />
 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-<meta
-  http-equiv="Content-Security-Policy"
-  content="
-        default-src 'self' dwyl.com https://*.cloudflare.com plausible.io; 
-        connect-src 'self' wss://mvp.fly.dev plausible.io;
-        form-action 'self';
-        img-src *; child-src 'none';
-        script-src 'self' https://cdnjs.cloudflare.com plausible.io 'unsafe-eval' 'unsafe-inline';
-        style-src 'self' 'unsafe-inline';
-      "
-/>
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <meta
   name="description"

diff --git a/lib/app_web/templates/layout/root.html.heex b/lib/app_web/templates/layout/root.html.heex
@@ -2,6 +2,17 @@
 <html lang="en">
   <head>
     <meta name="csrf-token" content={csrf_token_value()} />
+    <meta
+      http-equiv="Content-Security-Policy"
+      content="
+        default-src 'self' dwyl.com https://*.cloudflare.com plausible.io; 
+        connect-src 'self' wss://mvp.fly.dev plausible.io;
+        form-action 'self';
+        img-src *; child-src 'none';
+        script-src 'self' https://cdnjs.cloudflare.com plausible.io 'unsafe-eval' 'unsafe-inline';
+        style-src 'self' 'unsafe-inline';
+      "
+    />
 
     <.live_title prefix="dwyl – ">
       <%= assigns[:page_title] || "mvp" %>