It is very important when creating a component as an addon to make sure that you do not require CSP to include unsafe-inline
. If you do then the entire app that your component is used within will have no protection against style injection attacks.
This addon makes CSP-safe styling of your Ember component really easy.
npm install --save ember-cli-csp-style
In your component, supply an array of strings called styleBindings
.
// app/components/my-component
import Ember from 'ember';
import CspStyleMixin from 'ember-cli-csp-style/mixins/csp-style';
export default Ember.Component.extend(CspStyleMixin, {
classNames: ['component'],
styleBindings: ['width[px]'],
width: 100,
click: function() {
this.set('width', 200);
}
});
Format borrowed from
with-style-mixin
styleBindings: ['color']
binds the inline style value color
to the color
property on your component
styleBindings: ['foreground:color']
binds the inline style value color
to the foreground
property on your component
Only works with numeric values
styleBindings: ['width[px]']
binds the inline style value width
to the width
property on your component, adding 'px'
on the end if the value is numeric
styleBindings: ['width[%]']
binds the inline style value width
to the width
property on your component, adding '%'
on the end if the value is numeric
styleBindings: ['internalWidth:width[%]']
binds the inline style value width
to the internalWidth
property on your component, adding '%'
on the end if the value is numeric
If the bound value is a string, it will be escaped for safety. If your property returns a SafeString
then it will not be escaped.
styleBindings: ['show:display?block:none']
binds to the show
property. If it returns a truthy value, the style is set to display:block
, otherwise it's set to display:none
.
You can provide the styleBindings
array as a computed
property to change which styles are bound at run time.
If a bound property returns null
then the style will be removed from the HTML.
ember test
ember test --server
ember build
For more information on using ember-cli, visit http://www.ember-cli.com/.