replace style binding for z-index with CSS variable #272

jelhan · 2020-04-15T07:51:00Z

This removes the style binding used to set the z-index of the container. The default value is set with CSS instead. Default value could be customized with a CSS variable if needed. If consumer prefers to set it on invocation, it could be set as any other HTML attribute using angle bracket component invocation:

<NotificationContainer style="z-index: 9999;" />

This should be preferred over style bindings due to security reasons. Especially style bindings requires an style-src: unsafe-inline directive Content Security Policy, which is bad for security reasons.

The pull request also adds test coverage to prevent a regression regarding CSP compliance. It does so using Ember CLI Content Security Policy, which provides test support in it's v2 release. It could be used to test compliance with a strict CSP. If a test violates the configured CSP it will fail. The addon comes with reasonable defaults and does not require any configuration for this use case.

This is a breaking change and requires a major release.

Set default value with CSS class instead. Default value could be customized with CSS variable if needed. If consumer prefers to set it on invocation, it could be set as any other HTML attribute using angle bracket component invocation: ```hbs <NotificationContainer style="z-index: 9999;" /> ``` This should be preferred over style bindings due to security reasons. Especially style bindings requires an `style-src: unsafe-inline` directive Content Security Policy, which is bad for security reasons.

Ember CLI Content Security Policy ships test support in it's upcoming v2 release. It could be used to test compliance with a strict CSP. If a test violates the configured CSP it will fail. The addon comes with reasonable defaults and does not require any configuration for this use case.

jelhan · 2020-04-15T12:06:20Z

There are still inline styles used:

ember-cli-notifications/addon/templates/components/notification-message.hbs

Line 23 in 1fe3388

    
           <div class="c-notification__countdown" style={{notificationClearDuration}}></div>

Seems like this code-path is not triggered by tests. Otherwise CI would have told us.

Even so this pull request is not fixing all CSP issues I think it could be merged. Fixing it for the animation on countdown is not as straight-forward as this one. It's actually dynamic. So need another solution, which may be better discussed separately.

@z-index