antd:ConfigProvider中为什么需要为 wave effect 动效,单独定义全局的 csp?

为什么:
在做波纹效果的时候添加了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.csp.nonce;
}
styleForPesudo.innerHTML = `[ant-click-animating-without-extra-node="true"]:after { border-color: ${waveColor}; }`;
/*

*/
if (!document.body.contains(styleForPesudo)) {
document.body.appendChild(styleForPesudo);
}
}
...
renderWave = ({ csp }: ConfigConsumerProps) => {//接收Provider传递的csp属性。
    const { children } = this.props;
    this.csp = csp;
    return children;
};
render() {
	return <ConfigConsumer>{this.renderWave}</ConfigConsumer>;
}

配置configProvider里面的csp属性值的nonce值来配置style里面的nonce属性。

在script和style里增加的新的属性nonce,是HTML5.1里面新增的特性,可以这样使用:

<script nonce='d3ne7uWP43Bhr0e'>
  The JavaScript Code 
script>

Nonce属性的属性值是加密随机数,它一般被用在一个网站的内容安全策略之中,以确定元素指定的样式是否将应用于文档。CSP3 。

这个随机数可以是服务器动态生成分配的,也可以是自己写入的静态字符串,但这个值必须与被信任的源所匹配 ,比如说:

<script nonce=EDNnf03nceIOfn39fn3e9h3sdfa>
  //Some inline code I cant remove yet, but need to asap.
script>

然后,将nonce值前缀nonce-后添加到script-src后面,像下面这样(在meta中可以进行配置):

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src ‘nonce-EDNnf03nceIOfn39fn3e9h3sdfa'; img-src https://*; child-src 'none';">

这样这个script标签里面的东西就会被浏览器承认是一个无害的可以执行的内容。
在实际应用中,为script标签添加nonce属性更加常见。
针对script/style标签nonce的特殊设置:

‘unsafe-inline’:允许执行页面内嵌的

你可能感兴趣的:(扩展类学习,react)