확장 프로그램 보안 개선

Manifest V3의 보안 강화

확장 프로그램 서비스 워커의 일부가 아닌 코드에 필요한 변경사항을 설명하는 세 개의 섹션 중 마지막입니다. 확장 프로그램의 보안을 개선하는 데 필요한 변경사항을 설명합니다. 다른 두 섹션에서는 Manifest V3로 업그레이드하는 데 필요한 코드 업데이트와 차단 웹 요청을 대체하는 방법을 다룹니다.

임의의 문자열 실행 삭제

더 이상 executeScript(), eval(), new Function()를 사용하여 외부 로직을 실행할 수 없습니다.

  • 모든 외부 코드 (JS, Wasm, CSS)를 확장 프로그램 번들로 이동합니다.
  • 확장 프로그램 번들에서 리소스를 로드하도록 스크립트 및 스타일 참조를 업데이트합니다.
  • chrome.runtime.getURL()를 사용하여 런타임에 리소스 URL을 작성합니다.
  • 샌드박스 처리된 iframe 사용: eval 및 new Function(...)는 샌드박스 처리된 iframe에서 계속 지원됩니다. 자세한 내용은 샌드박스 처리된 iframe 가이드를 참고하세요.

executeScript() 메서드는 이제 tabs 네임스페이스가 아닌 scripting 네임스페이스에 있습니다. 통화 업데이트에 관한 자세한 내용은 executeScript() 이동을 참고하세요.

여전히 임의의 문자열을 실행할 수 있는 몇 가지 특수한 사례가 있습니다.

원격 호스팅 코드 삭제

Manifest V3에서는 확장 프로그램의 모든 로직이 확장 프로그램 패키지의 일부여야 합니다. Chrome 웹 스토어 정책에 따라 더 이상 원격 호스팅 파일을 로드하고 실행할 수 없습니다. 예를 들면 다음과 같습니다.

  • 개발자의 서버에서 가져온 자바스크립트 파일
  • CDN에서 호스팅되는 모든 라이브러리.
  • 원격 호스팅 코드를 동적으로 가져오는 번들 서드 파티 라이브러리입니다.

사용 사례와 원격 호스팅 이유에 따라 다른 방법을 사용할 수 있습니다. 이 섹션에서는 고려해야 할 접근 방식을 설명합니다. 원격 호스팅 코드를 처리하는 데 문제가 있으면 안내를 참고하세요.

구성 기반 기능 및 로직

확장 프로그램이 런타임에 원격 구성 (예: JSON 파일)을 로드하고 캐시합니다. 캐시된 구성에 따라 사용 설정되는 기능이 결정됩니다.

원격 서비스를 사용한 외부화된 로직

확장 프로그램이 원격 웹 서비스를 호출합니다. 이렇게 하면 코드를 비공개로 유지하고 필요에 따라 변경할 수 있으며 Chrome 웹 스토어에 다시 제출하는 추가 오버헤드를 피할 수 있습니다.

샌드박스 처리된 iframe에 원격 호스팅 코드 삽입

원격 호스팅 코드는 샌드박스 처리된 iframe에서 지원됩니다. 코드에서 삽입 페이지의 DOM에 액세스해야 하는 경우에는 이 방법을 사용할 수 없습니다.

서드 파티 라이브러리 번들로 묶기

이전에 외부 서버에서 로드한 React 또는 Bootstrap과 같이 널리 사용되는 프레임워크를 사용하는 경우, 축소된 파일을 다운로드하여 프로젝트에 추가한 후 로컬로 가져올 수 있습니다. 예를 들면 다음과 같습니다.

<script src="./react-dom.production.min.js"></script>
<link href="./bootstrap.min.css" rel="stylesheet">

라이브러리를 서비스 워커에 포함하려면 매니페스트에서 "background.type" 키를 "module"로 설정하고 import 문을 사용합니다.

탭이 삽입된 스크립트에서 외부 라이브러리 사용

scripting.executeScript() 호출 시 외부 라이브러리를 files 배열에 추가하여 런타임에 외부 라이브러리를 로드할 수도 있습니다. 런타임에 원격으로 데이터를 로드할 수도 있습니다.

chrome.scripting.executeScript({
  target: {tabId: tab.id},
  files: ['jquery-min.js', 'content-script.js']
});

함수 삽입

더 많은 동적 기능이 필요한 경우 scripting.executeScript()의 새로운 func 속성을 사용하면 함수를 콘텐츠 스크립트로 삽입하고 args 속성을 사용하여 변수를 전달할 수 있습니다.

Manifest V2
let name = 'World!';
chrome.tabs.executeScript({
  code: `alert('Hello, ${name}!')`
});

백그라운드 스크립트 파일

Manifest V3
async function getCurrentTab() {/* ... */}
let tab = await getCurrentTab();

function showAlert(givenName) {
  alert(`Hello, ${givenName}`);
}

let name = 'World';
chrome.scripting.executeScript({
  target: {tabId: tab.id},
  func: showAlert,
  args: [name],
});

백그라운드 서비스 워커

Chrome 확장 프로그램 샘플 저장소에는 단계별로 살펴볼 수 있는 함수 삽입 예가 포함되어 있습니다. getCurrentTab()의 예는 이 함수의 참조에 있습니다.

다른 해결 방법 찾기

이전 접근 방식이 사용 사례에 도움이 되지 않으면 대체 솔루션을 찾거나 (예: 다른 라이브러리로 이전) 라이브러리의 기능을 사용할 다른 방법을 찾아야 할 수 있습니다. 예를 들어 Google 애널리틱스의 경우 Google 애널리틱스 4 가이드에 설명된 대로 원격 호스팅 공식 자바스크립트 버전을 사용하는 대신 Google 측정 프로토콜로 전환할 수 있습니다.

콘텐츠 보안 정책 업데이트

"content_security_policy"는 manifest.json 파일에서 삭제되지 않았지만 이제 두 속성, "extension_pages" 및 "sandbox"를 지원하는 사전입니다.

Manifest V2
{
  ...
  "content_security_policy": "default-src 'self'"
  ...
}
Manifest V3
{
  ...
  "content_security_policy": {
    "extension_pages": "default-src 'self'",
    "sandbox": "..."
  }
  ...
}

extension_pages: html 파일 및 서비스 워커를 비롯한 확장 프로그램의 컨텍스트를 나타냅니다.

sandbox: 확장 프로그램에서 사용하는 샌드박스 처리된 확장 프로그램 페이지를 나타냅니다.

지원되지 않는 콘텐츠 보안 정책 삭제

Manifest V3에서는 Manifest V2에서 허용되었던 "extension_pages" 필드의 특정 콘텐츠 보안 정책 값이 허용되지 않습니다. 특히 Manifest V3에서는 원격 코드 실행을 허용하는 메서드를 허용하지 않습니다. script-src, object-src 및 worker-src 지시어에는 다음 값만 포함할 수 있습니다.

  • self
  • none
  • wasm-unsafe-eval
  • 압축해제된 확장 프로그램만: 모든 localhost 소스(http://localhost, http://127.0.0.1 또는 이러한 도메인의 포트)

sandbox의 콘텐츠 보안 정책 값에는 이러한 새로운 제한사항이 없습니다.