Merge pull request #19 from nyaomaru/deno-study-13

study: Content Security Policy

csp-reports.txt

@@ -0,0 +1,43 @@
+{
+  "csp-report": {
+    "document-uri": "http://localhost:8000/correctCSPwithReport",
+    "referrer": "http://localhost:8000/",
+    "violated-directive": "style-src-elem",
+    "effective-directive": "style-src-elem",
+    "original-policy": "default-src 'none'; style-src 'unsafe-inline' http://www.example.com; report-uri http://localhost:8000/reportHandler; script-src 'nonce-71d90af6c22f47f3b28399209fdd8dc5'; connect-src 'self'",
+    "disposition": "report",
+    "blocked-uri": "http://localhost:8000/example.css",
+    "line-number": 1,
+    "source-file": "http://localhost:8000/correctCSPwithReport",
+    "status-code": 200,
+    "script-sample": ""
+  }
+}
+{
+  "csp-report": {
+    "document-uri": "http://localhost:8000/correctCSPwithReport",
+    "referrer": "http://localhost:8000/",
+    "violated-directive": "style-src-elem",
+    "effective-directive": "style-src-elem",
+    "original-policy": "default-src 'none'; style-src 'unsafe-inline' http://www.example.com; report-uri http://localhost:8000/reportHandler; script-src 'nonce-71d90af6c22f47f3b28399209fdd8dc5'; connect-src 'self'",
+    "disposition": "report",
+    "blocked-uri": "http://localhost:8000/styles.css",
+    "line-number": 1,
+    "source-file": "http://localhost:8000/correctCSPwithReport",
+    "status-code": 200,
+    "script-sample": ""
+  }
+}
+{
+  "csp-report": {
+    "document-uri": "http://localhost:8000/correctCSPwithReport",
+    "referrer": "http://localhost:8000/",
+    "violated-directive": "img-src",
+    "effective-directive": "img-src",
+    "original-policy": "default-src 'none'; style-src 'unsafe-inline' http://www.example.com; report-uri http://localhost:8000/reportHandler; script-src 'nonce-71d90af6c22f47f3b28399209fdd8dc5'; connect-src 'self'",
+    "disposition": "report",
+    "blocked-uri": "http://localhost:8000/favicon.ico",
+    "status-code": 200,
+    "script-sample": ""
+  }
+}

src/fresh.gen.ts

@@ -14,12 +14,14 @@ import * as $api_random_uuid from "./routes/api/random-uuid.ts";
 import * as $api_users_id_ from "./routes/api/users/[id].ts";
 import * as $api_users_index from "./routes/api/users/index.ts";
 import * as $chart from "./routes/chart.tsx";
+import * as $correctCSPwithReport from "./routes/correctCSPwithReport.tsx";
 import * as $countdown from "./routes/countdown.tsx";
 import * as $greet_name_ from "./routes/greet/[name].tsx";
 import * as $greet_middleware from "./routes/greet/_middleware.ts";
 import * as $index from "./routes/index.tsx";
 import * as $partials_about_id_ from "./routes/partials/about/[id].tsx";
 import * as $projects_id_ from "./routes/projects/[id].tsx";
+import * as $reportHandler from "./routes/reportHandler.ts";
 import * as $search from "./routes/search.tsx";
 import * as $subscribe from "./routes/subscribe.tsx";
 import * as $Chart from "./islands/Chart.tsx";
@@ -42,12 +44,14 @@ const manifest = {
     "./routes/api/users/[id].ts": $api_users_id_,
     "./routes/api/users/index.ts": $api_users_index,
     "./routes/chart.tsx": $chart,
+    "./routes/correctCSPwithReport.tsx": $correctCSPwithReport,
     "./routes/countdown.tsx": $countdown,
     "./routes/greet/[name].tsx": $greet_name_,
     "./routes/greet/_middleware.ts": $greet_middleware,
     "./routes/index.tsx": $index,
     "./routes/partials/about/[id].tsx": $partials_about_id_,
     "./routes/projects/[id].tsx": $projects_id_,
+    "./routes/reportHandler.ts": $reportHandler,
     "./routes/search.tsx": $search,
     "./routes/subscribe.tsx": $subscribe,
   },

