CSRF token cannot be resolved - Integration card

[joseprados]

OpenUI5 version:

Browser/version (+device/version): Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36

Card manifest:

{
  "_version": "1.15.0",
  "sap.app": {
    "id": "pins.widget.table.cr",
    "type": "card",
    "i18n": "i18n/i18n.properties",
    "title": "Recommendations",
    "subTitle": "subtitle",
    "applicationVersion": {
      "version": "1.0.0"
    }
  },
  "sap.ui": {
    "technology": "UI5",
    "deviceTypes": {
      "desktop": true,
      "phone": true,
      "tablet": true
    },
    "icons": {
      "icon": "sap-icon://table-view"
    }
  },
  "sap.card": {
    "type": "List",
    "configuration": {
      "destinations": {
        "PINS_BACKEND": {
          "name": "pinsBackend",
          "defaultUrl": "/"
        }
      },
      "csrfTokens": {
        "token1": {
          "data": {
            "request": {
              "url": "{{destinations.PINS_BACKEND}}/",
              "method": "HEAD",
              "headers": {
                "X-CSRF-Token": "fetch",
                "Accept": "*/*"
              },
              "withCredentials": true
            }
          }
        }
      },
      "parameters": {
        "title": {
          "value": "Top {{parameters.topX}} Correction Recommendations"
        },
        "subTitle": {
          "value": "Value driver: {{parameters.valueDriver}}"
        },
        "status": {
          "value": "System: {{parameters.lmsId}}"
        },
        "topX": {
          "value": 10
        },
        "lmsId": {
          "value": "",
          "type": "string"
        },
        "valueDriver": {
          "value": ""
        },
        "xCsrfToken": {
          "value": ""
        }
      }
    },
    "designtime": "dt/configuration",
    "data": {
      "request": {
        "url": "{{destinations.PINS_BACKEND}}/api/pia/recommendations/$batch",
        "method": "POST",
        "headers": {
          "Lms-Id": "{parameters>/lmsId/value}",
          "X-CSRF-Token": "{csrfTokens>/token1/value}"
        },
        "withCredentials": true,
        "batch": {
          "recommendations": {
            "method": "GET",
            "url": "CorrRecommendationsOverviewWithDataLatestPerKpiIns",
            "headers": {
              "Accept": "application/json",
              "Lms-Id": "{parameters>/lmsId/value}"
            },
            "parameters": {
              "$filter": "valueDriver_id eq '{parameters>/valueDriver/value}'",
              "$orderby": "objectCount desc",
              "$top": "{parameters>/topX/value}"
            }
          },
          "valueDriver": {
            "method": "GET",
            "url": "ValueDrivers('{parameters>/valueDriver/value}')",
            "headers": {
              "Accept": "application/json",
              "Lms-Id": "{parameters>/lmsId/value}"
            }
          }
        }
      }
    },
    "header": {
      "data": {
        "path": "/valueDriver"
      },
      "title": "{= format.text(${i18n>TITLE}, [${parameters>/topX/value},${text}])}",
      "subTitle": "{= format.text(${i18n>VALUEDRIVER}, [${text}])}",
      "status": {
        "text": "{{parameters.status}}"
      }
    },
    "content": {
      "data": {
        "path": "/recommendations/value"
      },
      "mode": "SingleSelect",
      "item": {
        "title": "{findingText}",
        "description": "{shortText}",
        "attributesLayoutType": "TwoColumns",
        "attributes": [
          {
            "value": "Affected objects: {objectCount}"
          }
        ],
        "actions": [
          {
            "type": "Navigation",
            "enabled": "true",
            "parameters": {
              "url": "/reports/system/{parameters>/lmsId/value}/e2eProcess/ALL/recommendations/{ID}"
            }
          }
        ]
      },
      "maxItems": "{{parameters.topX}}"
    }
  }
}

The problem:

Running it locally in http://localhost:500, I get a 404 Not Found response from the request sent by the integration card to fetch the CSRF token. The information in the network tab look as follows:

I also tried to fetch the csrf token directly sending the same request from the frontend and it worked. The question is why the integration card cannot find the endpoint to fetch the csrf token?

See request sent directly by the application, which looks quite the same as the one sent by the integration card:

I would appreciate to get some help here. Did I miss anything in the card manifest to send the csrf token request?

Thanks in advance
Cheers
José

[PetyaMarkovaBogdanova]

Hi @joseprados,
thank you for your request.
I will send it the colleagues from the involved team for a consultation, but it would be easier, if we can have an isolated example with the concrete behaviour leading to the console error, so they can follow.
Thank you!
Best regards,
Petya Markova.
(UI5 Dispatcher)

[alexandar-mitsev]

Hi @joseprados ,

Looking at both requests, the only obvious difference is the Accept request header, which says "application/json, /" in the failed request and only "/" in the successful one.
If you could test if the manual request also fails when you have Accept: "application/json, /"?
If it fails as well, then this would be the problem.
This is the default Accept header which we have, normally there were no problems with it even for csrf token fetching. But if this is the problem, you can override it with Accept: "/" (which seems you do, but did it fail to override it?, which UI5 version are you using?). Or you can see if your server can be more tolerant to this and send the token, no matter the accept header.
Eventually you can also try with the HEAD instead of GET request.

If this turns out to be a common problem, we can also check to change the default Accept for csrf token fetch.

Best Regards,
Alexandar Mitsev