search

caplin / FlexLayout

Docking Layout Manager for React
MIT License
907 stars 173 forks source link

Problem with base 64 images in CSP directive #176

Open Sanbala opened 3 years ago

Sanbala commented 3 years ago

We are using CSP headers in our application. As Flexlayout is encoding the images as base 64 image links, there is a security issue in loading base 64 images as it not whitelisted. To resolve this, we may need to add 'data:' in the img-src directive. But its unsafe because this allows for XSS vulnerabilities to be opened up as data: can handle any URI. Adding to this, we are not using maximize image in our application.

Is it possible to prevent loading that image (if not used) or use image link instead of base 64 link?

Below is the base64 image link that is causing securtiy issue. data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAUCAYAAABiS3YzAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAB3RJTUUH3wsOCAciLIHE4wAAAEdJREFUOMvtkksOADAERGl6b5x8eoBqo6E7b+kzJiBqqmEvaGaINIsIhydFRG8185RQVTD7RgC87yTrdPw4VIvWMzMf0DQ7CzmmFh3I1FWCAAAAAElFTkSuQmCC

Sanbala commented 3 years ago

Adding "enableMaximize: false" prevents loading maximize image. This solves my issue.

NOTE: But if one is using maximize icon as well as adding CSP headers. Then the above problem will still exists.