single quote in file name - javascript,php

Question

How can I deal with a quote in data that has to be there?

This javascript statement works fine until city name is "ST JOHN'S". We are not able to change the change the city name in database -or- use a more reliable key.

$('#map_output').html('<p><img src="img/map/<?=$CITY_OUT?>_map.PNG" width="600"></p>')

Answer 1

Use htmlspecialchars() .

EDIT: you use it (sorta) like json_encode :

<?=htmlspecialchars($CITY_OUT, ENT_QUOTES)?>

But htmlspecialchars is more semantic - json_encode is about generating JSON (internal, data representation), not about presentation.

Nick Craver is right though - it'll also work.

Edit : need ENT_QUOTES for rendering " ' " correctly...

Answer 2

您可以使用json_encode()来转义引号，如下所示：

<?=json_encode($CITY_OUT)?>

Answer 3

There are three levels of encoding needed:

You're creating a URL, so you need to URL-encode it:

$url = rawurlencode('img/map/'.$CITY_OUT.'_map.PNG');

You're creating an HTML attribute, so you need to HTML-encode it:

$html = '<p><img src="'.htmlspecialchars($url).'" width="600"></p>';

That second step may not make a big difference, since you're not likely to have ' , " , & , < , or > in your URL. But if you want to be strictly correct, you should encode all HTML attributes. It's a good habit to get into, so you can handle all special characters.

Finally, you're creating a JavaScript value, so you need to JSON-encode it:

$('#map_output').html(<?= json_encode($html) ?>)

(edited to add JSON-encoding)

Answer 4

In my quick tests, neither of the two answers worked:

<?php

  $string = "ST JOHN'S";
  $json = json_encode($string);
  $html =  htmlspecialchars($string);
  $escape = str_replace("'", "\'", $string);


  ?>

  <script type="text/javascript">
    alert('<?php echo $escape?>');
    alert('<?php echo $html?>');
    alert('<?php echo $json?>');
  </script>

The only test which did not produce a javascript error was my usage of str_replace to actually escape the single quote.

Answer 5

"rawurlencode" is what you need to ensure the characters in the URL are interpreted the same on the "img/map/..." request the same way they are in this PHP script. Incidentally, "rawurlencode" safely escapes all of the characters you need to worry about in XSS injections.

<?php
    $string   = "ST JOHN'S";
    $json     = json_encode($string);
    $html     = htmlspecialchars($string, ENT_QUOTES);
    $htmlent  = htmlentities($string, ENT_QUOTES);
    $escape   = str_replace("'", "\'", $string);
    $urlenc   = rawurlencode($string);
?>

  <script type="text/javascript">
      alert('<?php echo $html; ?>');
      alert('<?php echo $htmlent; ?>');
      alert('<?php echo $urlenc; ?>');
  </script>

Answer 6

You've said that none of the solutions given so far have worked for you, but I think actually they're fine (at least some of them). Let me demonstrate:

Here are the examples you listed:

$json:
<img src="img/map/"ST JOHN'S"_map.PNG"/ width="600">
$html:
<img src="img/map/ST JOHN&#039;S_map.PNG"/ width="600">
$htmlent:
<img src="img/map/ST JOHN&#039;s_map.PNG"/ width="600">
$escape:
<img src="img/map/ST JOHN\'S_map.PNG"/ width="600">
$urlenc:
<img src="img/map/ST%20JOHN%27S_map.PNG"/ width="600">

I don't see any problem with any of these (except the JSON one, which I'll explain in a moment).

And I've just tried all these examples, trying to simulate your scenario as closely as possible (even down to using the same file name).... All of them loaded the graphic correctly, again except the JSON example.

The JSON example needs a minor tweak to get it working, but it also does escape the string in a workable way. To get it working you need to take into account that JSON produces a fully-quoted Javasscript string rather than just escaping it as the others do, so you'd modify the output to close the quotes and add the strings together, like so:

$('#map_output').html('<p><img src="img/map/"+<?=$json?>+"_map.PNG"/ width="600"></p>');

The other solutions don't need this. They all work as is. As I say, I tried them, and they all loaded the graphic into the page.

In the context, all three mechanisms (escaping \\' , entities &#039 and URL encoding %27 ) are valid:

• Escaping works because you're in the context of Javascript, so the backslash gets dealt with by Javascript and the final generated HTML that gets inserted into the page won't contain it.

• Entities work because HTML translates entities into the mapped character, so &#039 in a HTML page is the same as a single quote, even within an attribute value as in this case.

• URL Encoding works because browsers translate them when they load a URL.

I would suggest URL encoding is the correct solution in this case, since this is being used for a URL. The reason for that is that while all the solutions work for the given example, if you have any examples that contain a question mark or an ampersand ( & ) or a few other reserved characters, then URL encoding will be the only solution that will work in these cases. On the other hand, if you're displaying the output in your HTML page in another context, then entities are the way to go. And if it is going to be used just within Javascript, then JSON is the answer.

But you say none of them did the trick. My question is: Did you actually try them? Did you run the code and the graphic failed to load? It did for me. On the other hand, if they did work, but still don't "do the trick", then what is it you actually want?

My guess is that what you actually mean is that you want to end up with a simple quote character there, but have it magically work. That can't happen; the quote has to be escaped somehow or other in order for it to work, but they user will never see the escaped version, so there's no need to worry about it.

In fact, you should be escaping or encoding all the strings you input or output, so that invalid characters do work. Otherwise Mr O'Brien is going to have trouble entering his name into your site, and if he manages it, you'll have trouble displaying it afterward.

Answer 7

Unfortunately none of the above solutions did the trick.

<?
    $string   = "ST JOHN'S";
    $json     = json_encode($string);
    $html     = htmlspecialchars($string, ENT_QUOTES);
    $htmlent  = htmlentities($string, ENT_QUOTES);
    $escape   = str_replace("'", "\'", $string);
    $urlenc   = rawurlencode($string);
?>

$json:
<img src="img/map/<?=$json?>_map.PNG"/ width="600">
$html:
<img src="img/map/<?=$html?>_map.PNG"/ width="600">
$htmlent:
<img src="img/map/<?=$htmlent?>_map.PNG"/ width="600">
$escape:
<img src="img/map/<?=$escape?>_map.PNG"/ width="600">
$urlenc:
<img src="img/map/<?=$urlenc?>_map.PNG"/ width="600">

output:

$json:
<img src="img/map/"ST JOHN'S"_map.PNG"/ width="600">
$html:
<img src="img/map/ST JOHN&#039;S_map.PNG"/ width="600">
$htmlent:
<img src="img/map/ST JOHN&#039;s_map.PNG"/ width="600">
$escape:
<img src="img/map/ST JOHN\'S_map.PNG"/ width="600">
$urlenc:
<img src="img/map/ST%20JOHN%27S_map.PNG"/ width="600">