为什么:
在做波纹效果的时候添加了style标签的内联样式,为了防止xss攻击,可启动网站的内容安全策略,所以这里ConfigProvider配置了csp属性,再将这个属性的值传递给子组件的style/script标签生成nonce属性。
分析:
ant-design组件中:Buttoon、Audio、Dropdown等实现了水波纹效果,它们是应用了Wave组件(@/components/_utils/wave.tsx
)提供统一的水波纹样式,在ConfigProvider源码(@/components/config-provider/index.tsx
)中利用createReactContext创建的context,实现跨越层级的数据共享,将ConfigProvider组件的csp属性值传递给子组件。
Wave组件中关于csp的关键代码:源码中第48行-67行
styleForPesudo = styleForPesudo || document.createElement('style’);//生成一个style元素对象
if (...) {
// Add nonce if CSP exist
if (this.csp && this.csp.nonce) {
styleForPesudo.nonce = this