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.

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 like {csrfTokens>/myCSRFToken/value}.

CSRF Token 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

CSRF Tokens Model

The following values are available for every CSRF token and can be used in data requests:

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