Add example of XSS vulnerability

database/blogPosts.ts

@@ -107,3 +107,15 @@ export async function getBlogPostsBySessionToken(sessionToken: string) {
   `;
   return blogPosts;
 }
+
+export async function getSpecialBlogPosts(id: number) {
+  const blogPosts = await sql<BlogPost[]>`
+    SELECT
+      *
+    FROM
+      blog_posts
+    WHERE
+      id = ${id}
+  `;
+  return blogPosts;
+}

migrations/003-create-table-blog-posts.ts

@@ -36,6 +36,20 @@ const blogPosts = [
     is_published: true,
     user_id: 2,
   },
+  {
+    title: "Special Blogpost 2",
+    text_content:
+      'This is a <b>special</b> one <img src="x" onerror=alert(document.cookie) />',
+    is_published: true,
+    user_id: 1,
+  },
+  {
+    title: "Special Blogpost",
+    text_content:
+      'This is another **special one** - markdown formatted<img src="x" onerror=alert(document.cookie) />',
+    is_published: true,
+    user_id: 1,
+  },
 ];
 
 export async function up(sql: Sql<Record<string, string>>) {

package.json

@@ -14,13 +14,15 @@
     "@types/dotenv-safe": "8.1.2",
     "bcrypt": "5.1.0",
     "cookie": "0.5.0",
+    "dompurify": "^2.4.0",
     "dotenv-cli": "6.0.0",
     "dotenv-safe": "8.2.0",
     "ley": "0.8.1",
     "next": "12.3.1",
     "postgres": "3.3.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-markdown": "^8.0.3",
     "sharp": "0.31.1",
     "tsm": "2.2.2"
   },

pages/_app.tsx

@@ -66,6 +66,13 @@ export default function App({ Component, pageProps }: AppProps) {
           <a style={{ marginRight: 15 }}>Example 5</a>
         </LinkIfNotCurrent>
 
+        <LinkIfNotCurrent
+          href="/example-6-xss/vulnerable"
+          baseHref="/example-6-xss/"
+        >
+          <a style={{ marginRight: 15 }}>Example 6</a>
+        </LinkIfNotCurrent>
+
         <div style={{ marginLeft: 'auto' }}>
           {!user && (
             <>

pages/example-6-xss/common.tsx

@@ -0,0 +1,53 @@
+import LinkIfNotCurrent from '../../components/LinkIfNotCurrent';
+import { BlogPost } from '../../database/blogPosts';
+
+type Props =
+  | {
+      error: string;
+    }
+  | {
+      blogPosts: BlogPost[];
+    };
+
+export function CommonContent(props: Props) {
+  return (
+    <>
+      <h1>XSS - getServerSideProps</h1>
+
+      <ul>
+        <li>
+          <LinkIfNotCurrent href="/example-6-xss/vulnerable">
+            Vulnerable
+          </LinkIfNotCurrent>
+        </li>
+        <li>
+          <LinkIfNotCurrent href="/example-6-xss/solution-1">
+            Solution 1
+          </LinkIfNotCurrent>
+        </li>
+        <li>
+          <LinkIfNotCurrent href="/example-6-xss/solution-2">
+            Solution 2
+          </LinkIfNotCurrent>
+        </li>
+        <li>
+          <LinkIfNotCurrent href="/example-6-xss/solution-3">
+            Solution 3
+          </LinkIfNotCurrent>
+        </li>
+      </ul>
+
+      <hr />
+
+      <div>
+        The following blog posts should only be visible for logged-in users.
+        <br />
+        <br />
+        If a user is not logged in, an error message should appear.
+      </div>
+
+      <h2>Blog Posts</h2>
+    </>
+  );
+}
+

pages/example-6-xss/solution-1.tsx

@@ -0,0 +1,40 @@
+import { BlogPost, getSpecialBlogPosts } from '../../database/blogPosts';
+import { CommonContent } from './common';
+
+type Props =
+  | {
+      error: string;
+    }
+  | {
+      blogPosts: BlogPost[];
+    };
+
+export default function MissingAuthenticationGssp(props: Props) {
+  return (
+    <div>
+      <CommonContent />
+
+      {'error' in props && <div style={{ color: 'red' }}>{props.error}</div>}
+
+      {'blogPosts' in props &&
+        props.blogPosts.map((blogPost) => {
+          return (
+            <div key={`blog-post-${blogPost.id}`}>
+              <h2>{blogPost.title}</h2>
+              <div>Published: {String(blogPost.isPublished)}</div>
+              <div>{blogPost.textContent}</div>
+            </div>
+          );
+        })}
+    </div>
+  );
+}
+
+export async function getServerSideProps() {
+  const blogPosts = await getSpecialBlogPosts(6);
+  return {
+    props: {
+      blogPosts: blogPosts,
+    },
+  };
+}

pages/example-6-xss/solution-2.tsx

@@ -0,0 +1,41 @@
+import { BlogPost, getSpecialBlogPosts } from '../../database/blogPosts';
+import { CommonContent } from './common';
+import DOMPurify from "dompurify"
+
+type Props =
+  | {
+      error: string;
+    }
+  | {
+      blogPosts: BlogPost[];
+    };
+
+export default function MissingAuthenticationGssp(props: Props) {
+  return (
+    <div>
+      <CommonContent />
+
+      {'error' in props && <div style={{ color: 'red' }}>{props.error}</div>}
+
+      {'blogPosts' in props &&
+        props.blogPosts.map((blogPost) => {
+          return (
+            <div key={`blog-post-${blogPost.id}`}>
+              <h2>{blogPost.title}</h2>
+              <div>Published: {String(blogPost.isPublished)}</div>
+              <div><p dangerouslySetInnerHTML={{__html: DOMPurify.sanitize(blogPost.textContent)}}></p></div>
+            </div>
+          );
+        })}
+    </div>
+  );
+}
+
+export async function getServerSideProps() {
+  const blogPosts = await getSpecialBlogPosts(6);
+  return {
+    props: {
+      blogPosts: blogPosts,
+    },
+  };
+}

pages/example-6-xss/solution-3.tsx

@@ -0,0 +1,45 @@
+import { BlogPost, getSpecialBlogPosts } from '../../database/blogPosts';
+import { CommonContent } from './common';
+import ReactMarkdown from "react-markdown"
+
+type Props =
+  | {
+      error: string;
+    }
+  | {
+      blogPosts: BlogPost[];
+    };
+
+export default function MissingAuthenticationGssp(props: Props) {
+  return (
+    <div>
+      <CommonContent />
+
+      {'error' in props && <div style={{ color: 'red' }}>{props.error}</div>}
+
+      {'blogPosts' in props &&
+        props.blogPosts.map((blogPost) => {
+          // be careful which markdown library you use and how you use it
+          // by default the markdown standard supports html tags too
+          // so never assign markdown directly to innerHTML
+          // but the default usage of "ReactMarkdown" is safe
+          return (
+            <div key={`blog-post-${blogPost.id}`}>
+              <h2>{blogPost.title}</h2>
+              <div>Published: {String(blogPost.isPublished)}</div>
+              <ReactMarkdown children={blogPost.textContent}/>
+            </div>
+          );
+        })}
+    </div>
+  );
+}
+
+export async function getServerSideProps() {
+  const blogPosts = await getSpecialBlogPosts(7);
+  return {
+    props: {
+      blogPosts: blogPosts,
+    },
+  };
+}

pages/example-6-xss/vulnerable.tsx

@@ -0,0 +1,40 @@
+import { BlogPost, getSpecialBlogPosts } from '../../database/blogPosts';
+import {CommonContent} from './common';
+
+type Props =
+  | {
+      error: string;
+    }
+  | {
+      blogPosts: BlogPost[];
+    };
+
+export default function MissingAuthenticationGssp(props: Props) {
+  return (
+    <div>
+      <CommonContent />
+
+      {'error' in props && <div style={{ color: 'red' }}>{props.error}</div>}
+
+      {'blogPosts' in props &&
+        props.blogPosts.map((blogPost) => {
+          return (
+            <div key={`blog-post-${blogPost.id}`}>
+              <h2>{blogPost.title} - Vulnerable</h2>
+              <div>Published: {String(blogPost.isPublished)}</div>
+              <div><p dangerouslySetInnerHTML={{__html: blogPost.textContent}}></p></div>
+            </div>
+          );
+        })}
+    </div>
+  );
+}
+
+export async function getServerSideProps() {
+  const blogPosts = await getSpecialBlogPosts(6);
+  return {
+    props: {
+      blogPosts: blogPosts,
+    },
+  };
+}

pages/index.tsx

@@ -29,6 +29,11 @@ export default function Home() {
             Example 5: Data Exposure
           </Link>
         </li>
+        <li>
+          <Link href="/example-6-xss/vulnerable">
+            Example 6: XSS
+          </Link>
+        </li>
       </ol>
     </div>
   );