Merge pull request #181 from curveball/remove-csrf-get-action

Remove CSRF token and enctype attributes for forms with method=GET

Makefile

@@ -12,14 +12,14 @@ test:
 
 .PHONY:lint
 lint:
-	npx eslint --quiet 'src/**/*.ts' 'test/**/*.ts'
+	npx eslint --quiet 'src/**/*.ts*' 'test/**/*.ts*'
 
 .PHONY:lint-fix
 lint-fix: fix
 
 .PHONY:fix
 fix:
-	npx eslint --quiet 'src/**/*.ts' 'test/**/*.ts' --fix
+	npx eslint --quiet 'src/**/*.ts*' 'test/**/*.ts*' --fix
 
 .PHONY:watch
 watch:

changelog.md

@@ -1,6 +1,13 @@
 Changelog
 =========
 
+1.1.1 (2024-02-01)
+------------------
+
+* HAL/Siren forms that have method=GET no longer add a CSRF token or an enctype
+  attribute.
+
+
 1.1.0 (2024-01-24)
 ------------------
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@curveball/browser",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "Automatic API browser generator. A middleware that turns your JSON responses into HTML if accessed by a browser.",
   "type": "module",
   "exports": "./dist/index.js",

src/components/forms/ketting-action-button.tsx

@@ -19,11 +19,19 @@ type FieldProps = {
 export function ButtonForm(props: FormProps) {
 
   const action = props.action;
-  return <form action={action.uri} method={action.method} encType={action.contentType} id={action.name!} className="button-form">
-    {props.csrfToken ? <input type="hidden" name="csrf-token" defaultValue={props.csrfToken} /> : ''}
-    {action.fields.map( field => <ActionField field={field} key={field.name} />) }
-    <Button method={action.method} title={action.title || action.name || null} />
-  </form>;
+  const fields = action.fields.map( field => <ActionField field={field} key={field.name} />);
+  if (action.method === 'GET') {
+    return <form action={action.uri} method={action.method} id={action.name!} className="button-form">
+      {fields}
+      <Button method={action.method} title={action.title || action.name || null} />
+    </form>;
+  } else {
+    return <form action={action.uri} method={action.method} encType={action.contentType} id={action.name!} className="button-form">
+      {props.csrfToken ? <input type="hidden" name="csrf-token" defaultValue={props.csrfToken} /> : ''}
+      {fields}
+      <Button method={action.method} title={action.title || action.name || null} />
+    </form>;
+  }
 
 }
 

src/components/forms/ketting-action.tsx

@@ -14,10 +14,10 @@ type FieldProps = {
 export function ActionForm(props: FormProps) {
 
   const action = props.action;
-  return <form action={action.uri} method={action.method} encType={action.contentType} id={action.name!} className="long-form">
+  return <form action={action.uri} method={action.method} encType={action.method !== 'GET' ? action.contentType : undefined} id={action.name!} className="long-form">
     <h3>{action.title || action.name || 'form'}</h3>
 
-    {props.csrfToken ? <input type="hidden" name="csrf-token" defaultValue={props.csrfToken} /> : ''}
+    {props.csrfToken && action.method !== 'GET' ? <input type="hidden" name="csrf-token" defaultValue={props.csrfToken} /> : ''}
     {action.fields.map( field => <ActionField field={field} key={field.name} />) }
 
     <div className="buttonRow"><Button method={action.method} titleHint={action.title} /></div>