使用 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.

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

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

所以我有一个图像服务，它从某个地方读取一些数据并根据读取的数据创建图像。然后它做了一些事情和 returns 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 中插入一个 post，这是 post 的内容。为什么会这样？我希望我已经清楚地解释了自己。

编辑 2

这是我用来插入post

的函数

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 挂钩的 WordPress 代码后已经解决了它。请将此添加到您的 functions.php 文件并检查它是否有效：

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

    return $protocols;
});

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

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

使用 wp_insert_post 时，Wordpress 正在从 base64 编码图像中删除 'data' 属性

Wordpress is removing 'data' attribute from base64 encoded image when using wp_insert_post

wordpress

image

node.js

base64url