Search code examples
javascriptember.jsember-clifilepicker

Ember library causing "Binding Style Attributes" deprecation warning

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?

Solution

  • 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'",