在 NextJS 中将字符串 HTML 注入头部不起作用

Question

我们有一个 NextJS 页面和一个无头 CMS。

在这个 CMS 中，我为管理员添加了一个选项，可以保存任意片段以注入头部或主体的末尾。

在 nextJS 中，我试图以两种方式实现它：

1. 我在带有“dangerouslySetInnerHTML”的 div 中注入了 HTML：

{this.bodyScripts && (
  <div dangerouslySetInnerHTML={{__html: `${this.bodyScripts}`}} />
)}

这行得通。 但是，我有两个问题。 该片段实际上并不是在结束正文标记之前的末尾，而是包含在不必要的 div 中。 这两个问题都是偏好而不是真正的问题。 此方法不能在页眉中使用，因为我没有可以用来包装它的 HTML 标记。

2. 我试图在我的页面组件的componentDidMount function 中注入代码片段：

      public componentDidMount() {
        if (this.headerScripts) {
          const head = document.getElementsByTagName('head')[0];
          head.insertAdjacentHTML('beforeend', `${headerScripts}`);
        }
        if (this.bodyScripts) {
          const body = document.getElementsByTagName('body')[0];
          body.insertAdjacentHTML('beforeend',`${this.bodyScripts}`);
        }
      }

片段被注入，似乎它们不是 HTML 编码或任何东西。 但他们不会被处决。

作为参考，我尝试创建一个脚本元素并注入：

const body = document.getElementsByTagName('body')[0];
let myScript = document.createElement("script");
myScript.src = 'some URL to a script';
body.appendChild(myScript);

这行得通。 但这违背了注入任意脚本的目的，管理员应该可以选择添加他想要的任何内容。 我知道安全风险，但我们还是决定这样做:)

我也尝试使用 appendChild：

const body = document.getElementsByTagName('body')[0];
let div = document.createElement("div");
div.innerHTML = `${this.bodyScripts}`;
body.appendChild(div);

这也不起作用。 我完全感到困惑，因为我不明白为什么创建脚本标签并注入它会起作用，但注入字符串变量却不会。 我使用普通的 javascript 来做到这一点，据我所知，没有任何东西被消毒......

任何帮助，将不胜感激：）

Answer 1

可以从Next.js 自定义_app组件中系统地在head和body中附加元素。

_app组件接收Component和pageProps并且可以：

• 使用next/head根据pageProps动态地将 append 元素添加到head
• append 基于pageProps的页面组件之后的任何内容