addslashes is rendering the slash in the browser

[gwh]

Hi everyone,

The following php line of code uses addslashes because it was clashing with a javascript onclick event:

<?php echo addslashes($item['itemTitle']);?>

I thought it would add the slashes to the html code but not render the slash visually in the browser, but it's doing that.

Before I was using the following function to output it to the browser but this code was causing the javascript to fail:

<?php
function html($text)
{
	return htmlspecialchars($text, ENT_QUOTES, 'UTF-8');
}

function htmlout($text)
{
	echo html($text);
}

htmlout($item['itemTitle']);?>

?>

I don't know if I need to combine them both. Can someone tell me how I can resolve this? I just need something that will escape the apostrophe's when data from the database is output with these.

Appreciate any help.

[laserlight]

It might help if you posted the smallest and simplest script that demonstrates the problem (including a dummy Javascript).

[gwh]

Thanks for the reply,

The following line of javascript is supposed to open a window displaying an image but the code doesn't seem to work, ie. nothing happens when I click the smaller image:

onclick="openDMXzoneLightbox('../../../images/catalogue/business/corporate/Large/<?php echo $item['itemImage'] . '.jpg'; ?>', {title:'<?php echo $item['itemTitle'];?>', width:650, height:776}, window);return document.MM_returnValue">

The following shows the above code in the context of some surrounding code:

<div id="catalogue">
  <div class="dmxBillboard dark_blue" id="Corporate" style="width:656px;height:396px;">
  <div class="dmxBillboardHeader">
    <h3>Corporate Wear</h3>
    <div class="dmxBillboardSectionNav">
      <a href="*"><?php echo $items[0]['itemType'];?></a>
      <div style="clear:both"></div>
    </div>
    <div style="clear:both;"></div>
  </div>

<div class="dmxBillboardView layout-left">
<ul id="sec_1" title=""><?php foreach ($items as $item): ?>
  <li class="layout-full" onclick="openDMXzoneLightbox('../../../images/catalogue/business/corporate/Large/<?php echo $item['itemImage'] . '.jpg'; ?>', {title:'<?php echo $item['itemTitle'];?>', width:650, height:776}, window);return document.MM_returnValue">
    <a href="javascript:void(0);" onclick="openDMXzoneLightbox('../../../images/catalogue/business/corporate/Large/<?php echo $item['itemImage'] . '.jpg';?>', {title:'<?php echo $item['itemTitle']?>', width:650, height:776}, window);return document.MM_returnValue">
    <img src="../../../images/catalogue/business/corporate/<?php echo $item['itemImage'] . '.jpg';?>" border="0" width="650" height="776" alt="" />
    </a>
  </li>

The following shows some code that's generated by the browser:

div id="content">
  <div id="content_main">
<div id="catalogue">
  <div class="dmxBillboard dark_blue" id="Corporate" style="width:656px;height:396px;">
  <div class="dmxBillboardHeader">
    <h3>Corporate Wear</h3>
    <div class="dmxBillboardSectionNav">
      <a href="*">Shirts/Blouses</a>
      <div style="clear:both"></div>
    </div>
    <div style="clear:both;"></div>
  </div>

<div class="dmxBillboardView layout-left">
<ul id="sec_1" title="">      <li class="layout-full" onclick="openDMXzoneLightbox('../../../images/catalogue/business/corporate/Large/160_260.jpg', {title:'Men\'s Shirt ', width:650, height:776}, window);return document.MM_returnValue">
    <a href="javascript:void(0);" onclick="openDMXzoneLightbox('../../../images/catalogue/business/corporate/Large/160_260.jpg', {title:'Men's Shirt ', width:650, height:776}, window);return document.MM_returnValue">
    <img src="../../../images/catalogue/business/corporate/160_260.jpg" border="0" width="650" height="776" alt="" />
    </a>
  </li>
  <li title="Men\'s Shirt ">
            <h4> Men's Shirt </h4>
            <p>Style Numbers – Ladies: 000, 161&nbsp;&nbsp;|&nbsp;&nbsp;Men: 123, 456</p>
            <p>Colours: White, Navy,</p>
            <p><img src="../../../../images/corp/corporate/shirts/swatches/160_260" border="0" alt="" /></p><p>Sizes: 38-50</p>      </li>    

