확장 프로그램 보안 개선

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 웹 스토어 정책에 따라 더 이상 원격으로 호스팅된 파일을 로드하고 실행할 수 없습니다. 예를 들면 다음과 같습니다.

  • 개발자 서버에서 가져온 JavaScript 파일입니다.
  • 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 가이드에 설명된 대로 원격으로 호스팅되는 공식 JavaScript 버전을 사용하는 대신 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의 콘텐츠 보안 정책 값에는 이러한 새로운 제한사항이 없습니다.