https://github.com/ant-design/ant-design/issues/12438Go to Github

FundedView inWave.js triggers CSP violations on Button `onClick`#12438

kristiehowboutdatcreated the issue 10 days ago

  • 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

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

<!-- generated by ant-design-issue-helper. DO NOT REMOVE -->

Logs

  1. boostiofunded $1010 days ago

Total Fund

$10

You will get $7 when resolving this issue

Funded by

1

Work status

No one is working