As you can see, it's outputting a backslash before the apostrophe in Men\'s.

As mentioned, when I use the following:

<?php echo addslashes($item['itemTitle']);?>

...the onclick even works, but I'm stuck with the backslash being output.

[djjjozsi]

<?php echo htmlspecialchars($item['itemTitle']);?>

?

[gwh]

djjjozsi;10944278 wrote:

<?php echo htmlspecialchars($item['itemTitle']);?>

?

htmlspecialchars is a part of the following function:

<?php 
function html($text) 
{ 
    return htmlspecialchars($text, ENT_QUOTES, 'UTF-8'); 
} 

function htmlout($text) 
{ 
    echo html($text); 
} 

I had tried using that in the first place, ie.

htmlout($item['itemTitle']);?>

But the javascript onclick event still fails when using this. The only thing that seemed to work was the addslashes but as mentioned this is also rendering the backslash to the browser.

I'm not sure how to solve it?

[djjjozsi]

see the original value from your database. if it has \" \' in the text, you need to change the insert in your code.

[gwh]

djjjozsi;10944281 wrote:

see the original value from your database. if it has \" \' in the text, you need to change the insert in your code.

There's no backslashes in the database - it just says Men's

[Weedpacket]

I see in your posted HTML you have four instances of "Men's Shirt":

1. The onclick= handler of the <li> element has [font=monospace]'...Men\'s Shirt ...'[/font]. You need a backslash here because it's in a single-quoted JavaScript string, and you have one.

2. Inside that <li> element you have an <a> element with an onclick= handler. Here you have [font=monospace]'....Men's Shirt ...'[/font]. You don't have a backslash here, but you need one. As for why you have identical onclick= handlers both for the <li> element and the <a> element within ... you'll have to answer that.

3. Immediately after those two elements, there is another <li> item, with a title attribute, [font=monospace]"Men\'s Shirt "[/font] This does not need a backslash because it's not in a single quoted string.

4. And, finally, plain text in an <h4> element reading [font=monospace]Men's Shirt [/font]

Incidentally, note that it's not [font=monospace]"Men's Shirt"[/font] but [font=monospace]"Men's Shirt "[/font]. You've got an extra space somewhere (probably the entry in the db).

Now, in the code you've posted there is absolutely no reason why (1) and (2) should be different - why the first is properly escaped but the second isn't. Nor does your posted code go far enough to show how the other two instances are generated.

Now presumably you use those functions you showed, but they don't appear anywhere in your demonstration code either, so we can't see how they're fitting in.

[gwh]

Weedpacket;10944291 wrote:

The onclick= handler of the <li> element has '...Men\'s Shirt ...'. You need a backslash here because it's in a single-quoted JavaScript string, and you have one.

There are a lot of items in my database with that title. Do you mean I have to go through and change every single title by putting a backslash before the apostrophe in the database?

[bradgrafelman]

gwh;10944295 wrote:

There are a lot of items in my database with that title. Do you mean I have to go through and change every single title by putting a backslash before the apostrophe in the database?

No, that'd be silly.. unless you want people to say out loud "Man, I wish I could buy a men backslash single-quote 'S' shirt!"

