Does Javascript methods auto-escape quotes? - javascript

I want to know if javascript methods auto-escape quotes, because this code work:
Example #1
<?php $foo ="hey a quote ' "; ?>
<input type="text" value="<?php echo $foo; ?>" id="foo" />
<script>
bar = document.getElementById('foo').value;
alert(bar+'there is a quote, will it work? ,');
</script>
It displays the alert fine, but this one:
Example #2
<?php $foo ="hey a quote ' "; ?>
<button onclick="alert('<?php echo $foo; ?>');">test</button>
...doesn't.
Obviously, it's because the quote isn't escaped with a \.
But then again, neither is it in the first example, so why is that so ?
Does javascript's method auto-escape quote when it picked stuff from DOM ?
Or is it just the value() method maybe ?
I've found nothing, so if you have even the beginning of an answer, I''ll be glad.

PHP is processed on the server, producing HTML (including embedded javascript in this case). This happens before the HTML is sent to the browser to interpret, including any JS.
You will see if you inspect the generated HTML source, that your second example becomes:
<button onclick="alert('hey a quote ' ');">test</button>
which isn't valid JS syntax.
Your first version works basically because you do not have an extraneous single quote in the code your PHP string is inserted into. The insertion instead produces:
<input type="text" value="hey a quote ' " id="foo" />
which is perfectly fine. And that value is then passed on to the alert call in the JS.

The difference is really that in the first code example, the quote appears in a context where there are no wrapping single quotes, so there is no ambiguity. If you would have wrapped the HTML attribute values with single quotes (which is valid HTML also), you'd have a problem:
<?php $foo ="hey a quote ' "; ?>
<input type='text' value='<?php echo $foo; ?>' id='foo' />
In that case the single quote should have been escaped as an HTML entity: &apos;:
<?php $foo ="hey a quote &apos; "; ?>
<input type='text' value='<?php echo $foo; ?>' id='foo' />
Now in the second code example you provided, the single quote will appear in wrapped single quotes (for the string literal passed to alert). This is an issue, because the single quote will now end the string literal, and the characters following it will lead to a syntax error.
Here the quote appears in a JavaScript string literal (the alert code), not as in the HTML context of the first example. In JavaScript string literals, single quotes can be escaped with the backslash.
So in both cases (HTML or JavaScript) you could need a form of escaping. They are different.
Note that none of this is related to PHP.

Related

php/html - triple nesting quotes

