将TinyMCE图像上载与CakePHP 3.8集成时出现CSRF问题

我正在使用CakePHP3.8为网站创建CMS。我需要一个简单的所见即所得编辑器与图像上传。我以前使用过CKEditor，但是在上传图像时遇到了问题，所以我想我应该试试TinyMCE

因此，我下载了TinyMCE 5（带有所有标准插件），将其链接到页面的标题部分，并创建了一个带有TinyMCE文本区域的表单，如下所示：

<fieldset>
    <legend>New Page</legend>
    <?php
        echo $this->Flash->render();
        echo $this->Form->create($newpage);
        echo $this->Form->control('title');
        echo $this->Form->control('content', 
                      array('label' => 'Page Content',
                            'type' => 'textarea', 
                            'id' => 'editor_area'));
        echo $this->Form->button('Save');
        echo $this->Form->end();
    ?>
</fieldset>

<script>
    tinymce.init({
        selector:'#editor_area',
        height: 500,
        menubar: false,
        images_upload_url: '<?php echo IMG_UPLOAD_URL ?>',
        toolbar: [
            'undo redo | cut copy paste | styleselect | bold italic underline removeformat | alignleft aligncenter alignright | charmap | bullist numlist | link image'
        ],
        plugins: ['advlist lists link autolink image charmap imagetools code']
    });
</script>

上载图像时，控制台中出现以下错误：

Failed to load resource: the server responded with a status of 403 (Forbidden) 

CakePHP的输出显示错误：

Error: CSRF token mismatch.

调试器显示POST包含以下内容：

Cookie: CAKEPHP=dvsktjv7vp8la5nv7dv19634d1; csrfToken=53e5718e13a1e963d51f9c93c48471a478b35c02b565d6f0699cd2a335775c2b17986cfc2cc587ff7343a6573e3eb2e498a9cb962397599c023417d1dfa9506c; ckCsrfToken=7l2PEC0g06819qQcLwdX5ul7E7jNRa3r61jENt2x

我不知道接下来该怎么办

---

（或者，如果有一种更直接的方法，包括一个免费/便宜的WYSIWYG编辑器和一个像样的图像/文件上传器，我愿意接受建议！这是一个学校的网站，所以预算很小，不可能是每月的费用。）

cookie数据只是CSRF保护机制的一部分，客户端需要在请求数据或

X-CSRF-token

头中发送CSRF令牌

我对TinyMCE图像上传不太熟悉，但是看看文档，您可能需要一个定制的上传处理程序，您可以在其中添加额外的数据，即CSRF令牌

例如，处理程序可能看起来像这样，其中CSRF令牌被附加到表单数据中：

images\u upload\u处理程序：函数（blobInfo，成功，失败）{
var-xhr，formData；
xhr=newXMLHttpRequest（）；
xhr.withCredentials=false；
xhr.open（'POST'，）；
xhr.onload=函数（）{
var-json；
如果（xhr.status！=200）{
失败（'HTTP错误：'+xhr.status）；
返回；
}
json=json.parse（xhr.responseText）；
如果（！json | | typeof json.location！=“string”）{
失败（“无效的JSON:”+xhr.responseText）；
返回；
}
成功（json.location）；
};
formData=新的formData（）；
append（'file'，blobInfo.blob（），blobInfo.filename（））；
//在表单数据中追加CSRF令牌
formData.append（“'u csrfToken'”）；
xhr.send（formData）；
}

另外，根据文档，响应JSON必须包含一个名为

location

的属性，该属性包含上传文件的web路径，该路径可能位于您遗漏的代码中，以防万一

另见

---

cookie数据只是CSRF保护机制的一部分，客户端也需要在请求数据或

X-CSRF-token

头中发送CSRF令牌

我对TinyMCE图像上传不太熟悉，但是看看文档，您可能需要一个定制的上传处理程序，您可以在其中添加额外的数据，即CSRF令牌

例如，处理程序可能看起来像这样，其中CSRF令牌被附加到表单数据中：

images\u upload\u处理程序：函数（blobInfo，成功，失败）{
var-xhr，formData；
xhr=newXMLHttpRequest（）；
xhr.withCredentials=false；
xhr.open（'POST'，）；
xhr.onload=函数（）{
var-json；
如果（xhr.status！=200）{
失败（'HTTP错误：'+xhr.status）；
返回；
}
json=json.parse（xhr.responseText）；
如果（！json | | typeof json.location！=“string”）{
失败（“无效的JSON:”+xhr.responseText）；
返回；
}
成功（json.location）；
};
formData=新的formData（）；
append（'file'，blobInfo.blob（），blobInfo.filename（））；
//在表单数据中追加CSRF令牌
formData.append（“'u csrfToken'”）；
xhr.send（formData）；
}

另外，根据文档，响应JSON必须包含一个名为

location

的属性，该属性包含上传文件的web路径，该路径可能位于您遗漏的代码中，以防万一

另见

Cookie: CAKEPHP=dvsktjv7vp8la5nv7dv19634d1; csrfToken=53e5718e13a1e963d51f9c93c48471a478b35c02b565d6f0699cd2a335775c2b17986cfc2cc587ff7343a6573e3eb2e498a9cb962397599c023417d1dfa9506c; ckCsrfToken=7l2PEC0g06819qQcLwdX5ul7E7jNRa3r61jENt2x