Wave.js triggers CSP violations on Button `onClick`

• I have searched the issues of this repository and believe that this is not a duplicate.

Version

3.9.3

Environment

React 16.4, Chrome OS Version 69.0.3497.95

Reproduction link

https://iCannotReproduceThisOnCodeSandbox.com/imSorry

Steps to reproduce

Include a Content Security Policy (CSP) with the following style-src 'self'; on your site. Add a Button from antd. Click on the button and observe two CSP violations:

wave.js:66 Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-Hvh gvm3XFq7QSRpjZ/J3dO17dDskxHeQI4bICz14Hc='), or a nonce ('nonce-...') is required to enable inline execution.

e.onClick @ wave.js:66
(anonymous) @ wave.js:88

Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-47DEQpj8HBSa /TImW 5JCeuQeRkm5NMpJWZG3hSuFU='), or a nonce ('nonce-...') is required to enable inline execution.

value @ wave.js:143
value @ wave.js:133
e.onTransitionEnd @ wave.js:102

Note that both violations are due to the following code in wave.js that is allowing style elements to be modified via JS on the DOM, which is against our company’s security policy.

            if (waveColor && waveColor !== '#ffffff' && waveColor !== 'rgb(255, 255, 255)' && _this.isNotGrey(waveColor) && !/rgba\(\d*, \d*, \d*, 0\)/.test(waveColor) && // any transparent rgba color
            waveColor !== 'transparent') {
                extraNode.style.borderColor = waveColor;
                styleForPesudo.innerHTML = '[ant-click-animating-without-extra-node]:after { border-color: '   waveColor   '; }';
                if (!document.body.contains(styleForPesudo)) {
                    document.body.appendChild(styleForPesudo);
                }
            }

        key: 'removeExtraStyleNode',
        value: function removeExtraStyleNode() {
            if (styleForPesudo) {
                styleForPesudo.innerHTML = '';
            }
        }

There should be a way to avoid this and still use the Button.

What is expected?

I do not get a Content Security Policy violation when I click on a Button. I can turn off wave.js or I can pass a prop that does not allow inserting / modifying styles.

What is actually happening?

wave.js is trying to modify styles on the DOM and this is a violation. I cannot turn it off.

---

I do not know how to add a content security policy to codesandbox and can’t find anything on the internet about it, so I cannot add a link

[patriksletmo]

Even if this issue is quite old and closed already, I have to agree with @kristiehowboutdat that this issue has not been properly resolved.

The use of nonces have some very real problems for React applications since nonces must be regenerated for every page request and be unguessable to work properly. This means that previously static and cacheable scripts must now be templated and regenerated for every request. In addition, nonces does not guarantee the integrity of the style tag. It’d be interesting to hear your thoughts on this @kristiehowboutdat.

A previous issue suggested adding the ability to disable the Wave component all together, which I think is a more sensible solution for users of Ant Design that require strict CSP policies. Would it make sense from your side to provide this option @zombieJ? In such case, I could provide a PR for this change.

[zombieJ]

Will add CSP support with ConfigProvider.