src/routes/about.tsx

@@ -40,11 +40,11 @@ export default async function AboutPage(props: PageProps, ctx: RouteContext) {
           <div>You are on the page '{props.url.href}'.</div>
           <p>foo is: {value}</p>
         </Partial>
-        <div class="mt-4">
+        <div class="mt-8">
           <NextContentButton name="Next Content" />
         </div>
       </main>
-      <div class="mt-4">
+      <div class="mt-8">
         <Link text="Back" href="/" color="secondary" />
       </div>
     </>

src/routes/correctCSPwithReport.tsx

@@ -0,0 +1,23 @@
+import { RouteConfig, RouteContext } from "$fresh/server.ts";
+import { useCSP } from "$fresh/runtime.ts";
+
+export default function Home(_req: Request, _ctx: RouteContext) {
+  useCSP((csp) => {
+    csp.reportOnly = true;
+    if (!csp.directives.styleSrc) {
+      csp.directives.styleSrc = [];
+    }
+    csp.directives.reportUri = "http://localhost:8000/reportHandler";
+    csp.directives.styleSrc.push("http://www.example.com");
+  });
+  return (
+    <>
+      <h1>This page adheres to our configured CSP. Styles will be applied.</h1>
+      <link rel="stylesheet" type="text/css" href="example.css" />
+    </>
+  );
+}
+
+export const config: RouteConfig = {
+  csp: true,
+};

src/routes/index.tsx

@@ -1,4 +1,5 @@
-import { Handlers, PageProps } from "$fresh/server.ts";
+import { Handlers, PageProps, RouteConfig } from "$fresh/server.ts";
+import { useCSP } from "$fresh/runtime.ts";
 import { useSignal } from "@preact/signals";
 import { Link } from "../components/Link.tsx";
 import Counter from "../islands/Counter.tsx";
@@ -15,6 +16,21 @@ export default function Home({ data }: PageProps<string>) {
   const name = nameList[Math.floor(Math.random() * 5)];
   const count = useSignal(0);
 
+  useCSP((csp) => {
+    if (!csp.directives.styleSrc) {
+      csp.directives.styleSrc = [];
+    }
+    if (!csp.directives.imgSrc) {
+      csp.directives.imgSrc = [];
+    }
+    if (!csp.directives.scriptSrc) {
+      csp.directives.scriptSrc = [];
+    }
+    csp.directives.styleSrc.push("http://localhost:8000/styles.css");
+    csp.directives.imgSrc.push("http://localhost:8000/logo.svg");
+    csp.directives.scriptSrc.push("http://localhost:8000");
+  });
+
   return (
     <div class="max-w-screen-md mx-auto flex flex-col items-center justify-center">
       <img
@@ -55,6 +71,7 @@ export default function Home({ data }: PageProps<string>) {
           />
           <Link text="Go Chart Page" href="chart" />
           <Link text="Go Markdown Page" href="string" />
+          <Link text="Go CSP Page" href="correctCSPwithReport" />
         </div>
       </div>
 
@@ -64,3 +81,7 @@ export default function Home({ data }: PageProps<string>) {
     </div>
   );
 }
+
+export const config: RouteConfig = {
+  csp: true,
+};

src/routes/reportHandler.ts

@@ -0,0 +1,13 @@
+import { FreshContext } from "$fresh/server.ts";
+
+export const handler = {
+  async POST(req: Request, _ctx: FreshContext) {
+    const body = await req.json();
+    const report = JSON.stringify(body, null, 2);
+
+    await Deno.writeTextFile("./csp-reports.txt", report + "\n", {
+      append: true,
+    });
+    return new Response(null, { status: 200 });
+  },
+};

src/static/example.css

@@ -0,0 +1,6 @@
+h1 {
+  font-size: 25px;
+  font-weight: normal;
+  margin-top: 5px;
+  margin-left: 25px;
+}