Editor Image browser using anti-forgery token

[Phil]

Hi

I am using .net core Razor pages and want to add an image browser to an email editor.

The page has an anti-forgery token and other elements on the page use ajax to pass this to the page behind to process data.

Initially when I was trying to call the image browser in a similar way I was getting 400 errors. I then added the attribute [IgnoreAntiforgeryToken(Order = 1001)] to the code behind and was able to hit the code. This is the razor code I am using in order to generate the editor.

 

 @(Html.Kendo().Editor()
       .Name("email-editor")
       .HtmlAttributes(new { style = "width: 100%; height: 420px" })
       .Tools(tools => tools
                  .Clear()
                  .Bold().Italic().Underline()
                  .JustifyLeft().JustifyCenter().JustifyRight()
                  .InsertUnorderedList().InsertOrderedList()
                  .Outdent()
                  .Indent()
                  .CreateLink().Unlink()
                  .InsertImage())
                  .ImageBrowser(imageBrowser => imageBrowser
                  .Image("~/Content/UserFiles/Images/{0}")
                  .Transport(t =>
                  {
                      t.Read(r => r.Url("./EmailOverview?handler=ReadImage"));
                  })

))

 

This is the most basic method in the code behind so I can call it.
public async Task<JsonResult> OnPostReadImage()
 {
            return new JsonResult(true);
}

 

Is there some syntax I can use to pass in an anti-forgery token with the call. Or can I pass in some additionally parameters with jquery?

 

Many thanks

   

[Phil]

I found this information that had some examples on github (at the bottom of the page) for Razor pages.

https://docs.telerik.com/aspnet-core/html-helpers/editors/editor/image-browser?_ga=2.18541305.1325391573.1615285993-1736843189.1576230525

I got around the anti-forgery by creating a new blank partial view. I then put the code behind in there and updated the transport to use my new handlers. Another option would be to create an API and then call that from the page.

It might be helpful to be able to add the headers to the ajax calls so that it can work with anti forgery tokens at some point.

I thought I would mention this in case anyone else is looking for a similar solution.

[Ianko]

Hello Phil,

The proper solution here would be to have the Data method to add the anti-forgery token. However, this lacks as well, but it is logged here for fixing: https://github.com/telerik/kendo-ui-core/issues/5352. I just increased its priority due to this report. 

And thanks for sharing the solution you have found. I hope they will be useful to others as well.

Regards,
Ianko
Progress Telerik