0

I'm trying to use the ember-cli-file-picker to load a file into my app for processing in the browser. It works but raises the following deprecation error

WARNING: Binding style attributes may introduce cross-site scripting vulnerabilities; please ensure that values being bound are properly escaped. For more information, including how to disable this warning, see http://emberjs.com/deprecations/v1.x/#toc_warning-when-binding-style- attributes.

[Report Only] Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution.

I'm thinking that this is because of

progressStyle: computed('progressValue', function() {
  var width = this.get('progressValue') || 0;

  return htmlSafe('width: ' + width + '%;');
})

in the library. I'm pretty new at ember, and am not positive that the library is safe, nor how to silence the deprecation warning using SafeString if it is. What should I do?

Henry Marshall
  • 850
  • 2
  • 8
  • 21

1 Answers1

1

This is a CSP issue.

You can disable this warning by editing your config/environment.js file:

Find:

ENV.contentSecurityPolicy = {

And edit the 'style-src' attribute to include 'unsafe-inline'

'style-src': "'self' 'unsafe-inline'",
David Duncan
  • 1,858
  • 17
  • 21
  • That does silence the "Report Only" section, but not the "Warning: Binding style" part. Any way to remove both? – Henry Marshall Apr 29 '15 at 18:07
  • I think since its raised by the library it is an issue on their side. I'd raise a ticket here: https://github.com/funkensturm/ember-cli-file-picker . It looks like they need to use Ember.Handlebars.SafeString from here: http://guides.emberjs.com/v1.10.0/templates/writing-helpers/ – David Duncan Apr 29 '15 at 18:19
  • Just [submitted a ticket](https://github.com/funkensturm/ember-cli-file-picker/issues/7). Thanks! – Henry Marshall Apr 29 '15 at 18:32
  • FYI it's generally bad form to add 'unsafe-inline' like in this answer. It can leave you open to CSS injection. Anyway, it looks like the library has since fixed this problem in its 0.0.6 release. – yagni Mar 22 '19 at 00:05