docs(examples/jokes): add validation to prevent open redirect on login (

remix-run#2499) * docs(examples/jokes): add validation to prevent open redirect on login * CLA Signed * Update examples/jokes/app/routes/login.tsx * Update docs/tutorials/jokes.md * Update docs/tutorials/jokes.md Co-authored-by: Kent C. Dodds <me+github@kentcdodds.com>
msutkowski · Mar 26, 2022 · 2173cff · 2173cff
1 parent 9fdc773
commit 2173cff
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 4 deletions.
diff --git a/contributors.yml b/contributors.yml
@@ -302,3 +302,4 @@
 - youngvform
 - zachdtaylor
 - zainfathoni
+- LewisArdern
diff --git a/docs/tutorials/jokes.md b/docs/tutorials/jokes.md
@@ -2553,6 +2553,15 @@ function validatePassword(password: unknown) {
   }
 }
 
+function validateUrl(url: any) {
+  console.log(url)
+  let urls = ['/jokes','/','https://remix.run']
+  if (urls.includes(url)) {
+    return url
+  }
+  return '/jokes'
+}
+
 type ActionData = {
   formError?: string;
   fieldErrors?: {
@@ -2576,7 +2585,7 @@ export const action: ActionFunction = async ({
   const loginType = form.get("loginType");
   const username = form.get("username");
   const password = form.get("password");
-  const redirectTo = form.get("redirectTo") || "/jokes";
+  const redirectTo = validateUrl(form.get("redirectTo") || '/jokes');
   if (
     typeof loginType !== "string" ||
     typeof username !== "string" ||
@@ -3720,6 +3729,14 @@ function validatePassword(password: unknown) {
   }
 }
 
+function validateUrl(url: any) {
+  let urls = ['/jokes','/','https://remix.run']
+  if (urls.includes(url)) {
+    return url
+  }
+  return '/jokes'
+}
+
 type ActionData = {
   formError?: string;
   fieldErrors?: {
@@ -3743,7 +3760,7 @@ export const action: ActionFunction = async ({
   const loginType = form.get("loginType");
   const username = form.get("username");
   const password = form.get("password");
-  const redirectTo = form.get("redirectTo") || "/jokes";
+  const redirectTo = validateUrl(form.get("redirectTo") || '/jokes');
   if (
     typeof loginType !== "string" ||
     typeof username !== "string" ||
@@ -5060,6 +5077,14 @@ function validatePassword(password: unknown) {
   }
 }
 
+function validateUrl(url: any) {
+  let urls = ['/jokes','/','https://remix.run']
+  if (urls.includes(url)) {
+    return url
+  }
+  return '/jokes'
+}
+
 type ActionData = {
   formError?: string;
   fieldErrors?: {
@@ -5083,7 +5108,7 @@ export const action: ActionFunction = async ({
   const loginType = form.get("loginType");
   const username = form.get("username");
   const password = form.get("password");
-  const redirectTo = form.get("redirectTo") || "/jokes";
+  const redirectTo = validateUrl(form.get("redirectTo") || '/jokes');
   if (
     typeof loginType !== "string" ||
     typeof username !== "string" ||

diff --git a/examples/jokes/app/routes/login.tsx b/examples/jokes/app/routes/login.tsx
@@ -27,6 +27,14 @@ function validatePassword(password: unknown) {
   }
 }
 
+function validateUrl(url: any) {
+  let urls = ['/jokes','/','https://remix.run']
+  if (urls.includes(url)) {
+    return url
+  }
+  return '/jokes'
+}
+
 type ActionData = {
   formError?: string;
   fieldErrors?: { username: string | undefined; password: string | undefined };
@@ -45,7 +53,7 @@ export const action: ActionFunction = async ({ request }) => {
   const loginType = form.get("loginType");
   const username = form.get("username");
   const password = form.get("password");
-  const redirectTo = form.get("redirectTo") || "/jokes";
+  const redirectTo = validateUrl(form.get("redirectTo") || '/jokes');
   if (
     typeof loginType !== "string" ||
     typeof username !== "string" ||