无法在Docusaurus文档中嵌入CodeSandbox iframe问题求助

排查时优先打开浏览器开发者工具的控制台和网络标签，可快速定位具体报错原因

• 同源策略与CSP限制：CodeSandbox默认会开启严格的内容安全策略（CSP），如果你的嵌入页面的响应头里没有包含frame-ancestors规则允许你的站点域名嵌入，就会被浏览器拦截。YouTube的公共嵌入接口默认放开了大部分站点的嵌入权限，所以不会触发这个问题。如果控制台出现Refused to frame 'xxx' because an ancestor violates the following Content Security Policy directive: "frame-ancestors ..."类报错，调整站点CSP配置、确认嵌入目标的frame-ancestors规则即可解决。
• 嵌入URL格式错误：CodeSandbox的嵌入地址不能直接用项目预览页的普通URL，需要使用带embed路径的专用嵌入地址。比如普通预览地址为https://codesandbox.io/s/xxx，嵌入用地址需要调整为https://codesandbox.io/embed/xxx，路径填写错误会直接触发404或者构建错误提示。
• iframe属性配置缺失/错误：CodeSandbox的运行环境需要特定的权限配置才能正常工作，需正确配置allow和sandbox属性，参考配置如下：

  <iframe 
    src="你的CodeSandbox嵌入地址"
    allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
    sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
    width="100%"
    height="500px"
    frameborder="0"
  ></iframe>
  

  如果sandbox属性限制过严，会导致CodeSandbox的构建逻辑无法正常运行，对应调整属性值即可。
• 项目本身的资源访问错误：如果你的CodeSandbox项目里引用了未配置CORS的第三方资源，嵌入模式下的跨域请求会被浏览器拦截，触发构建失败。可以先在单独标签页打开CodeSandbox的预览地址，确认项目本身可以正常构建运行，再排查嵌入场景的特殊限制。
• CodeSandbox项目权限设置：如果你的CodeSandbox项目设置为私有，未登录状态下或者跨域嵌入时会被权限拦截触发错误，将项目调整为公开权限，或者配置对应访问权限后再测试即可。

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