Small SAP Talk: Obtaining a CSRF Token When Working with an OData Service

With the variety of tools available today for creating web versions of business applications for SAP system users, it's becoming challenging—and perhaps not very practical—to focus solely on the SAPUI5 framework.​

If a developer (or consultant) moves away from SAPUI5 towards, for example, ReactJS, Vue, or Angular, they will likely encounter the need to obtain a CSRF token when interacting with an OData service. This brief SAP Small Talk addresses that topic.​

Background

See: Cross-Site Request Forgery Protection

Example 1: Obtaining a CSRF Token

To obtain a CSRF token, you need to include a specific header in the request sent to the OData service:

'x-csrf-token': 'Fetch'

Example of a ReactJS component making a request to obtain a CSRF token

Result of running the application​:

0:00
/0:19

Example 2: Making a Request with a CSRF Token

Attempting to access an entitySet using the previously obtained CSRF token.

Example of a ReactJS component making a request to the OData service with the previously obtained CSRF token included in the header

Result of running the application:

0:00
/0:57

Example 3: Making a Request with an Incorrect CSRF Token

To simulate a scenario where an OData request is made with an incorrect CSRF token, appropriate changes are made.

Example of a ReactJS component making a request to the service with an incorrect CSRF token

Result presented below​.

0:00
/0:36

For more information about the "Small SAP Talk" series, refer to the following note:​

See: Small SAP Talk