Gatsby多页面模板渲染YAML内HTML标签：方案是否可行及优化建议

一、dangerouslySetInnerHTML方案的可行性 #

这个方案完全可行，但要明确它的核心风险：

• 它会跳过React的XSS防护机制，直接将HTML字符串插入DOM。如果你的YAML/JSON内容是自己维护、无用户输入的，安全风险极低；但如果内容来自第三方或用户提交，就可能存在恶意脚本注入的隐患。
• 实现示例：

import { useStaticQuery, graphql } from "gatsby";

export default function PageTemplate() {
  const data = useStaticQuery(graphql`
    query {
      allYaml {
        nodes {
          path
          contentHtml
        }
      }
    }
  `);
  const pageContent = data.allYaml.nodes.find(node => node.path === "/about");
  
  return <div dangerouslySetInnerHTML={{ __html: pageContent.contentHtml }} />;
}

二、更优的替代方案 #

1. 使用MDX（推荐） #

Gatsby对MDX支持非常完善，MDX允许在Markdown中混合HTML和React组件，完美适配“统一模板+结构化内容”的需求：

• 页面内容文件示例（about.mdx）：

---
path: "/about"
title: "关于我们"
---
<p>这是一段带<strong>加粗</strong>的文本，还可以直接调用React组件：</p>
<Button text="点击了解更多" />

• 模板组件渲染示例：

import { MDXRenderer } from "gatsby-plugin-mdx";
import { useStaticQuery, graphql } from "gatsby";
import Button from "../components/Button";

export default function PageTemplate() {
  const data = useStaticQuery(graphql`
    query {
      allMdx {
        nodes {
          frontmatter {
            path
            title
          }
          body
        }
      }
    }
  `);
  const page = data.allMdx.nodes.find(node => node.frontmatter.path === "/about");
  
  return (
    <div>
      <h1>{page.frontmatter.title}</h1>
      <MDXRenderer components={{ Button }}>{page.body}</MDXRenderer>
    </div>
  );
}

这种方式兼顾了Markdown的简洁性和HTML/组件的灵活性，比在YAML中硬塞HTML更易维护。

2. 结构化内容+React组件渲染 #

如果不想用MDX，可以把YAML内容拆成结构化字段，避免直接写HTML字符串，再在模板中根据字段渲染对应组件：

• YAML文件示例：

path: "/about"
title: "关于我们"
content:
  - type: paragraph
    text: "这是一段普通文本"
  - type: highlightedText
    text: "这段文本需要高亮显示"
  - type: link
    url: "/contact"
    text: "联系我们"

• 模板组件处理示例：

import { useStaticQuery, graphql } from "gatsby";
import HighlightedText from "../components/HighlightedText";
import LinkButton from "../components/LinkButton";

export default function PageTemplate() {
  const data = useStaticQuery(graphql`
    query {
      allYaml {
        nodes {
          path
          title
          content {
            type
            text
            url
          }
        }
      }
    }
  `);
  const page = data.allYaml.nodes.find(node => node.path === "/about");

  const renderContent = (item) => {
    switch(item.type) {
      case "paragraph":
        return <p>{item.text}</p>;
      case "highlightedText":
        return <HighlightedText text={item.text} />;
      case "link":
        return <LinkButton url={item.url} text={item.text} />;
      default:
        return null;
    }
  };

  return (
    <div>
      <h1>{page.title}</h1>
      {page.content.map((item, index) => renderContent(item, index))}
    </div>
  );
}

这种方式完全规避了HTML注入风险，内容结构更清晰，也方便后续扩展组件类型。

3. 使用HTML解析库（折中方案） #

如果必须保留YAML中的HTML字符串，又想降低风险，可以用react-html-parser这类库，它会把HTML字符串转换成React元素，还支持过滤恶意标签：

• 安装依赖：npm install react-html-parser
• 模板使用示例：

import ReactHtmlParser from "react-html-parser";
import { useStaticQuery, graphql } from "gatsby";

// 配置允许的标签和属性
const options = {
  allowedTags: ["p", "strong", "em", "a"],
  allowedAttributes: {
    "a": ["href"]
  }
};

export default function PageTemplate() {
  const data = useStaticQuery(graphql`
    query {
      allYaml {
        nodes {
          path
          contentHtml
        }
      }
    }
  `);
  const pageContent = data.allYaml.nodes.find(node => node.path === "/about");
  
  return <div>{ReactHtmlParser(pageContent.contentHtml, options)}</div>;
}

这种方式比dangerouslySetInnerHTML更安全，同时保留了直接编写HTML的便利性。

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