CSRF Tokens

A CSRF (Cross-Site Request Forgery) Token is a secret, unique and unpredictable value that server-side application generates in order to protect CSRF vulnerable resources. The tokens are generated and submitted by the server-side application in a subsequent HTTP request made by the client.

Defining CSRF Tokens

Card developers describe the CSRF tokens in the configuration/csrfTokens subsection of the manifest. These tokens can be referred inside a data request using a binding syntax, such as {csrfTokens>/myCSRFToken/value}.

Properties

Property	Type	Required	Description	Schema Version	Since
data	Data	Yes	Data request to obtain the token. Note: By default the token will be taken from the `X-CSRF-Token` response header.	1.38.0	1.97

Using CSRF Tokens

CSRF tokens are stored in the csrfTokens model and can be referenced by their key using a binding syntax, such as {csrfTokens>/myCSRFToken/value}. This syntax is resolved only within data requests in the "sap.card" namespace.

Additionally, the same syntax can be used in the Card#request() method.

CSRF Tokens Model

The following values are available for every CSRF token:

Path	Description	Schema Version	Since
{csrfTokens>/keyOfTheToken/value}	The value of the token.	1.62.0	1.121

Note: The syntax {{csrfTokens.myCSRFToken}} is deprecated as of version 1.121.0.

Example

An example with a card which fetches data and uses CSRF Tokens:

"sap.card": {
	"type": "List",
	"configuration": {
		"destinations": {
			"ProductsMockServerWithCSRF": {
				"name": "ProductsMockServerWithCSRF",
				"label": "Products Mock CSRF",
				"defaultUrl": "/getDataWithCSRF"
			}
		},
		"csrfTokens": {
			"token1": {
				"data": {
					"request": {
						"url": "{{destinations.ProductsMockServerWithCSRF}}/Token",
						"method": "HEAD",
						"headers": {
							"X-CSRF-Token": "Fetch"
						}
					}
				}
			}
		}
	},
	"data": {
		"request": {
			"url": "{{destinations.ProductsMockServerWithCSRF}}/Products",
			"parameters": {
				"$format": "json"
			},
			"method": "GET",
			"headers": {
				"X-CSRF-Token": "{csrfTokens>/token1/value}"
			}
		},
		"path": "/data"
	},
	"header": {
		"title": "Products",
		"subtitle": "Weight Information",
		"icon": {
			"src": "sap-icon://product"
		}
	},
	"content": {
		"item": {
			"title": "{Name}",
			"info": {
				"value": "{= format.unit(${Weight}, ${WeightUnit})}"
			}
		},
		"maxItems": 4
	}
}

Try it Out