node.js - 使用 wp_insert_post 时，Wordpress 正在从 Base64 编码图像中删除 'data' 属性

Question

编辑 1

This is not about the browser. This happens if I'm not logged in. When I logged in, it works perfectly. Sorry for the rush.

我知道这很奇怪，没有任何意义也很难解释。

正如标题所说，浏览器导致了这个问题，但我不确定。

所以我有一个图像服务，可以从某处读取一些数据并通过读取的数据创建图像。然后它会执行一些操作并返回 base64 格式的图像，以便我可以在我的网站中使用这些图像。当我在网站上打开页面时，此过程就会开始。

问题是，如果我在 Safari 上打开页面，它可以正常工作，但今天我尝试在 Chrome 上打开页面，但图像未加载。因此我检查了图像，发现数据 URI 的开头没有 data 属性。

让我用一个例子来解释；

这是我创建 HTML 模板时的代码

  presets += `<div class="icon"> <img src="data:image/png;base64,${icon}"></div>`
  presets += `<p class="name">${name}</p>`
  presets += `<div class="image"> <img src="data:image/png;base64,${image}"/></div>`

我正在做一些事情，然后返回这些数据，在 postman 和 safari 上我得到这个结果:

<div class="icon"> <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA{ ... }"></div>

所以这很好。这没什么问题。

但是当我在 Chrome 或 Opera 上打开页面时，我得到了这个；

<div class="icon"> <img src="image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA{ ... }"></div>

看到了吗？没有 data 属性。我正在 WordPress 中插入一篇文章，这是该文章的内容。为什么会发生这种情况？我希望我已经清楚地解释了我自己。

编辑2

这是我用来插入帖子的函数

function programmatically_create_post($title, $content, $slug)
{

    // Setup the author,
    $author_id = 4;

    // If the page doesn't already exist, then create it
    if (!the_slug_exists($slug)) {

            // Set the post ID so that we know the post was created successfully
            wp_insert_post( 
                    array(  
                            'post_title'            =>      $title,
                            'post_content'          =>      $content,
                            'comment_status'        =>      'closed',
                            'ping_status'           =>      'closed',
                            'post_author'           =>      $author_id,
                            'post_name'             =>      $slug,  
                            'post_status'           =>      'publish',
                            'post_type'             =>      'post', 
                            'page_template'         =>      'dynamic-post.php',
                            'post_category'         =>      array(1,60)
                         )
            );
            // Redirect user to the post after the post created
            wp_redirect(get_site_url() . '/blog/' . $slug);
            exit();
            // Otherwise, we'll stop
    } else {
            return;
    } // end if

} // end programmatically_create_post

Answer 1

嗯，这是一个噩梦，但我想在深入研究通过 wp_insert_post Hook 的 WordPress 代码后我已经解决了这个问题。请将其添加到您的 functions.php 文件中并检查其是否有效:

add_filter('kses_allowed_protocols', function ($protocols) {
    $protocols[] = 'data';

    return $protocols;
});

本质上，WordPress 内部有一个过滤器，它会检查内容中任何 URL 的协议(protocol)并删除任何它不喜欢的内容。默认情况下，支持的列表不支持该数据协议(protocol)。上面的函数只是将其添加到支持的协议(protocol)列表中。

如果您是管理员，则此过滤器不会运行，这可能就是您仅在注销时看到此问题的原因。