This is a migrated thread and some comments may be shown as answers.

Editor Image browser using anti-forgery token

2 Answers 10 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Phil
Top achievements
Rank 1
Veteran
Iron
Phil asked on 10 Mar 2021, 09:10 AM

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

   

2 Answers, 1 is accepted

Sort by
0
Phil
Top achievements
Rank 1
Veteran
Iron
answered on 11 Mar 2021, 02:08 PM

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.

0
Ianko
Telerik team
answered on 15 Mar 2021, 07:42 AM

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
Editor
Asked by
Phil
Top achievements
Rank 1
Veteran
Iron
Answers by
Phil
Top achievements
Rank 1
Veteran
Iron
Ianko
Telerik team
Share this question
or