Last Updated: 07 Jun 2017 14:35 by ADMIN
Danail Vasilev
Created on: 12 Sep 2013 10:40
Category: Button
Type: Feature Request
FIX the compatibility of RadButton with custom image and AntiXssEncoder
Implementing a fix for the Lightweight RenderMode is likely to cause regressions:

Thus, there are several workarounds:
- use the Classic RenderMode, if possible
- use the script below
- use CSS to set the icon instead of a property (example further down)

JS workaround:
			<telerik:RadButton runat="server" ID="rb1" RenderMode="Lightweight">
				<Icon PrimaryIconUrl="~/Circle_Green_20.png" />
			<telerik:RadPushButton runat="server" ID="rpb1" text="sample text">
				<Icon Url="Circle_Green_20.png" />
				function repaintButtons() {
					$telerik.$(".RadButton.rbIconButton, .RadButton.rbIconOnly").each(function (index, elem) {
						if (elem && elem.control && elem.control.repaint) {
					//uncomment this if you want the method to fire after each partial postback as well

CSS workaround:

			<telerik:RadButton runat="server" ID="rb1" RenderMode="Lightweight" CssClass="myCustomIcon" Text="some text">
				<Icon PrimaryIconUrl="Circle_Green_20.png" />
				.myCustomIcon .rbPrimaryIcon
					background-image: url(Circle_Green_20.png);
(Total attached files size should be smaller than 20mb. Allowed extensions: .zip, .rar, .jpg, .png, .gif)
Marin Bratanov
Posted on: 07 Jun 2017 14:35
The fix for the Lighweight RenderMode has been overruled by a later fix in Q3 2015 that pertains to sessions and special symbols in icon URLs that has a significant impact.
Danail Vasilev
Posted on: 12 May 2015 11:04
The issue has been fixed with the Q1 2015.
Joel Kraft
Posted on: 05 Nov 2014 17:08
Okay, I have a clarification... I went and dug through AddStyleAttribute() with Reflector... it looks like it actually does an HtmlAtributeEncode on the value for BackgroundImage instead of a UrlEncode.

My comments and fix with removing the single quotes in that line of code remain valid, though.
Joel Kraft
Posted on: 05 Nov 2014 16:14
I absolutely dispute the fact that there is nothing that you can do about it.  In fact, I would point to a specific error in the source code for RadButton that causes this problem.

Specifically, this is line 608 of RadButton.cs (2014.3)
writer.AddStyleAttribute(HtmlTextWriterStyle.BackgroundImage, string.Format("'{0}'", ResolveUrl(iconUrl)));

The issue here is that you are specifically putting single quotes around the URL, and they are not required, nor needed.
This causes the HTML to be rendered like this:
<span class="rbPrimaryIcon" style="background-image:url(&#39;/My/Icons/Login_Key.png&#39;);"></span>

And then the AntiXss engine sees this and tries to encode it again.

At this stage, the HTML should be output as:
<span class="rbPrimaryIcon" style="background-image:url('/My/Icons/Login_Key.png');"></span>

Or better yet, because those quotation marks are not required by the standard.
<span class="rbPrimaryIcon" style="background-image:url(/My/Icons/Login_Key.png);"></span>
In fact, the second option is what HtmlTextWriter.AddStyleAttribute with HtmlTextWriterStyle.BackgroundImage is trying to write out. It assumes that the entirety of its second parameter is a URL and encodes any special characters properly. You guys have messed it up by adding the single quotation marks manually, and that function assumes the quotes are part of the URL and encodes them instead of treating them as string delimiters.

If you change line 608 to the following, it will fix the AntiXss issue for most URLs, and encodes correctly without AntiXss. There may still be an issue with AntiXss and URLs that actually contain special characters, but that is an issue that is easily fixed by updating a URL, rather than the than having the issue occur with each and every URL.

writer.AddStyleAttribute(HtmlTextWriterStyle.BackgroundImage, ResolveUrl(iconUrl));