search

marcj / css-element-queries

CSS Element-Queries aka Container Queries. High-speed element dimension/media queries in valid css.
http://marcj.github.io/css-element-queries/
MIT License
4.27k stars 487 forks source link

ResizeSensor does not work with CSP (Content-Security-Policy) enabled #262

Closed ilovepumpkin closed 4 years ago

ilovepumpkin commented 5 years ago

I enabled CSP and tested ResizeSencor with the latest Chrome (Version 73.0.3683.75 (Official Build) (64-bit)) and I saw the following errors in Console.

image

After googled this error, I found this article: https://bugs.chromium.org/p/chromium/issues/detail?id=546106&can=2&start=0&num=100&q=&colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Component%20Status%20Owner%20Summary%20OS%20Modified&groupby=&sort= .

I have no idea when Google will enable "style-src-attr" by default, so I searched the sourc code of ResizeSensor and found the solution should remove the usage of "innerHTML" and change the code to create element first then append the style attribute.

element.resizeSensor.style.cssText = style; element.resizeSensor.innerHTML = '<div class="resize-sensor-expand" style="' + style + '">' + '<div style="' + styleChild + '"></div>' + '</div>' + '<div class="resize-sensor-shrink" style="' + style + '">' + '<div style="' + styleChild + ' width: 200%; height: 200%"></div>' + '</div>';

Is it okay to make the change to avoid this CSP violation issue in Chrome?

marcj commented 5 years ago

Yes, would love to get a PR with that change 👍

marcj commented 4 years ago

Fixed in #256.