Pass html variable from Ajax to PHP

Question

I am trying to use this code to pass via POST a variable containing HTML

var data = {
    message: $('#mydiv').html()
};
jQuery.ajax({
    type: 'POST',
    data: data,
    url: '/myurl?action=send_email',
    success: function( response ) { }
});

In PHP, I retrieve the data and I send an Email using the data content

$message = "Hello<br>" . $_POST['message'] . "<br>Bye Bye";
$mail = mail($email, $subject, nl2br($message), $headers);

The HTML within the email that I receive is badly formatted:

<img width="\&quot;70\&quot;" height="\&quot;87\&quot;" alt="\&quot;D_6928_antiqueoak_vapor\&quot;">

Can someone tell me why and if there is a solution? Thank you a lot

Uh... Why not? Do you receive a lot of plain-text e-mails? With no formatting, no line breaks and all? — Jeremy Thille, Apr 01 '15 at 07:46
@Ruben what are your mail headers? Did you activate UTF-8 encoding? — Jeremy Thille, Apr 01 '15 at 07:46
No I mean why are you sending HTML from the browser to your server. Its going to be really difficult to validate or sanitize, just use `$.data()` or `$.attr('whatever')` and send plain data which you then construct HTML with. — max, Apr 01 '15 at 07:50
@papirtiger you can send html esay enough, why would you bother reconstructing the html on the server side if you can just grab it from the client side already laid out and ready to go. Not to mention it would make it easier to abstract your php code — Wesley Smith, Apr 01 '15 at 07:55
Because of [XSS](http://en.wikipedia.org/wiki/Cross-site_scripting) — max, Apr 01 '15 at 07:56
Find the old question link http://stackoverflow.com/questions/1787322/htmlspecialchars-equivalent-in-javascript — Shelim, Apr 01 '15 at 09:09

score 0 · Answer 1 · answered Apr 01 '15 at 07:47

Try this method using encodeURIComponent()

var data = 'message='+$('#mydiv').html();
jQuery.ajax({
    type: 'POST',
    data: encodeVars(data),
    url: '/myurl?action=send_email',
    success: function( response ) { }
});


function encodeVars(vars){
    return vars.map(function (cell) {
        var res = cell.split('=');
        return res[0] + '=' + encodeURIComponent(res[1]);
    }) ;    
}

score 0 · Answer 2 · answered Apr 01 '15 at 07:48

0

Always set content-type when sending HTML email

$headers = "MIME-Version: 1.0" . "\r\n";
$headers .= "Content-type:text/html;charset=UTF-8" . "\r\n";

answered Apr 01 '15 at 07:48

Asit

458
4
14

Thank you for the tip, but I don't think this could be related to the problem – Ruben Rizzi Apr 04 '15 at 05:33

score 0 · Answer 3 · answered Apr 04 '15 at 05:38

I solved in that way. Javascript

var data = {
    message: $('#mydiv').html()
};
jQuery.ajax({
    type: 'POST',
    data: data.replace(/&/g, "&amp;")
            .replace(/"/g, "&quot;")
            .replace(/'/g, "&#039;"),
    url: '/myurl?action=send_email',
    success: function( response ) { }
});

PHP

$message = preg_replace('/&amp;/', '&', $_POST['message']);
$message = preg_replace('/&quot;/', '"', $message);
$message = preg_replace('/&#039;/', "'", $message);
$message = "Hello<br>" . $message . "<br>Bye Bye";
$mail = mail($email, $subject, nl2br($message), $headers);

Pass html variable from Ajax to PHP

3 Answers3