programing tip

ember-cli 0.0.47 업그레이드 후 콘텐츠 보안 정책 지침 위반

itbloger 2020. 12. 7. 07:54
반응형

ember-cli 0.0.47 업그레이드 후 콘텐츠 보안 정책 지침 위반


ember-cli 앱을 0.0.47로 업그레이드했고 이제 콘텐츠 보안 정책과 관련된 브라우저 콘솔에서 많은 오류가 발생합니다. 이 문제를 어떻게 해결합니까?

Refused to load the script 'http://use.typekit.net/abcdef.js' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-eval' localhost:35729".
 login:1
Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-eval' localhost:35729". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution.
 login:20
Refused to load the script 'http://connect.facebook.net/en_US/all.js' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-eval' localhost:35729".
 login:1
Refused to load the script 'http://maps.googleapis.com/maps/api/js?libraries=places' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-eval' localhost:35729".

내 app / index.html 파일의 줄은 다음과 같습니다.

<script type="text/javascript" src="//use.typekit.net/abcdef.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places"></script>

http://content-security-policy.com/https://github.com/rwjblue/ember-cli-content-security-policy 에서 일부 문서를 읽은 후 config / environment.js 파일에 몇 가지 정책을 추가했습니다. 이렇게 :

module.exports = function(environment) {
  var ENV = {
    contentSecurityPolicy: {
      'default-src': "'none'",
      'script-src': "'self' 'unsafe-inline' 'unsafe-eval' use.typekit.net connect.facebook.net maps.googleapis.com maps.gstatic.com",
      'font-src': "'self' data: use.typekit.net",
      'connect-src': "'self'",
      'img-src': "'self' www.facebook.com p.typekit.net",
      'style-src': "'self' 'unsafe-inline' use.typekit.net",
      'frame-src': "s-static.ak.facebook.com static.ak.facebook.com www.facebook.com"
    },

  // ...
};

이로 인해 즉각적인 오류가 모두 사라졌지 만 앱 탐색을 시작하자마자 S3 미디어 소스와 관련된 새로운 오류가 나타났습니다.

외부 리소스를 포함하지 않는 앱에서 작동한다고 확신하지만 package.json 파일에서 ""ember-cli-content-security-policy "를 제거하기로 결정했습니다.


Google에서 글꼴에 연결할 때 이것을 사용해야했습니다.

<link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Lato:400,700,900'>

에서 config/environment.js파일 I 사용

contentSecurityPolicy: {
  'font-src': "'self' data: fonts.gstatic.com",
  'style-src': "'self' 'unsafe-inline' fonts.googleapis.com"
},

참고 URL : https://stackoverflow.com/questions/26192316/violating-content-security-policy-directive-after-ember-cli-0-0-47-upgrade

반응형