Next.js 示例可能让动态产品数据突破 JSON-LD 脚本并执行任意浏览器代码
原文依据:2 处示例把含有 `product.name` 的对象交给 `JSON.stringify`,再直接传入 `dangerouslySetInnerHTML`。JSON 字符串化不会自动把 `<` 转义为 HTML 安全形式;若任何动态字段包含 `</script>`,浏览器可提前结束 JSON-LD 标签,并把后续内容解析为可执行 HTML/JavaScript。
攻击者若能控制产品名称或其他被加入 schema 的字段,可能在访问产品页的用户浏览器中执行脚本,进而窃取可访问数据、冒充用户操作或篡改页面。
该风险存在,但代码是供复制的 Next.js 示例,并非技能自身正在执行的脚本。示例把动态的 `product.name` 放入对象,经 `JSON.stringify` 后直接交给 `dangerouslySetInnerHTML`;`JSON.stringify` 不会把 `<` 转成 HTML 安全转义。如果产品字段可被不受信任者控制并含有 `</script>`,浏览器可能提前结束 JSON-LD 标签并解析后续注入内容,导致页面访问者浏览器执行代码。用户可要求作者采用会转义 `<` 的安全 JSON-LD 序列化方式,并限制或清理动态字段。
```jsxexport default function ProductPage({ product }) { const schema = { "@context": "https://schema.org", "@type": "Product", name: product.name, // ... other properties }; return ( <> <Head> <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(schema) }} /> </Head>查看另外 1 个位置
### Dynamic Sites (React, Next.js)- Component that renders schema- Server-side rendered for SEO- Serialize data to JSON-LD