Next.js 12.3.4中Head组件转义&致Firebase 403问题求解

Next.js 12.3.4的Head组件会自动转义meta标签content属性中的特殊字符（如&变为&），这会导致Firebase存储的图片URL失效并返回403错误。以下是两种可行的解决方法：

方法1：使用raw属性禁用转义 #

Next.js 12.1.0及以上版本为Head组件的meta标签提供了raw属性，设置为true即可阻止内容转义：

import Head from 'next/head'

function Page({ ssrData }) {
  const { imageUrl } = ssrData
  return (
    <>
      <Head>
        <meta property="og:image" content={imageUrl} raw={true} />
      </Head>
      <!-- 页面其他内容 -->
    </>
  )
}

方法2：使用dangerouslySetInnerHTML手动生成标签 #

若raw属性无法满足需求，可通过dangerouslySetInnerHTML直接渲染未转义的meta标签：

import Head from 'next/head'

function Page({ ssrData }) {
  const { imageUrl } = ssrData
  const metaHtml = `<meta property="og:image" content="${imageUrl}" />`

  return (
    <>
      <Head>
        <div dangerouslySetInnerHTML={{ __html: metaHtml }} />
      </Head>
      <!-- 页面其他内容 -->
    </>
  )
}

注意：此方法需确保imageUrl为可信来源，避免XSS攻击风险。

验证结果 #

修改后检查页面源码，确认meta标签content中的&未被转义为&，此时Firebase图片应能正常访问。

内容的提问来源于stack exchange，提问作者fgrs