incalculable-petabyte-84501
07/08/2024, 6:40 AMchilly-king-10285
07/08/2024, 6:40 AMchilly-king-10285
07/08/2024, 6:41 AMcsrf_token
with the hidden
attribute. This CSRF protection helps to prevent code injection attacks. However, while Ory provides CSRF protection, it's always a good practice to implement additional security measures on your end to protect your application from various types of attacks, including code injections. This could include validating and sanitizing user inputs, using parameterized queries, and so on. Here is an example of how you can map the UI nodes for CSRF protection: javascript import { Configuration, FrontendApi, LoginFlow, UiNodeInputAttributes, } from "@ory/client" import { filterNodesByGroups, isUiNodeInputAttributes, } from "@ory/integrations/ui" import { useEffect, useState } from "react" const frontend = new FrontendApi( new Configuration({ basePath: "<http://localhost:4000>", // Use your local Ory Tunnel URL baseOptions: { withCredentials: true, }, }), ) function CsrfMapping() { const [flow, setFlow] = useState<LoginFlow>() useEffect(() => { frontend.createBrowserLoginFlow().then(({ data: flow }) => setFlow(flow)) }, []) return flow ? ( <form action={flow.ui.action} method={flow.ui.method}> {filterNodesByGroups({ nodes: flow.ui.nodes, // we will also map default fields here but not oidc and password fields groups: ["default"], attributes: ["hidden"], // only want hidden fields }).map((node) => { if ( isUiNodeInputAttributes(node.attributes) && (node.attributes as UiNodeInputAttributes).type === "hidden" && (node.attributes as UiNodeInputAttributes).name === "csrf_token" ) { return ( <input type={node.attributes.type} name={node.attributes.name} value={node.attributes.value} /> ) } })} </form> ) : (
[Source](https://www.ory.sh/docs/kratos/bring-your-own-ui/custom-ui-basic-integration#cross-site-request-forgery-errors)incalculable-petabyte-84501
07/08/2024, 6:43 AMchilly-king-10285
07/08/2024, 6:43 AMchilly-king-10285
07/08/2024, 6:43 AM