From 9ea98a1b4d0a374d8f5e4ada5e9100015097b971 Mon Sep 17 00:00:00 2001 From: Tom Dale Date: Wed, 25 Mar 2015 17:11:19 -0400 Subject: [PATCH] Adds a guide on bound `style` warning --- source/deprecations/v1.x.html.md | 36 ++++++++++++++++++++++++++++++++ 1 file changed, 36 insertions(+) diff --git a/source/deprecations/v1.x.html.md b/source/deprecations/v1.x.html.md index 47708ad230..45f37bb8fd 100644 --- a/source/deprecations/v1.x.html.md +++ b/source/deprecations/v1.x.html.md @@ -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 +
+``` + +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