helmet, helmet-csp사용방법, 오류 Refused to load the

환경: express

 

VUE에서 cdn으로 받아오는 폰트나, 이미지, css형식파일은 helmet은 위험한 파일이라고 인식을 하여 막는다 그래서 빌드 한 파일을 Express에서 실행 시키면서 하나의 서버를 사용하면서 helmet.js를 사용하면 이런 오류가 발생 할 때 가있다.

helmet은 xss공격 방어를 위해 작동하는데

자세한 공격방법은 : kevinthegrey.tistory.com/36

Refused to load the font pro.fontawesome.com/release/00000/0000 because it violates the following Content Security Policy directive:"font-src"

이런 오류가 발생하면 폰트 혹은 CSS가 안 적용이 안된다. 또는 사진도 나오지가 않는다.

 

1. 해결 방법 

 

npm i helmet-csp

helmet-csp를 npm 으로 설치한다

app.js로 helmet-csp를 불러온다.

 

app.use(helmet())
app.use(csp({
  directives: {
    defaultSrc: [서버 주소],
    scriptSrc: [서버 주소],
    imgSrc: [서버 주소, '사용하는 이미지 CDN경로', 'img.icons8.com'],
    styleSrc: [서버 주소,
      '*.fontawesome.com',
      '*.jsdelivr.net',
      '*.fonts.googleapis.com'],
    fontSrc: [
      '*.googleapis.com',
      '*.jsdelivr.net'
      '*.fontawesome.com'
    ]
  }
}))

코드를 작성한다.

 

먼저

 

defaultSrc : directive값이 설정되지 않거나, 잘못 설정 되었을때의 기본값

scriptSrc : css관련된 값 설정

imgSrc : js관련 값 설정

styleSrc: image, favicon 관련 값 설정

fontSrc: 폰트 관련 값 설정

 

여러 종류 출처 : developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/default-src

으로 구성이되고 더 많은 종류가있지만 흔히 사용하는것만 적었다

 

[ ]안에 값은 3가지로 구분되는데, 

 

1. self는 현재 웹서버에서 가지고있는 동일한 url값을 허용한다.  * " " 안에 ' '가 무조건 들어가야 한다.

 

2. unsafe-inline : 예를들면 html 에서 <script> 태그 내에 쓰이는 구문 이나, <style> 태그 내에 쓰이는 스타일 등을 허용할지를 정의한다. * self와 동일하게 " " 안에 ' '가 무조건 들어가야 한다.

 

3. 특정 호스트명을 직접 적어준다.

특정 호스트명을 적어줄때는 ' '안에 값이 들어가야하고, ' '로 구분하여 [ ] 에 넣어주면된다.

 

*.example.com : example.com도메인에서 값을 가져온다

https://*.example.com   :  https://로 접속하는 모든example.com도메인을 가져온다

 

더 자세한 도메인 연결 방법은

출처 : developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/default-src

 

알맞은 곳에 도메인을 넣으면 우리가 Vue에서 만든 프론트가 정상적으로 작동하게 된다.

 

출처 : sdy-study.tistory.com/63