Forces apps implementing CSP to remove rules

[sivakumar-kailasam]

Element resize detector adds the following block to the page which forces apps implementing CSP to relax their rules for styles making their app vulnerable. Is this something that can be avoided? May be add this as a vendor stylesheet?

<style id="erd_scroll_detection_scrollbar_style">
/* Created by the element-resize-detector library. */
.erd_scroll_detection_container > div::-webkit-scrollbar { display: none; }

.erd_scroll_detection_container_animation_active { -webkit-animation-duration: 0.1s; animation-duration: 0.1s; -webkit-animation-name: erd_scroll_detection_container_animation; animation-name: erd_scroll_detection_container_animation; }
@-webkit-keyframes erd_scroll_detection_container_animation { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } }
@keyframes erd_scroll_detection_container_animation { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } }
</style>

[taras]

It looks like it happens here https://github.com/wnr/element-resize-detector/blob/64fd69d6be269015fe36860491e067190e1a5f16/src/detection-strategy/scroll.js#L60

Would we need to ask elemenent-resize-detector library to provide an option to not inject their own style?

[sivakumar-kailasam]

Yes, let me raise an issue in that repo and reference it here for tracking this.

[gtb104]

Was an issue ever raised with element-resize-detector about its CSP violation?

[sivakumar-kailasam]

@gtb104 nope, I tried the alternate approach but that didn't help either and I didn't get the time to get back to it.

[gtb104]

@sivakumar-kailasam I'm sorry, what was the "alternate approach"?

[sivakumar-kailasam]

element-resize-detector has two strategies as shown in https://github.com/wnr/element-resize-detector/blob/64fd69d6be269015fe36860491e067190e1a5f16/benchmark/install.js#L41. I tried using the object strategy without much luck.