Error in ManageProducts.aspx for product names with quotes

[SteveHiner]

The current R6 version has this markup:

Code: Select all

<asp:LinkButton ID="D" runat="server" ToolTip="Delete" CommandName="Do_Delete" CommandArgument='<%#Eval("Id")%>' OnClientClick='<%# Eval("Name", "return confirm(\"Are you sure you want to delete {0}?\")") %>'>
    <asp:Image ID="DI" runat="server" SkinID="DeleteIcon" />
</asp:LinkButton>

Which results in this markup in the browser for a product named ProductName - 30" Long:

Code: Select all

<a onclick="return confirm("Are you sure you want to delete ProductName" Long?");" id="ctl00_MainContent_PG_ctl17_D" title="Delete" href="javascript:__doPostBack('ctl00$MainContent$PG$ctl17$D','')">
    <img id="ctl00_MainContent_PG_ctl17_DI" src="../../App_Themes/FrescaAdmin/Images/Icons/delete.gif" align="absmiddle" />
</a>

Code: Select all

onclick="return confirm("Are you sure you want to delete ProductName - 30" Long?");"

Is not valid markup because the quotes around the confirm parameter have been HTML encoded and even if they weren't you would end up with mismatched quotes. The browser throws a javascript error Expected ')' because (I believe) it is forgiving the code for using " instead of " and converting them back which results in:

Code: Select all

confirm("Are you sure you want to delete ProductName - 30" Long?");

And now the quotes are mismatched.

This is a tough problem to solve for a couple reasons. First, you need to handle the possibility of both single and double quotes in a product name if you are going to display it like this. Second, you can't even pre-encode the product name because passing " to the confirm function is not valid because it does not html decode the string so you literally see """ in the message.

My guess is that this will render those products undeletable in the database because if the user clicks the delete button the javascript call will fail and the delete code will never run.

My recommendation is to:
* Remove the name from the popup (which I don't like much because it's extra assurance that they clicked the right button)
* Check for " or ' in the name and don't show the name for those products (that's a bit better at least)
* Remove " or ' from the name. The name won't be as clear but at least it'll still show up. (the best of the non-ideal options in my opinion)

I decided to go with option 3.

My implementation is not the best but it'll certainly do until Able comes up with a more elegant fix.

I created a new helper class file in App_Code (though you could add this to an existing helper but you'll have to migrate during updates if you do). My helper looks like this:

Code: Select all

namespace AbleCommerce.Code
{
    using System;

    public class MyHelpers
    {
        public static string FormatForJSArg(string format, object arg)
        {
            var safe = arg.ToString().Replace("'", "").Replace("\"", "");
            return string.Format(format, safe);
        }
    }
}

Then I modified the OnClientClick of the LinkButton to be this:

Code: Select all

OnClientClick='<%# AbleCommerce.Code.MyHelpers.FormatForJSArg("return confirm(\"Are you sure you want to delete {0}?\")", Eval("Name")) %>'

I have confirmed that this fixes the issue with names that have " or ' contained in them. It also prevents the quotes around the confirm argument from getting html encoded which should make the javascript run correctly.

Note, my FormatForJSArg is not a general purpose replacement for string.Format. It doesn't respect certain formatting options. For instance, if the original format string was intended to work with input that is not a string then it will no longer work right because I have to force the input to be a string. It should be fine with any format string intended to have string input but don't go around replacing string.Format() or Eval() with my version without knowing what you are doing and testing it out with your data. (No warranty expressed or implied, your mileage may vary, void where prohibited, batteries not included, etc.)

I hope this helps and I look forward to R7 including a much better fix than this.

[Katie]

Hi Steve,

For some reason, I'm not able to reproduce this issue. I created a new product with this name = ProductName - 30" Long
From the Manage Products page, I deleted the product using the red X icon. With this method, there is no confirmation page....it just removes the item.
So I created the same product again, but this time I used the checkbox and batch delete function. The confirmation page appeared, but the product name is not listed. I am using R6. Can you give me the exact steps to reproduce the issue?

Thanks,
Katie

[SteveHiner]

If you delete a product that does not have the quote in the name do you get a confirmation message? If so then you did reproduce it but just didn't realize something was missing. You could also open the F12 tools in your browser and watch the console to see if any errors get thrown.

I knew about it because I'm running IE in a debugger so I caught the javascript exception. It's possible that if that exception is not caught then it just proceeds with the delete and just doesn't confirm with the user. The batch delete would be safe too since it doesn't try to put the product name in the confirmation message.

[Naveed]

I tried with IE, Firefox and Chrome browsers. For products having quotes in name it do not show any confirmation dialog, and deletes to products without it. A javascript error is logged if we check the browser error console. I am going to log a new bug for it, so that it can be fixed for next release.

[Naveed]

Hello Steve,

We already have EscapeSpecialCharacters function defined in our CommerceBuilder.Utility.StringHelper.cs class, which can be used for this purpose. You can replace the following code:

Code: Select all

 OnClientClick='<%# AbleCommerce.Code.MyHelpers.FormatForJSArg("return confirm(\"Are you sure you want to delete {0}?\")", Eval("Name")) %>'

with

Code: Select all

OnClientClick='<%#string.Format("return confirm(\"Are you sure you want to delete {0}?\")", StringHelper.EscapeSpecialCharacters((string)Eval("Name"))) %>'

This way it will escape the quotes properly and will show the full product name while asking for delete confirmation.

The same issue exists at category browsing page (~/Admin/Catalog/Browse.aspx ). We can fix the issue same way by escaping the quotes in name using StringHelper.EscapeSpecialCharacters() function.