如何正确转义 html 以发送 AJAX 请求？

Question

我正在尝试通过 AJAX 请求发送 following content，我需要将 html 内容存储在数据库列中。

到目前为止，我所做的是尝试在将 html 发送到AJAX 之前对其进行转义：

let escapedHtml = escapeHtml(content); // content contains the html above (pastebin)
let campaign.content = escapedHtml;
let postData = { campaign: JSON.stringify(campaign) };
let postUrl = 'some url';

$.post(postUrl, postData, function (response) {
   console.log('Yeah, we did it!');
}, 'json').fail(function(){
   console.log('Something bad happened');
});

我已经为转义定义了一个自定义函数：

function escapeHtml(string) {
    var entityMap = {
        '&': '&',
        '<': '&lt;',
        '>': '&gt;',
        '"': '&quot;',
        "'": '&#39;',
        '/': '&#x2F;',
        '`': '&#x60;',
        '=': '&#x3D;'
    };

    return String(string).replace(/[&<>"'`=\/]/g, function (s) {
        return entityMap[s];
    });
}

AJAX 请求将内容发送到Codeigniter 控制器，我按以下方式处理：

public function ajax_save_campaign()
{
    try
    { 
        $campaign = json_decode($this->input->post('campaign'), TRUE);
        $this->load->model('newsletter_model');
        $campaignId = $this->newsletter_model->add_campaign($campaign);

        $this->output
            ->set_content_type('application/json')
            ->set_output(json_encode([
                'status' => AJAX_SUCCESS,
                'id' => $campaignId
            ]));
    }
    catch(Exception $exc)
    {
        $this->output
            ->set_content_type('application/json')
            ->set_output(json_encode([
                'exceptions' => [exceptionToJavascript($exc)]
            ]));
    }
}

问题在于，如果我转储变量 $campaign['content']，我不会得到正确的 html，但 this 这是完全不同的。那么AJAX请求完成后如何从php中恢复原来的html结构呢？

谢谢。

更新

我无法发送原始 html，因为这会破坏包含其他属性的 $campaign 变量，例如（html 没有像上面的 escapeHtml 那样转义）：

$campaign = json_decode($this->input->post('campaign'), TRUE);
var_dump($campaign);

变量$campaign实际上是NULL

这个$this->input->post('campaign') 包含以下内容：

"{"campaign_name":"hello world","sender_title":"test","reply_email":"hello@uxdes54.com","subject":"test","launch_date":1593426034,"groups":"1","templates":"1","content":"<p>Lethe Newsletter Verification</p>\n\n<p> </p>\n\n<p>&lt;!-- page content --&gt;</p>\n\n<div id=\ xss=removed>\n<h3>{ORGANIZATION_NAME}<br>\n<small>E-Mail Verification</small></h3>\n\n<hr>\n<p>Hello {SUBSCRIBER_NAME},</p>\n\n<p>Welcome to {ORGANIZATION_NAME}! Please take a second to confirm <span xss=removed>{SUBSCRIBER_MAIL}</span> as your email address by clicking this link:</p>\n\n<p><strong>{VERIFY_LINK[Click Here!]}</strong></p>\n\n<p>Once you do, you will be able to opt-in to notifications of activity and access other features that require a valid email address.</p>\n\n<p>Thank You!</p>\n\n<hr>\n<div xss=removed><small>{company_name}<br>\n{company_phone_1} - {company_phone_2} </small></div>\n</div>\n\n<div id=\ xss=removed><small>{LETHE_SAVE_TREE}</small></div>\n\n<p>&lt;!-- page content --&gt;</p>\n\n<p> </p>\n"}"

Answer 1

正如 Magnus Eriksson 在评论中所说，您应该通过 ajax 将原始 HTML 代码发送到您的 PHP 控制器并将其插入到您的数据库中。

您通过转储获得的内容正是您想要获得的内容 - 转义字符串。在您的 PHP 中，没有任何功能（至少我看不到它）可以取消您在 JS 端转义的内容。

通过 ajax 发送完整的 HTML 字符串应该不会有任何问题。

编辑： 为什么要以 JSON 格式发送数据，而不是像这样发送对象本身？

$.ajax({
 type: 'POST',
 url: post_url,
 data: {
  campaign: campaign
 },
 success: function(msg) {
  console.log(msg)
 }
});