Configurare CSP in un'applicazione CLI Ember che utilizza http-mock

Question

Sto utilizzando http-mock con Ember CLI come suggerito su http://www.ember-cli.com/#ember-data. Comprendo il concetto base di CSP ma non capisco la sua configurazione all'interno di un'applicazione CLI Ember.

Come posso configurare la mia domanda di accettare le richieste di localhost:4200/api/ per evitare questo durante lo sviluppo:

Content Security Policy violation: { 
    "csp-report": { 
     "document-uri":"http://localhost:4200/products", 
     "referrer":"", 
     "violated-directive":"style-src 'self'", 
     "effective-directive":"style-src", 
     "original-policy":"default-src 'none'; script-src 'self' 'unsafe-eval' localhost:35729 0.0.0.0:35729; font-src 'self'; connect-src 'self' ws://localhost:35729 ws://0.0.0.0:35729 http://0.0.0.0:4200/csp-report; img-src 'self'; style-src 'self'; media-src 'self'; report-uri http://0.0.0.0:4200/csp-report;", 
     "blocked-uri":"", 
     "source-file":"chrome-extension://alelhddbbhepgpmgidjdcjakblofbmce", 
     "line-number":1,"column-number":20481,"status-code":200 
    } 
} 

Answer 1

È possibile regolare la vostra politica di sicurezza dei contenuti modificando config/environment.js. Credo che nel tuo caso, il connect-src è rilevante per l'errore che viene generato (modifica: sembra che style-src venga violato, possibilmente da Chrome Extension Awesome Screenshot). L'aggiunta di * consentirà di connettersi a qualsiasi cosa.

var ENV = { 

    ... 

    contentSecurityPolicy: { 
    'default-src': "'none'", 
    'script-src': "'self'", 
    'font-src': "'self'", 
    'connect-src': "'self' *", 
    'img-src': "'self'", 
    'style-src': "'self' *", 
    'media-src': "'self'" 
    } 
} 

o più specificamente, si potrebbe aggiungere:

... 
'connect-src': "'self' 'localhost:4200'", 
... 

Inoltre, se si voleva solo per aggiungere questo al vostro ambiente dev, metterlo in:

if (environment === 'development') { 
    ENV.contentSecurityPolicy = { 
    ...(policies)... 
    } 
} 

Maggiori informazioni disponibili su CSP in ember-cli: https://www.npmjs.com/package/ember-cli-content-security-policy.

Maggiori informazioni su CSP in generale: http://content-security-policy.com/