플러그인에서 서드파티 라이브러리 사용 시 CSP 오류 발생

개발
1

다양한 시도와 접근법을 거친 끝에, 플러그인에서 사용할 수 있도록 서드파티 라이브러리를 성공적으로 로드하는 데 성공했습니다.

해당 라이브러리는 public/javascripts/some-library.js 경로에 위치해 있습니다.

컨트롤러에서는 다음 코드를 통해 스크립트를 성공적으로 로드할 수 있습니다:

loadScript("/plugins/my-plugin/javascripts/some-library.js")

해당 파일 내에서 라이브러리가 Blob을 생성하고 이를 변수에 할당하는 경우가 있습니다. 예를 들어 다음과 같습니다:

var A=URL.createObjectURL(new Blob(['\n\tsome code snippet...],{type:"application/javascript"}))

그런데 이 라이브러리를 플러그인 코드에서 사용하려고 할 때마다 다음과 같은 오류가 발생합니다:

Refused to load the script 'blob:http://localhost:4200/f33a6788-a853-4286-883a-48cb8e2c9cc1' because it violates the following Content Security Policy directive: "script-src http://localhost:4200/assets/ etc etc...

이 문제를 우회하는 가장 좋은 방법은 무엇일까요?

도와주셔서 감사합니다!

2

CSP에 http://localhost:4200를 그냥 추가하면 어떻게 될까요?

3

사실 그걸 시도해 봤는데, 아무 변화가 없었어요 :confused:

4

blob:http://localhost:4200는 어떻게 될까요?

5

그것도 시도해 봤는데, CSP에서는 잘못된 문법입니다 :confused:

6

이 글을 우연히 보게 된 분들을 위해, csp의 script src에 추가해야 할 올바른 항목은 blob:입니다.

7

잠깐! 개발 환경에서는 CSP를 구현할 필요가 없습니다. 공격자의 위험에 노출되어 있지 않으니까요.

일부 개발자 도구도 차단될 수 있습니다.

이 설정만 OFF로 변경하세요:

IMG_0197
IMG_0197781×155 22.5 KB

이렇게 하면 됩니다.

프로덕션 스테이징 서버에서 동작하는 플러그인을 테스트할 때까지 이 번거로움은 미루는 것이 좋습니다.

8

사실 저는 프로덕션 배포를 준비하는 단계에 있었기 때문에, 이는 해결해야 할 마지막 문제였습니다. 게다가 이런 문제를 미루는 것을 좋아하지 않습니다. 특히 이것이 잠재적인 치명적 장애 요인인지 확인해야 하고, 그렇게 되면 완전히 다른 길을 찾아야 할 수도 있기 때문입니다. :man_surfing:

9

네, 하지만 실제 인터넷 주소가 있는 프로덕션 스테이징 서버에서 CSP 설정을 작업해야 합니다.

로컬호스트는 인터넷 주소가 아닙니다! :slight_smile::wink: https도 아니라고요 …