티스토리 뷰
Chrome Extension에서 JQuery를 쓰기 위해
popup.html 의 <head> 에 jquery src 를 추가했다.
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
그랬더니 아래와 같은 오류가 남.
오류내용
Refused to load the script 'https://code.jquery.com/jquery-3.3.1.min.js' because it violates the following Content Security Policy directive: "script-src 'self' blob: filesystem:". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.
대충 핵심만 보면 Content Security Policy 를 따라야한다~
해결 방법
manifest.json 파일에 아래 부분을 추가하면 됨.
"content_security_policy": "script-src 'self' https://code.jquery.com(->본인이 추가한 것의 호스트부분); object-src 'self'"
개념
XSS 공격을 막기 위해서, 크롬 익스텐션은 Content Security Policy (이하 CSP)라는 보안 정책을 갖고 있다.
익스텐션에서 로드되거나 실행되는 컨텐츠의 범위를 제한하는 방법으로 동작하며,
블랙리스트 방식과 화이트리스트 방식을 모두 적용할 수 있다.
크롬 익스텐션엔 기본적으로 크롬 API와 호스트 등을 제한하는 Permissions 정책이 있긴 하지만,
CSP는 이보다 더 상위에, 별도로 존재하는 보안 정책이다.
매니페스트 파일에 content_security_policy를 정의하지 않으면, 기본적으로 아래 값이 할당된다.
script-src 'self'; object-src 'self'
위 구문은 다음과 같이 스크립트의 실행을 제한한다
(A) eval() 이나 문자열로 실행하는 함수, 함수 생성자를 제한한다.
(B) 페이지 내의 인라인 자바스크립트를 제한한다.
(C) 로컬 경로의 스크립트만 로드한다. 익스텐션 이외의 스크립트는 로드할 수 없다.
👇🏿 해결을 위해 참고한 내용 및 개념 내용 출처
'Chrome Extension' 카테고리의 다른 글
| Chrome Extension - background ↔ contentscript 간의 메세징 async await (0) | 2022.01.11 |
|---|---|
| Chrome Extension 프로젝트 생성, 개발환경 세팅방법 (0) | 2022.01.05 |
| Chrome Extension - 크롤링한 데이터 script 내용 추출 (0) | 2022.01.03 |
- Total
- Today
- Yesterday
- serverless
- JavaScript
- docker
- docker-compose
- NestJS
- AWS
- webhook
- 크롬익스텐션
- Error "server gave HTTP response to HTTPS client"
- branch조회
- 람다
- Hoisting
- Lambda
- docker exec
- container접속
- background.js
- 서버리스
- elastic-builder
- git동기화
- contentScript.js
- 도커
- github
- 웹훅
- nodejs
- elasticsearch
- 디스코드
- should
- 깃헙
- ChromeExtension
- aws cli