Base solution for your next web application
Open Closed

AntiForgery Token in Angular #11073


User avatar
0
cangunaydin created

Prerequisites

Please answer the following questions before submitting an issue. YOU MAY DELETE THE PREREQUISITES SECTION.

  • What is your product version? v11
  • What is your product type (Angular or MVC)? Angular
  • What is product framework type (.net framework or .net core)? .net 6

Hello, I have checked couple of documentation including aspnet boilerplate, here i have couple of questions. In my angular app, When i open my google chrome in incognito mode and try to get abp.security.antiForgery.getToken() it returns null. Also when i check my cookies abp.utils.getCookieValue(abp.security.antiForgery.tokenCookieName); this is also null. Probably abp.security.antiForgery.getToken() calls abp.utils.getCookieValue(abp.security.antiForgery.tokenCookieName) so my question is where can i get the antiforgery token? also when i look at the back end calls it doesn't include X-XSRF-TOKEN header. Is this normal? I bumped into this problem when i try to use devexpress file uploader

    uploadFile = (file:File, uploadInfo:UploadInfo) => {
        let formData = new FormData();


        for (let key of Object.keys(this.data)) {
            formData.append(key, this.data[key].toString());
        }

        formData.append('chunkSize', this.chunkSize.toString());
       formData.append('file', uploadInfo.chunkBlob, file.name);

       const antiForgeryToken=abp.security.antiForgery.getToken();

        const headers = new HttpHeaders()
            .set('Authorization', 'Bearer ' + abp.auth.getToken())
            .set('Content-Range', this.getContentRange(file, uploadInfo))
            .set(abp.security.antiForgery.tokenHeaderName,antiForgeryToken );

        return this._httpClient
            .post(AppConsts.remoteServiceBaseUrl + this.url, formData, { headers: headers })
            .toPromise();
    };

here is the code that i am trying to send to the server, but abp.security.antiForgery.getToken() is always null. I have checked AppPreBootstrap to find out how the cookie value is set, i couldn't find anything over there. Also when i look at the backend code i see AntiForgeryController, what is this controller used for? can you explain also the purpose of this controller? and How antiforgery works on anz?


4 Answer(s)
  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi @cangunaydin

    Angular app doesn't use AntiForgery Tokens. It is only valid for MVC apps. So, this is by design. Could you share the problem you are having with devexpress file uploader ?

    Thanks,

  • User Avatar
    0
    cangunaydin created

    Hello @ismcagdas

    Thank you for the reply. I was wondering, if this behavior is new? antiforgery token is not used on anz version 8 or 9? Was it like this from the start of anz or if sth has changed on the latest version? Cause normally I am working on google chrome to test the things that i developed and when i try to get the antiforgery token in chrome browser, it gives me a valid value and it is not null.

    Probably on my chrome browser, cookie with antiforgery token has been set long time ago. When i try to open the application on incognito mode then cookie value is null. so i can not upload file in incognito mode but i can upload the file when i open the app with my normal chrome browser.

    Normally we used the devex file uploader to make chunk uploads on the app so for every chunk that is gonna be sent to the server side, we decided to add authentication token value first without antiforgery. Then one of our developers try to upload a file and he got an error on the server side.

    ERROR 2022-05-14 18:19:42,118 [orker] idateAntiforgeryTokenAuthorizationFilter - The required antiforgery request token was not provided in either form field "__RequestVerificationToken" or header value "X-XSRF-TOKEN". Microsoft.AspNetCore.Antiforgery.AntiforgeryValidationException: The required antiforgery request token was not provided in either form field "__RequestVerificationToken" or header value "X-XSRF-TOKEN". at Microsoft.AspNetCore.Antiforgery.DefaultAntiforgery.ValidateRequestAsync(HttpContext httpContext) at Abp.AspNetCore.Mvc.Antiforgery.AbpValidateAntiforgeryTokenAuthorizationFilter.OnAuthorizationAsync(AuthorizationFilterContext context) INFO 2022-05-14 18:19:42,126 [orker] c.Infrastructure.ControllerActionInvoker - Authorization failed for the request at filter 'Abp.AspNetCore.Mvc.Antiforgery.AbpAutoValidateAntiforgeryTokenAuthorizationFilter'.

    then we decided also to add an antiforgery token with the request. as i mentioned in my first post. Then as you can expect it didn't work if you do not have an old cookie value that has been set for the site. Right now we have removed all the cookies and remove the antiforgery token code that we are sending with the request.Now everything is working fine. But it is still a mystery how that cookie value is written if anz didn't use antiforgery token at all in all versions?

  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi @cangunaydin

    As far as I remember, it was like that from the beginning for Angular app. If your upload endpoint requires authentication, you can ignore antiforgery validation (see https://github.com/aspnetboilerplate/aspnetboilerplate/blob/dev/src/Abp.Web/Web/Security/AntiForgery/DisableAbpAntiForgeryTokenValidationAttribute.cs).

  • User Avatar
    0
    cangunaydin created

    Thank you @ismcagdas, i am closing this issue.