开启 Content Security Policy 后 Ant Design 动态样式怎么处理【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/GitHub_Trending/an/ant-design生产环境给页面开启 Content Security PolicyCSP后Ant Design 这类在运行时注入style标签的组件库会受到影响部分组件为了支持波纹效果使用了动态样式来源ConfigProvider 文档。如果浏览器策略要求内联样式必须携带合法 nonce而这些运行时样式节点没有 nonce就会被 CSP 拦截。Ant Design 的官方处理方式是在 ConfigProvider 上配置csp属性把nonce传给组件库由其附加到动态生成的样式节点上。官方 FAQ 中「开启了 Content Security Policy (CSP) 如何处理动态样式」一条给出的答复也是如此通过ConfigProvider配置nonce属性。配置 csp 属性csp是ConfigProvider的一个属性类型定义为{ nonce: string }见 ConfigProvider API 表。用法如下import { ConfigProvider } from antd; const Demo: React.FC () ( ConfigProvider csp{{ nonce: YourNonceCode }} App / /ConfigProvider );说明两点YourNonceCode是文档示例中的占位值需要替换为你自己页面实际使用的 nonce 值即与服务端下发的 CSP 策略中style-src允许的 nonce 保持一致。文档没有给出 nonce 的具体生成规则这里遵循 CSP 本身的约定由页面自行确定。ConfigProvider基于 React context 全局生效只需在应用外围包裹一次组件源码 中csp的取值为customCsp || parentContext.csp即内层ConfigProvider不显式传csp时会继承外层配置因此在外层配一次即可。nonce 作用在哪些样式节点上从源码可以看到 nonce 的两条注入路径用于判断配置后哪些动态样式会带上它组件样式useToken 从ConfigContext读取csp并把nonce: csp?.nonce传入useCacheToken供 cssinjs 的样式注册使用图标样式useResetIconStyle 在useStyleRegister中使用nonce: () csp?.nonce!为ant-design/icons的运行时样式附加 nonce。也就是说配置csp{{ nonce }}后Ant Design 运行时注册的组件样式与图标样式节点都会带上该 nonce。如何验证 nonce 已生效项目自身的测试 nonce.test.tsx 给出了验证方式渲染带csp配置的ConfigProvider后查询 DOM 中的style节点断言其nonce属性等于配置值render( ConfigProvider csp{{ nonce: little }} SmileOutlined / /ConfigProvider, ); const styleNode document.querySelector(style); expect(styleNode?.nonce).toBe(little);对应到实际项目判断方法就是打开开启了 CSP 的页面在浏览器控制台执行类似document.querySelectorAll(style)检查 Ant Design 动态注入的样式节点是否带有你配置的nonce值并观察控制台不再有 CSP 拦截动态样式的报错。测试中还有一个更完整的用例渲染Button后遍历所有style节点并逐一断言style.nonce等于配置值可参考cssinjs should support nonce用例。边界说明CSPConfig类型context.ts 中的interface CSPConfig只定义了nonce一个可选字段文档记录的 CSP 配置能力就是这个nonce不要据此假设csp还能透传其他 CSP 指令。nonce 只解决「样式节点缺少 nonce 被 CSP 拦截」这一项。页面如果还有内联脚本等其他 CSP 问题不在该属性的覆盖范围内文档未提供对应配置。配置完成后的验收标准即上文验证部分动态style节点携带正确 nonce且开启 CSP 的页面中 Ant Design 组件含波纹效果的交互、图标渲染样式正常显示。【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/GitHub_Trending/an/ant-design创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
开启 Content Security Policy 后 Ant Design 动态样式怎么处理
开启 Content Security Policy 后 Ant Design 动态样式怎么处理【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/GitHub_Trending/an/ant-design生产环境给页面开启 Content Security PolicyCSP后Ant Design 这类在运行时注入style标签的组件库会受到影响部分组件为了支持波纹效果使用了动态样式来源ConfigProvider 文档。如果浏览器策略要求内联样式必须携带合法 nonce而这些运行时样式节点没有 nonce就会被 CSP 拦截。Ant Design 的官方处理方式是在 ConfigProvider 上配置csp属性把nonce传给组件库由其附加到动态生成的样式节点上。官方 FAQ 中「开启了 Content Security Policy (CSP) 如何处理动态样式」一条给出的答复也是如此通过ConfigProvider配置nonce属性。配置 csp 属性csp是ConfigProvider的一个属性类型定义为{ nonce: string }见 ConfigProvider API 表。用法如下import { ConfigProvider } from antd; const Demo: React.FC () ( ConfigProvider csp{{ nonce: YourNonceCode }} App / /ConfigProvider );说明两点YourNonceCode是文档示例中的占位值需要替换为你自己页面实际使用的 nonce 值即与服务端下发的 CSP 策略中style-src允许的 nonce 保持一致。文档没有给出 nonce 的具体生成规则这里遵循 CSP 本身的约定由页面自行确定。ConfigProvider基于 React context 全局生效只需在应用外围包裹一次组件源码 中csp的取值为customCsp || parentContext.csp即内层ConfigProvider不显式传csp时会继承外层配置因此在外层配一次即可。nonce 作用在哪些样式节点上从源码可以看到 nonce 的两条注入路径用于判断配置后哪些动态样式会带上它组件样式useToken 从ConfigContext读取csp并把nonce: csp?.nonce传入useCacheToken供 cssinjs 的样式注册使用图标样式useResetIconStyle 在useStyleRegister中使用nonce: () csp?.nonce!为ant-design/icons的运行时样式附加 nonce。也就是说配置csp{{ nonce }}后Ant Design 运行时注册的组件样式与图标样式节点都会带上该 nonce。如何验证 nonce 已生效项目自身的测试 nonce.test.tsx 给出了验证方式渲染带csp配置的ConfigProvider后查询 DOM 中的style节点断言其nonce属性等于配置值render( ConfigProvider csp{{ nonce: little }} SmileOutlined / /ConfigProvider, ); const styleNode document.querySelector(style); expect(styleNode?.nonce).toBe(little);对应到实际项目判断方法就是打开开启了 CSP 的页面在浏览器控制台执行类似document.querySelectorAll(style)检查 Ant Design 动态注入的样式节点是否带有你配置的nonce值并观察控制台不再有 CSP 拦截动态样式的报错。测试中还有一个更完整的用例渲染Button后遍历所有style节点并逐一断言style.nonce等于配置值可参考cssinjs should support nonce用例。边界说明CSPConfig类型context.ts 中的interface CSPConfig只定义了nonce一个可选字段文档记录的 CSP 配置能力就是这个nonce不要据此假设csp还能透传其他 CSP 指令。nonce 只解决「样式节点缺少 nonce 被 CSP 拦截」这一项。页面如果还有内联脚本等其他 CSP 问题不在该属性的覆盖范围内文档未提供对应配置。配置完成后的验收标准即上文验证部分动态style节点携带正确 nonce且开启 CSP 的页面中 Ant Design 组件含波纹效果的交互、图标渲染样式正常显示。【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/GitHub_Trending/an/ant-design创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
