3

Short question:

echo '<button type="button" id="add" onClick="addAsset('.$filename.');"> '.$filename.' </button>';

this creates a button with an onClick function addAsset(example.png); But i'd like to have addAsset("example.png") how do i escape the " character?

Thank you!

mega6382
  • 9,211
  • 17
  • 48
  • 69
vldn
  • 41
  • 1
  • 4
  • Hi, welcome to SO,..try not over using your TAG's, for this question PHP would have been plenty.. – Keith Oct 28 '17 at 20:03
  • 1
    I usually recommend outputting all the HTML after doing the grunt PHP work. That way you can exit PHP `?>` and write plain old HTML, like this: ``. I find it much easier to work with, the IDE, editors pick up on it better, etc – JimL Oct 28 '17 at 20:05
  • Thanks JimL, that would have saved me a few hours :D – vldn Oct 28 '17 at 20:07
  • 1
    And you'll divide up your files into what could be considered a controller/model part (the top, grunt work php part) and a view part (the bottom html part). That way you steer into/get used to working with "MVC" patterns – JimL Oct 28 '17 at 20:09

3 Answers3

3

You can try the following instead:

echo '<button type="button" id="add" onClick="addAsset(\''.$filename.'\');"> '.$filename.' </button>';

So, instead of escaping " double quote. we are escaping ' single quote. Which will be more clear when reading the html output.

Edit: Better approach would be to write html blocks outside of php blocks like the following:

<?php 
//Your PHP COde
?>
<button type="button" id="add" onClick="addAsset('<?= $filename ?>');"><?= $filename ?></button>
<?php 
//More PHP COde
?>

As you can see it will be more readable and no escaping would be required. And as you might notice this uses <?= $filename ?>, that is just short for <?php echo $filename ; ?>. Learn more about all this in Escaping from HTML

Edit 2: Also, as @deceze have suggested wht if variable $filename might contain quote or some thing you can use the htmlentities() for that, it will protect you against XSS if the values of filename is an input from user. you can use it like below:

<button type="button" id="add" onClick="addAsset('<?= htmlentities($filename) ?>');"><?= htmlentities($filename) ?></button>

Also, check @deceze's Answer below for better understanding of how to protect your code from xss, in this particualr situation.

mega6382
  • 9,211
  • 17
  • 48
  • 69
  • Thank you!! Working flawless :) Can't upvote, not enough reputation, but i will come back :) – vldn Oct 28 '17 at 20:06
  • @SvnVldn You are welcome. Please be sure to accept the solution if it was helpful. – mega6382 Oct 28 '17 at 20:06
  • 1
    There is a small grey `tick` button under the Voting buttons, you will be able to select it in about 6 minutes. You will have to wait till then. – mega6382 Oct 28 '17 at 20:11
  • What if, by whatever chance, `$filename` contains either a `'` or `"`? – deceze Oct 28 '17 at 20:22
  • @deceze I guess the OP would have to google it, &&|| make a new question, if there isn't already one. BTW can you have a look at the downvotes on all the questions on this page? All the answers seem to have one for no reason. Thanks. – Ethan Oct 28 '17 at 20:24
  • 1
    The reason is that all the answers (except https://stackoverflow.com/a/46994093/476) are *wrong and open to XSS.* – deceze Oct 28 '17 at 20:24
  • @deceze Ah, so that's why. Well a comment would have been nice :) /shrug – Ethan Oct 28 '17 at 20:25
  • @deceze I have updated my answer accordingly. Thank you very much for kind suggestion. – mega6382 Oct 28 '17 at 20:26
  • With your update you're still at the risk of *Javascript injection* or at least broken Javascript syntax. (Hint: if `$filename` contains a `'`…) – deceze Oct 28 '17 at 20:27
2

Use an escaped single quote \':

echo '<button type="button" id="add" onClick="addAsset(\''.$filename.'\');"> '.$filename.' </button>';
Ethan
  • 4,295
  • 4
  • 25
  • 44
2

The end result you'll want to end up with is:

<button type="button" id="add" onClick="addAsset(&quot;example.png&quot;);"> example.png </button>

Otherwise you'll have broken HTML syntax. The alternative is non-conflicting quotes:

<button type="button" id="add" onClick="addAsset('example.png');"> example.png </button>

But you'll still have to escape/encode your input correctly, in case $filename ever contains an undesirable character. The value of the onClick attribute must be valid Javascript, and valid HTML. So:

printf('<button type="button" id="add" onClick="%s"> %s </button>',
       htmlspecialchars(sprintf('addAsset(%s)', json_encode($filename))),
       htmlspecialchars($filename));
deceze
  • 510,633
  • 85
  • 743
  • 889
  • When considering xss it is better to use `htmlentities` than `htmlspecialchars` https://stackoverflow.com/questions/3623236/htmlspecialchars-vs-htmlentities-when-concerned-with-xss – mega6382 Oct 28 '17 at 20:28
  • I don't see why. – deceze Oct 28 '17 at 20:29
  • Sorry wrong question attached. Check this https://stackoverflow.com/questions/3623236/htmlspecialchars-vs-htmlentities-when-concerned-with-xss – mega6382 Oct 28 '17 at 20:30
  • 1
    OK, granted, but only in situations you should be avoiding anyway: https://stackoverflow.com/a/20871450/476 – deceze Oct 28 '17 at 20:32