I know that similar questions have been asked on Stack Overflow many times, but I am having problems with triple nested quotes in html/php. I have looked at numerous questions, but none of the solutions that I have found are working for me. Here is what I am trying to do (this is found in a php file):
echo"<div id = 'feed-element'>
<button class='username-button' type='button'>#".$currentUsername."</button>
<button class='hashtag-one-button' type='button'>".$hashtag_one."</button>
<button class='hashtag-two-button' type='button'>".$hashtag_two."</button>
<button class='play-button' id='play-button".$i."' type='button' onclick='changeImage(this.id,\'".$track_url."\')'></button>
<button class='email-button' type='button'>Contact: ".$email."</button>
</div>";
The specific line that is causing me problems is the third to last line:
<button class='play-button' id='play-button".$i."' type='button' onclick='changeImage(this.id,\'".$track_url."\')'></button>
Anyways, when I run this code I get an Uncaught Syntax: invalid or unexpected token error. What am I doing wrong?
Why not use php heredoc and skip the hassle of escaping quotes? i.e.:
echo <<< EOF
<div id = 'feed-element'>
<button class='username-button' type='button'>#{$currentUsername}</button>
<button class='hashtag-one-button' type='button'>{$hashtag_one}</button>
<button class='hashtag-two-button' type='button'>{$hashtag_two}</button>
<button class='play-button' id='play-button{$i}' type='button' onclick='changeImage(this.id,{$track_url})'></button>
<button class='email-button' type='button'>Contact: {$email}</button>
</div>
EOF;
Note:
The curly braces are optional but may help code readability.
For your error-causing code, you need to escape double quotes, not single:
<button class='play-button' id='play-button".$i."' type='button' onclick='changeImage(this.id,\"".$track_url."\")'></button>
Because you are using double quotes, you don't need to concatenate. Just insert the variable and away you go!
echo"<div id='feed-element'>
<button class='username-button' type='button'>#$currentUsername</button>
<button class='hashtag-one-button' type='button'>$hashtag_one</button>
<button class='hashtag-two-button' type='button'>$hashtag_two</button>
<button class='play-button' id='play-button$i' type='button' onclick='changeImage(this.id,\' $track_url\ ')'></button>
<button class='email-button' type='button'>Contact: $email</button>
</div>";
For using quotes to any level in PHP/HTML, use forst level as either single or double quote. After that you have two options. 1. Use double quotes 2. Use single quotes with backslash before the quote. For example, echo "This is 'In quotes'"; or echo "This is \"In quotes\"";
In order to have multiple type of quotes on a line of code use .
Example :
echo 'It\'s me, hey';
You'e all crazy. Just end the php block and write whatever then start it up again.
Example
I want to dynamically create 3 different div elements, each one with two parameters: $ID and $TEXT which represent the dom element ID and the innerHTML.
Now to make it truely complex, I want to dynamically insert these elements into a Javascript Function, so that they will load when I call the JS function.
Here's how to do that: You simply end the PHP tag and then enter your desired content as if the PHP tag never existed, and it will parse it as if it was specified within PHP without having to escape anything
<?php
/* define regular function to generate dynamic element with PHP */
function create_my_div($ID, $TEXT) {
/* end the PHP tag and start just regularly entering code
?>
<div id='<?=$ID;?>'>
<?php print_r(htmlspecialchars($TEXT)); ?>
</div>
<?php
/* we started up the PHP tag again, followed by a } to end the function
}
?>
Now anytime we call create_my_div("someID", "some text"); with PHP it will create our DIV element.
Lets say we wanted to populate a javascript function's DIV elements server-side and put them into the Javascript Function create_my_divs()
We first would need to have a way to ensure that our DIV elements are properly escaped as mentioned in the other answers, which can be done with this PHP code:
<?php
function escapeJavaScriptText($string)
{
return str_replace("\n", '\n', str_replace('"', '\"', addcslashes(str_replace("\r", '', (string)$string), "\0..\37'\\")));
}
?>
And then finally, all we have to do is this on our web page:
<script type="text/javascript">
/* target element is where the DIVS will be created in */
function create_my_divs(target_element) {
target_element.innerHTML += "<?=escapeJavascriptText(create_my_div("DIV1", "THIS IS DIV1"));?>";
target_element.innerHTML += "<?=escapeJavascriptText(create_my_div("DIV2", "THIS IS DIV2"));?>";
target_element.innerHTML += "<?=escapeJavascriptText(create_my_div("DIV3", "THIS IS DIV3"));?>";
}
</script>
This method will allow you to include javascript code or whatever without worrying about triple nesting
Here's another use case for this method:
Dynamically adding Javascript code:
<?php
function loop_start($varName) {
?>
for (var i=0; i<<?php print_r($varName);?>.length; i++) {
<?php
}
?>
Now your Javascript code could look like this:
<script>
<?php
loop_start("myArray");
?>
console.log(myArray[i]);
}
</script>
Which would result in the following to be rendered:
<script>
for (var i=0; i<myArray.length; i++) {
console.log(myArray[i]);
}
</script>
Conclusion
Stop worrying about trying to triple escape or double escape, or even escape at all.
With the tricks outlined in this answer, you can avoid escaping all together.
(Escape the confusion if you will)

How can I use window.open in my string echo'd from PHP?

Through a $_POST request I query a database and return info in a string as follows:
$output .='<div class="searchdiv"> <b>'.$tit.' </b>- '.$art.' <br> watch full tutorial</div>';
My problem is the "window.open" statement. It works as follows in a plain html doc as inline JS:
$output .='<div class="searchdiv"> <b>'.$tit.' </b>- '.$art.' <br> watch full tutorial</div>';
But I think my problem in the PHP string is the single and double quotation marks.What am I doing wrong?
You need quotes around the URL.
$output .= '... <a href="#" onclick="window.open("' . $prev . '", "_blank", ...
// ---------------------------------------- here ^ -- and here ^
You would be able to notice this pretty quick if you looked at your HTML source, to see what was generated.
It seems that you've messed up the quotes in there slightly...
$output .='<div class="searchdiv"> <b>'.$tit.' </b>- '.$art.' <br> watch full tutorial</div>';
You used " to define the onclick event, however you've used " inside of that event, which made it invalid. Replace the " inside of the event with \', which will escape the quote and not mess up your PHP.
$output .='<div class="searchdiv"> <b>'.$tit.' </b>- '.$art.' <br> watch full tutorial</div>';
And, if $prev is not referring to a variable in JS (if it will end up as a string), you need those quotes around that as well.
\''.$prev.'\'

how can i use ' and " in a code in PHP and Javascript?

I'd like how i can use a lot of ' and " in a code.
Example:
echo 'document.write("<a href='$url'> <img src='{$row["image"]}' border='0' /> </a>");';
I tried but i'm getting error. Anyone can help?
so, you have multi-level problem here:
data which is echoed to html, usually should be properly escaped via htmlspecialchars
you want to see document.write("..."..."); in your finally produced html, this will trigger javascript syntax error
to avoid this error, you should use \ before " inside string
echo 'document.write("<img src=\"' . htmlspecialchars($row["image"]) . '\" border=\"0\" />");';
note: I'm using echo with single quotes, if you're using double quotes - you will have to double \\
in case of double quotes your code will look like:
echo "document.write(\"<img src=\\\"" . htmlspecialchars($row["image"]) . "\\\" border=\\\"0\\\" />\");";
Here are three ways to tackle this problem.
1. Escaping the inner double slashes
echo "document.write(' <img src=\"{$row['image']}\" border=\"0\" /> ');";
2. Closing your PHP tags and writing javascript
?>
document.write(' <img src="<?php echo $row['image']; ?>" border="0" /> ');
<?php
3. Using Heredoc syntax
echo <<<EOJS
document.write(' <img src="{$row['image']}" border="0" /> ');
EOJS;
This will work:
<?php
$url = "http://www.google.com";
$row = array("image" => "image.png");
echo "document.write(' <img src=\"".$row["image"]."\" border=0 /> ');";
// output: document.write(' <img src="image.png" border=0 /> ');
?>
You can use the heredoc syntax:
echo <<<EOT
document.write(<a href='{$url}'> <img src='{$row["image"]}' border='0' /> </a>);
EOT;
From phpdocs
Heredoc text behaves just like a double-quoted string, without the
double quotes. This means that quotes in a heredoc do not need to be
escaped, but the escape codes listed above can still be used.
Variables are expanded, but the same care must be taken when
expressing complex variables inside a heredoc as with strings.
Also note, that
It is very important to note that the line with the closing identifier
must contain no other characters, except a semicolon (;). That means
especially that the identifier may not be indented, and there may not
be any spaces or tabs before or after the semicolon. It's also
important to realize that the first character before the closing
identifier must be a newline as defined by the local operating system.
This is \n on UNIX systems, including Mac OS X. The closing delimiter
must also be followed by a newline.

html onClick open url stored in a php variable

Following is my code, am getting Uncaught SyntaxError: Unexpected token }, but i don't see any } in my code. window.open is expecting url in quotes, I tried different combinations of single and double quotes but not working and unable to escape the double quote in echo either.Please help
Thanks..
<?php
$a = "https://www.google.co.in/";
?>
<html>
<body>
<form>
<input type="button" width="100" onClick="window.open(<?php echo '"'; echo $a; echo '"'; ?>)" height="100%" value="Edit Record"/>
</form>
</body>
</html>
You are outputting " characters into your onClick attribute value. Since you use those characters to delimit the value, the first one ends the script in the middle of the statement.
Use " instead.
But that's a quick and dirty hack. There are better approaches.
Do not try to generate JavaScript strings by mashing PHP strings together. Use a robust escaping function. json_encode will give you the JavaScript literal (including quote characters where needed) for any simple data structure.
Do not try to generate HTML by mashing strings together. Use a robust escaping function. htmlspecialchars will do all you need.
Such:
onClick="window.open(<?php echo htmlspecialchars(json_encode($a)); ?>)"
But don't use JavaScript when HTML will do:
<a href="<?php echo htmlspecialchars($a); ?>" target="_blank">
You should use echo "'$a'". The main problem is that you would habe double-double quotes in your onclick attribute. Or even better window.open('<?php echo $a; ?>').

How to pass long value to javascript function

I have javascript function:
function someAction(thisTd,text){
alert(text);
thisTd.innerHTML=text;
...
}
And html-file:
<td onclick="someAction(this,<?echo 'Long-long text with <b>html-formatting</b>'?>)"/>
When I use such code function someAction doesn't call (because alert doesn't show) and in the error console in Opera no error is displayed. How to fix this problem?
P.S. I do not use frameworks(JQuery etc.).
UPDATE #1
When I use such code:
<?$encoded=str_replace("\n","",str_replace("\r\n","",$text));echo $encoded?>
It works nice. But I'm not sure, that it work correct in Linux.(I use Windows)
Make sure that you HTML encode it and put single quotes around the parameter:
<td onclick="someAction(this, '<?echo htmlspecialchars('Long-long text with <b>html-formatting</b>', ENT_QUOTES) ?>')"/>
You should remoce echo tag and the ?
<div onclick="someAction(this,'Long-long text with <b>html-formatting</b>')">myDiv</div>
and your function is :
function someAction(thisTd,text){
thisTd.nodeValue=innerHTML
...
}
You must wrap the string in single or html encoded double quotes in the first place:
<td onclick="someAction(this, '<?php echo 'yada yada'; ?>');"/>
<!-- OR -->
<td onclick="someAction(this, "<?php echo 'yada yada'; ?>");"/>
Secondly, the "echo"ed output can contain single or double quotes that can break the javascript string or the html attribute. Assuming that you're using single quotes to wrap the echoed string:
<td onclick="someAction(this, '<?php echo htmlspecialchars( str_replace( "'", "\\'", $that_long_text ) ); ?>');"/>
Just put the quotes around the text, you're producing:
Logically, this gives an error.
Use simple quotes or escape double quotes (\")

Categories