style-concatenation.md

style-concatenation

✅ The extends: 'recommended' property in a configuration file enables this rule.

Ember has a runtime warning that says:

Binding style attributes may introduce cross-site scripting vulnerabilities; please ensure that values being bound are properly escaped.

This warning can only be avoided by marking the bound value with Ember.String.htmlSafe. While we can't always detect statically if you're providing a safe string, we can detect and forbid common cases where it's impossible that you're doing so.

Common cases which do not propagate htmlSafe include:

• Implied string concatenation using quotes
• The concat helper

Examples

This rule forbids the following:

<div style="background-image: url({{url}})">

<div style="{{background-image url}}">

<div style={{concat knownSafeStyle1 ";" knownSafeStyle2}}>

This rule allows the following:

<div style={{html-safe (concat "background-image: url(" url ")")}}>

<div style={{background-image url}}>

{{!-- Presumably, `background-image` is a helper which returns an `htmlSafe` style string.  --}}

<div style={{html-safe (concat knownSafeStyle1 ";" knownSafeStyle2)}}>

References

• See the Binding Style Attributes Ember deprecation documentation
• See the documentation for Ember's htmlSafe function
• See the documentation for Ember's concat handlebars template helper
• See the documentation for the html-safe handlebars template helper from the ember-cli-string-helpers addon

Related Rules

• no-inline-styles