Request URL too long - error

[Heiko]

When loading a Web-App that includes some of the Kendo UI components I can see in the Browser that it throws an error: 414 - Request URL too long. The URL is:

https://mywebsite/Content/kendo/2018.1.221/data:application/font-woff;base64,...

and then a lot of characters (I assume that is the content of the woff file). The Web-App is hosted on Azure, the web.config includes the correct MimeMap. What is going wrong?

Regards
Heiko

 

[Heiko]

Hi, after doing some research I found the place where this is happening.

Version: Kendo UI for ASP.NET MVC, 2018.1.221
File: kendo.bootstrap-v4.css
Line: 832
Content: 

@font-face {
  font-family: WebComponentsIcons;
  font-style: normal;
  font-weight: 400;
  src: url("data:application/font-woff;base64,....") format("woff");

 

When hosted on localhost (= shorter URL) it works ok, but on my website (= longer URL) it throws error 414.

Regards
Heiko

[Dimitar]

Hi Heiko,

We have just found out that CssRewriteUrlTransform does not work correctly with embedded (data uri) resources. It tries to resolve the embedded font to a real location. However, Kendo UI SASS-based themes are specifically designed not to depend on external resources, thus CssRewriteUrlTransform is unnecessary and causes issues. E.g. :

// Before: tries to resolve url(data:application... to url(/Content/data:application
            bundles.Add(new StyleBundle("~/Content/css").Include(
                "~/Content/all.css", new CssRewriteUrlTransform()));

// After: do not try to resolve
            bundles.Add(new StyleBundle("~/Content/css").Include(
                "~/Content/all.css"));

Most probably you are experiencing the same issue. In order to avoid it, either keep the SASS Kendo theme in a separate bundle or bundle it with other files that either do not depend on anything external or have data-uri. For instance, Bootstrap relies on data-uri for the up / down arrows. We will add this tip to our documentation. I hope it will help you to resolve the issue on your side as well.

Regards,
Dimitar
Progress Telerik

[Heiko]

Thanks Dimitar, that was the solution. Great job!!

Regards
Heiko

[Dimitar]

Hi Heiko,

Indeed, in SASS themes like Default v2 and Bootstrap v4 we have the woff files as base64 and the result is a long URL. We do not experience such an error on our setup, e.g. our MVC Menu demo with Bootstrap v4. The following StackOverflow thread deals with a similar issue. In demos' web.config there is a maxAllowedContentLength setting as follows:

<system.webServer>
    <security>
      <requestFiltering>
        <requestLimits maxAllowedContentLength="10485760" />
      </requestFiltering>
    </security>
</system.webServer>

I would suggest you to try if adding this setting will resolve the error. And as far as MIME types are concerned, the following forum thread shows how a customer resolved a similar issue. But in this case our LESS themes are used, where the woff file is not base64 encoded.

Regards,
Dimitar
Progress Telerik

[Heiko]

Hi Dimitar,

thanks for your answer. I added some values under <requestFiltering> without any effect. I also doubt that it is possible at all to make changes on the <system.webServer> part under MS Azure.

Maybe you could ask your developers to change the @font-face line back to use a normal font-file again, or I will take a look at the SASS file and change it myself.

Regards
Heiko