Modal does not work with strict Content Security Policy

[thesam]

Bug description:

Opening a modal does not work if a Content Security Policy is enabled, unless style-src 'unsafe-inline' is also enabled.

It seems the modal uses the inline style 'display: block', which means that the CSP must allow inline styles for the modal to load correctly.

Could this be handled by moving the styles to a separate .css file, like in ui-bootstrap? (ui-bootstrap-csp.css)

Link to minimally-working plunker that reproduces the issue:

http://plnkr.co/edit/pWadtAoosFePpru5nWIi?p=preview

Version of Angular, ng-bootstrap, and Bootstrap:

Angular: 5.0.2

ng-bootstrap: 1.0.0-beta.9

Bootstrap: 4.0.0-beta,3

[bastienmoulia]

I look into that and there is not obvious solutions.

Bootstrap use the inline style display: block and force the reflow before adding the class fade show used for the transition.

It can be a Bootstrap issue, they could add the class show with display:blockand then make a reflow and add the class fade.

On the ng-bootstrap side, there is still some PR with animation for modals that can take care of that (I don't look exactly). The principe should be the same:

1. Add display:block on the modal (inline or with a class)
2. Reflow
3. Add class for transition

[thesam]

We are currently using modals from ui-bootstrap in our AngularJS application. They work without 'unsafe-inline'.

It seems ui-bootstrap uses the "ng-style" directive, which does not trigger the Content Security Policy.
https://github.com/angular-ui/bootstrap/blob/master/src/modal/modal.js
Line 477

I know this is not the same framework, but could something similar be done in ng-bootstrap with the [ngStyle] directive?

[epeschier]

I don't think this fixes the issue. We also have a strict style-src policy.
When you open a modal, a style is placed on the body (style="padding: 17px"). Seems to be done by the util/scrollbar.ts

[GopalZadafiya]

@epeschier did you manage to get it working. I am also facing the same CSP issue because of (style="padding: 17px")

[epeschier]

No, we ended up with creating our own modal based on a fork