CSRF validation fails (403 Forbidden) from SAP Build Work Zone approuter

[PetraMi]

Hello Community,

The app contains a FileUploader element. The related backend oData service has CSRF protection enabled. To enable file upload, there is a controller extension for the FileUploader where the CSRF token is fetched and explicitly added (x-csrf-token) to the POST request header. It works correctly from SAP BAS with "Preview application".

The app is now deployed to Cloud Foundry, where it is added to a SAP Build Work Zone standard edition page. The upolad from the Build Work Zone site throws the error 403, and this is found in the approuter error log:

POST request to /sap/opu/odata/sap/Z<....> completed with status 403 The request contains an invalid x-csrf-token 

I can se in the browser debugger that the request does contain the x-csrf-token parameter with a plausible value. That part looks identical as when testing from SAP BAS where the token is accepted.

I have found note 3495019 "403 error when the AppRouter generates a CSRF Token" which seems relevant. Except I am pretty sure the CSRF protection is already disabled in the xs-app.json. Here it is:

{
  "welcomeFile": "/index.html",
  "authenticationMethod": "route",
  "routes": [
    {
      "source": "^/sap/(.*)$",
      "target": "/sap/$1",
      "destination": "<name of my Cloud Connector destination>",
      "authenticationType": "xsuaa",
      "csrfProtection": false
    },
    {
      "source": "^/resources/(.*)$",
      "target": "/resources/$1",
      "authenticationType": "none",
      "destination": "ui5"
    },
    {
      "source": "^/test-resources/(.*)$",
      "target": "/test-resources/$1",
      "authenticationType": "none",
      "destination": "ui5"
    },
    {
      "source": "^(.*)$",
      "target": "$1",
      "service": "html5-apps-repo-rt",
      "authenticationType": "xsuaa"
    }
  ]
}

I did find number of similar questions, most notably:

https://community.sap.com/t5/technology-q-a/x-csrf-token-validation-success-from-standalone-app-but-...

but no solved ones, or possibly I do not understand the recommendations and need more guidance.

Please advise what to do - thank you in advance!

[smarchesini]

Can you shared how is it implemented the call / function to upload the file?

[PetraMi]

Hello @smarchesini, here is the content of the DetailsExt.controller.js file where the FileUploader behaviour is implemented. As noted earlier, handling CSRF token works without issues when running without the CF's approuter.

sap.ui.define([
    "sap/m/MessageBox"
], function (MessageBox) {
    "use strict";
    return  {

        onInit: function (oEvent) {

        },

        onFileChange: function (oEvent) {
            var oFileUploader = oEvent.getSource();
            var oFile = oFileUploader.oFileUpload.files[0];
            this._file = oFile;
            console.log("File selected:", oFile);

            /* Destroy the header before each new uplaod.
               Otherwise the parameters are just accumulating on each consecutive call
               and the CSRF tokens are not recognised by SAP Server and refused */
            oFileUploader.destroyHeaderParameters();

            var headerParmaSlug = new sap.ui.unified.FileUploaderParameter();
            headerParmaSlug.setName('slug');
            headerParmaSlug.setValue(oFileUploader.getValue());
            oFileUploader.addHeaderParameter(headerParmaSlug);

            /* Get the CSRF token value and add as new header parameter */           
            this.csrfToken = this.getView().getModel().getSecurityToken();
            var headerParmaCSRF = new sap.ui.unified.FileUploaderParameter();
            headerParmaCSRF.setName('x-csrf-token');
            headerParmaCSRF.setValue(this.csrfToken);
            oFileUploader.addHeaderParameter(headerParmaCSRF);

        },
        afterDialogClose (oEvent) {
            var oParameters = oEvent.getParameters()

        },
        onUploadStart:function () {

        },       
        onUploadPress: function () {
/*
        Not used, because FileUploader is set up to start uploading immediately 
        after choosing a file and the button is hidden 
*/
        },
        onUploadComplete: function (oEvent) {
            var sResponse = oEvent.getParameter("response");
            var sResponseRaw = oEvent.getParameter("responseRaw");
            var sStatus = oEvent.getParameter("status");
            if (sResponse) {
                MessageBox.show("Upload complete: " + sResponse);
                var oModel = this.getView().getModel();
                oModel.refresh(true);
            } else {
                MessageBox.show("Upload failed." + sResponseRaw );
            }
        }
    }
});

[dr_vup]

Hi!

Just a heads up - as I am also on my way having a similar issue, I found out the managed approuter does not allow / support the deactivation of `x-csrf-token` - Check out this chapter on SAP Help: https://help.sap.com/docs/cloud-portal-service/sap-cloud-portal-service-on-cloud-foundry/configure-a... (bottom):

The managed application router (HTML5 Applications Runtime) enables CSRF protection for any HTTP method that is not GET or HEAD and the route is not public. 

Looks like, we've to live with that fact. However, I am having the same issue, running into a "403 - (Fortbidden)" Issue, by trying to POST something to a CPI endpoint. 

[PetraMi]

Hello @dr_vup, thank you for commenting. My interpretation of note 3495019 (403 error when the AppRouter generates a CSRF Token) was that the CSRF protection on the approuter can be disabled.

Have you tried the xs-app.json setting recommended in the note ("csrfProtection": false) ? Did it make a difference for your issue?