The backslash, used to prevent invalid syntax/markup, should be added whenever appropriate (e.g. you're inserting the data into an HTML attribute or other entity where a single quote has special meaning).

EDIT: While this might be unrelated, sounds like you also have an un-normalized database.

[gwh]

But this is where it's getting inserted:

<li class="layout-full" onclick="openDMXzoneLightbox('../../../images/catalogue/business/corporate/Large/<?php echo $item['itemImage'] . '.jpg'; ?>', {title:'<?php echo addslashes($item['itemTitle']);?>', width:650, height:776, preset:'minimalistic'}, window);return document.MM_returnValue">

This line is outputting data from the database:

title:'<?php echo addslashes($item['itemTitle']);?>'

The backslash, used to prevent invalid syntax/markup, should be added whenever appropriate (e.g. you're inserting the data into an HTML attribute or other entity where a single quote has special meaning).

I can't add it where it's appropriate because the item title is coming from the database so I can't selectively add a backslash. I don't understand. Can you clarify?

[bradgrafelman]

You can selectively add a backslash wherever you need... just because you're retrieving data from a database doesn't mean you have to leave it in its original form before echo'ing it.

As Weedpacket pointed out, the backslash is present for the LI tag, but not for the A tag nested inside of it. Thus, you apparently don't have similar code for the A tag as the code you posted.

[gwh]

Got it - understand now. Thanks for the help.

[gwh]

Sorry to come back to this issue but I just noticed that even though it's working now, I looked in the source code of the page and I found that it was outputting an error:

<b>Warning</b>: Unexpected character in input: '\' (ASCII=92) state=1 in <b>/Applications/MAMP/htdocs/new_site/business/catalogue_business.php</b> on line <b>108</b><br />
<br />
<b>Warning</b>: Unexpected character in input: '\' (ASCII=92) state=1 in <b>/Applications/MAMP/htdocs/new_site/business/catalogue_business.php</b> on line <b>109</b><br />

Lines 108 and 109 refer to:

      <li class="layout-full" onclick="openDMXzoneLightbox('../../../images/catalogue/Large/<?php echo $item['itemImage'] . '.jpg'; ?>', {title:'<?php echo addslashes($item[\'itemTitle']);?>', width:650, height:776, preset:'minimalistic'}, window);return document.MM_returnValue">
        <a href="javascript:void(0);" onclick="openDMXzoneLightbox('../../../images/catalogue/Large/<?php echo $item['itemImage'] . '.jpg';?>', {title:'<?php echo addslashes($item[\'itemTitle']);?>', width:650, height:776, preset:'minimalistic'}, window);return document.MM_returnValue">

It must have something to do with the way I escaped the apostrophes, ie.

<?php echo addslashes($item[\'itemTitle']);?>

Do you know how to remove this warning?

[djjjozsi]

in this case the ' is a part of your variable name:
This should be:

<?php echo addslashes($item['itemTitle']);?>

[gwh]

I'm really confused now. Yes I removed the backslash so it's like this again:

<?php echo addslashes($item['itemTitle']);?>

But strangely enough even though the source code looks like this:

title:'Ladies and Men\'s Shirts ', width:650, height:776'

...it's not rendering the backslash in the browser. I mean this was the reason why I asked the question in the first place. What I mean is, the problem seems to have been fixed but I didn't do anything because since I removed that backslash the code is exactly as it was when I asked the question in the first place.

Any idea?

[djjjozsi]

after "shirts" is there a tabulator?

<?php echo addslashes(trim($item['itemTitle']));?>

but in your original code snipet there was no addslashes() applied on the itemtitle...

[gwh]

There could be some spaces at the end of the title name in my database (if that's what you mean by a tabulator?)

I showed the following in my first post:

<?php echo addslashes($item['itemTitle']);?>

...so yes it was there in my original code snippet.

[bradgrafelman]

I'm confused as to what your question is. You have this coming from your database: Men's Shirts.

Because there is a single quote in that data, and because the 'title' attribute is delimited by single quotes, you apply [man]addslashes/man to properly escape the single quote in the data, thus it is outputted as: Men\'s Shirts.

Your source code shows the backslash before the single quote, confirming what we expected to see.

What's the problem?

[gwh]

It seems to be ok now so I guess this is well and truly solved.