Ember-cli-csp-style

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.

Installation

• ember install ember-cli-csp-style

Usage

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);
	}
});

Binding format

Format borrowed from with-style-mixin

Simple binding

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

Binding with units

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

Escaping

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.

Switch values

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.

Advanced

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.

Binding style directly

If you bind directly to style:

styleBindings: ['style', 'width', 'display'],
style: Ember.computed('myData', function() {...}) 

this will only output your calculated style and will ignore all other bindings (in this case width and height).

[Longer description of how to use the addon in apps.]

• ember test
• ember test --server

License

• ember build

For more information on using ember-cli, visit http://www.ember-cli.com/.

Authors

• Bryan Crotaz

Legal

This project is licensed under the MIT License.