Skip to content
This repository has been archived by the owner on Mar 22, 2019. It is now read-only.

Adds a guide on bound style warning #2097

Merged
merged 1 commit into from
Mar 25, 2015
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 36 additions & 0 deletions source/deprecations/v1.x.html.md
Original file line number Diff line number Diff line change
Expand Up @@ -319,6 +319,42 @@ App.instanceInitializer({

Added in [PR #10256](https://github.com/emberjs/ember.js/pull/10256).

#### Warning When Binding Style Attributes

Content in Handlebars templates is automatically HTML-escaped to help
developers prevent inadvertently introducing cross-site scripting (XSS)
vulnerabilities into their applications. If you want to display trusted
content as HTML, you can use a `SafeString`, a special string that tells Ember
that the content should be displayed without escaping.

While this works great for HTML, there are some cases where you may bind user
data that the browser interprets as CSS, not HTML. For example, you may bind
the `style` attribute of an element:

```handlebars
<div style={{myStyle}}></div>
```

Handlebars only escapes HTML, not CSS, so this may introduce a potential XSS
vulnerability into your application if a malicious user is able to provide data
used in the `myStyle` property.

Starting in Ember 1.11, you will receive a warning if you attempt to bind the
`style` attribute of an element. Once you have verified that the content being
displayed is trusted and properly escaped, you can disable the warning by
making the content a `SafeString`. For example:

```js
myStyle: function() {
var color = escapeCSS(this.get('color'));
return ("color: " + color).htmlSafe();
}.property('color')
```

You can learn more about `SafeString`s and writing code that prevents XSS
attacks by reading the [Writing
Helpers](http://emberjs.com/guides/templates/writing-helpers/) guide.

### Deprecations Added in 1.12

#### Deprecate non-block-params {{each}} helper syntax
Expand Down