Ember.js 在使用http模拟的Ember CLI应用程序中配置CSP

正如上所建议的，我正在使用带有Ember CLI的http mock。我了解CSP的基本概念，但不了解它在Ember CLI应用程序中的配置

如何将应用程序配置为接受对

localhost:4200/api/

的请求以避免在开发过程中出现这种情况：

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
    }
}

---

您可以通过编辑

config/environment.js

来调整内容安全策略。我相信在您的案例中，

connectsrc

与抛出的错误相关（编辑：看起来

style src

被违反了，可能是被Chrome扩展可怕的屏幕截图破坏了）。添加

*

将允许它连接到任何东西

var ENV = {

  ...

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

或者更具体地说，您可以添加：

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

此外，如果您只想将其添加到您的开发环境中，请将其放入：

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

有关CSP的更多信息，请参见

ember cli

：

---

关于CSP的更多信息：

我尝试了两个版本，但都不起作用。我仍然收到相同的错误消息。仔细查看您的错误消息，我会看到

“违反指令”：“style src'self”

。。尝试添加

'style-src'：“'self'*”

。看起来Chrome扩展正在注入样式表？谷歌搜索显示“很棒的屏幕截图”-尝试禁用？可能是内联样式导致了警告。将

'safe-inline'

添加到

样式src

以解决这个问题。它确实是一个Chrome扩展。我从来没有想过。非常感谢。