원격 호스팅 코드 위반 처리

원격 호스팅 코드(RHC)는 Chrome 웹 스토어에서 확장 프로그램의 자체 파일이 아닌 다른 곳에서 로드된 브라우저에서 실행되는 모든 코드를 호출합니다. JavaScript, WASM 등이 있죠. JSON이나 CSS 등의 데이터는 포함되지 않습니다.

RHC가 더 이상 허용되지 않는 이유는 무엇인가요?

이제 Manifest V3 확장 프로그램이 확장 프로그램 자체 내에서 사용 중인 모든 코드를 번들로 묶어야 합니다. 이전에는 웹의 모든 URL에서 스크립트 태그를 동적으로 삽입할 수 있었습니다.

내 확장 프로그램에 RHC가 있다고 들었습니다. 어떤 문제인가요?

검토 과정에서 확장 프로그램이 Blue Argon 오류로 인해 거부된 경우 검토자는 확장 프로그램에서 원격 호스팅 코드를 사용하고 있다고 판단합니다. 이는 일반적으로 확장 프로그램이 원격 리소스 (즉, 확장 프로그램에 포함된 파일이 아닌 오픈 웹에서)가 있는 스크립트 태그를 추가하거나 직접 실행할 리소스를 가져오는 결과입니다.

RHC를 파악하는 방법

무엇을 찾아야 하는지 알고 나면 RHC를 파악하는 것이 특별히 어렵지 않습니다. 먼저 프로젝트에 'http://' 또는 'https://' 문자열이 있는지 확인합니다. RHC 위반이 있는 경우 이를 찾아서 찾을 수 있을 것입니다. 전체 빌드 시스템이 있거나 npm 또는 기타 서드 파티 소스의 종속 항목을 사용하는 경우 컴파일된 버전의 코드를 검색해야 합니다. 이 버전이 스토어에서 평가 중이기 때문입니다. 그래도 문제를 찾을 수 없으면 다음 단계는 One Stop 지원팀에 문의하세요. 그러면 담당자가 구체적인 위반사항과 가능한 한 빨리 확장 프로그램을 게시하는 데 필요한 사항을 간략하게 설명할 수 있습니다.

라이브러리가 코드를 요청하는 경우 해야 할 일

코드의 출처와 관계없이 RHC를 가질 수 없습니다. 여기에는 개발자가 작성하지 않았지만 프로젝트에서 종속 항목으로 사용하는 코드가 포함됩니다. Firebase를 사용하는 일부 개발자의 경우 Firebase 인증에 사용하기 위해 원격 코드가 포함되었을 때 이 문제가 발생했습니다. 이는 퍼스트 파티 (예: Google 소유) 라이브러리이지만 RHC에 예외가 적용되지 않습니다. RHC를 삭제하거나 시작할 코드를 포함하지 않도록 프로젝트를 업데이트하도록 코드를 구성해야 합니다. RHC를 로드하는 개발자의 코드가 아니라 사용 중인 라이브러리인 문제가 발생한 경우 가장 좋은 조치는 라이브러리 작성자에게 문의하는 것입니다. 사용자에게 이러한 일이 발생하고 있다고 알리고 이를 삭제할 해결 방법이나 코드 업데이트를 요청하세요.

라이브러리 업데이트를 기다릴 수 없는 경우

일부 라이브러리는 알림을 받는 즉시 업데이트를 제공하지만, 다른 라이브러리는 폐기되거나 문제를 해결하는 데 시간이 걸릴 수 있습니다. 특정 위반에서 발생하는 상황에 따라 차단이 해제되고 검토가 완료될 때까지 기다릴 필요가 없는 경우도 있습니다. 빠르게 복구하고 실행하기 위한 여러 가지 방법이 있습니다.

코드 감사

요청을 야기하는 코드가 필요한지 확실히 보이나요? 삭제가 가능하거나 삭제의 원인이 되는 라이브러리가 삭제될 수 있는 경우 코드를 삭제하면 작업이 완료됩니다.

또는 동일한 기능을 제공하는 다른 라이브러리가 있나요? 동일한 사용 사례를 충족하는 다른 옵션은 npmjs.com, GitHub 또는 기타 사이트를 확인하세요.

트리 쉐이킹

RHC 위반을 일으키는 코드가 실제로 사용되지 않는 경우에는 도구를 사용하여 자동으로 삭제할 수 있습니다. webpack, Rollup, Vite 등 최신 빌드 도구에는 트리 쉐이킹이라는 기능이 있습니다. 빌드 시스템에서 사용 설정한 후에는 트리 쉐이킹을 통해 사용되지 않는 코드 경로가 모두 삭제되어야 합니다. 즉, 규정을 준수하는 코드 버전뿐 아니라 더 가볍고 빠른 코드 버전을 보유할 수 있습니다. 모든 라이브러리가 트리 쉐이킹을 할 수 있는 것은 아니지만 대다수의 라이브러리가 트리 쉐이킹을 할 수 있다는 점에 유의해야 합니다. Rollup 및 Vite와 같은 일부 도구에는 기본적으로 트리 쉐이킹이 사용 설정되어 있습니다. webpack을 구성해야 합니다. 빌드 시스템을 확장 프로그램의 일부로 사용하지는 않지만 코드 라이브러리를 사용하는 경우 워크플로에 빌드 도구를 추가하는 것이 좋습니다. 빌드 도구를 사용하면 더 안전하고 안정적이며 유지관리가 쉬운 프로젝트를 작성할 수 있습니다.

트리쉐이킹을 구현하는 자세한 방법은 프로젝트에 따라 다릅니다. 그러나 Rollup을 사용한 간단한 예로 프로젝트 코드를 컴파일하여 트리쉐이킹을 추가할 수 있습니다. 예를 들어 main.js라는 Firebase 인증에만 로그인하는 파일이 있는 경우

import { GoogleAuthProvider, initializeAuth } from "firebase/auth";

chrome.identity.getAuthToken({ 'interactive': true }, async (token) => {
  const credential = GoogleAuthProvider.credential(null, token);
  try {
    const app = initializeApp({ ... });
    const auth = initializeAuth(app, { popupRedirectResolver: undefined, persistence: indexDBLocalPersistence });
    const { user } = await auth.signInWithCredential(credential)
    console.log(user)
  } catch (e) {
    console.error(error);
  }
});

그런 다음 입력 파일, 노드 파일 @rollup/plugin-node-resolve를 로드하는 데 필요한 플러그인, 생성되는 출력 파일의 이름을 Rollup에 알리기만 하면 됩니다.

npx rollup --input main.js --plugin '@rollup/plugin-node-resolve' --file compiled.js

터미널 창에서 이 명령어를 실행하면 생성된 버전의 main.js 파일이 수신되며 모두 compiled.js라는 단일 파일로 컴파일됩니다.

롤업은 간단할 수 있지만 매우 구성 가능합니다. 모든 종류의 복잡한 로직과 구성을 추가할 수 있습니다. 관련 문서를 확인하세요. 이와 같은 빌드 도구를 추가하면 코드가 더 작고 효율성이 높으며 이 경우에는 원격 호스팅 코드 문제가 해결됩니다.

파일 자동 수정

원격 호스팅 코드가 코드베이스에 입력할 수 있는 방식이 점점 더 보편화되고 있습니다. 이는 포함하는 라이브러리의 종속 항목에 해당합니다. X 라이브러리가 CDN에서 Y 라이브러리를 import하려는 경우에도 로컬 소스에서 로드되도록 업데이트해야 합니다. 최신 빌드 시스템을 사용하면 간편하게 플러그인을 만들어 원격 참조를 추출하고 코드에 직접 인라인으로 추가할 수 있습니다.

이는 주어진 코드를 의미합니다.

import moment from "https://unpkg.com/moment@2.29.4/moment.js"
console.log(moment())

작은 롤업 플러그인을 만들 수 있습니다.

import { existsSync } from 'fs';
import fetch from 'node-fetch';

export default {
  plugins: [{
    load: async function transform(id, options, outputOptions) {
      // this code runs over all of out javascript, so we check every import
      // to see if it resolves as a local file, if that fails, we grab it from
      // the network using fetch, and return the contents of that file directly inline
      if (!existsSync(id)) {
        const response = await fetch(id);
        const code = await response.text();

        return code
      }
      return null
    }
  }]
};

새 플러그인으로 빌드를 실행하면 코드, 하위 종속 항목, 하위 종속 항목 또는 다른 위치에 관계없이 모든 원격 import URL이 검색됩니다.

npx rollup --input main.js --config ./rollup.config.mjs --file compiled.js

수동으로 파일 수정

가장 간단한 방법은 RHC를 유발하는 코드를 삭제하는 것입니다. 원하는 텍스트 편집기에서 열고 위반 줄을 삭제합니다. 이 방법은 불안정하고 잊어버릴 수 있으므로 일반적으로는 권장하지 않습니다. 'library.min.js'라는 파일이 실제로 library.min.js가 아닌 경우 프로젝트를 유지하기가 더 어려워집니다. 원시 파일을 수정하는 대신 유지관리가 더 쉬운 방법은 patch-package와 같은 도구를 사용하는 것입니다. 이는 수정사항을 파일 자체가 아닌 파일에 저장할 수 있는 매우 강력한 옵션입니다. Git 또는 Subversion과 같은 버전 제어 시스템을 지원하는 것과 동일한 유형의 패치 파일을 기반으로 합니다. 위반 코드를 수동으로 수정하고 diff 파일을 저장한 후 적용하려는 변경사항으로 patch-package를 구성하기만 하면 됩니다. 프로젝트의 리드미에서 전체 가이드를 읽을 수 있습니다. 프로젝트를 패치하는 경우 프로젝트에 연락하여 변경사항을 업스트림으로 적용하는 것이 좋습니다. patch-package를 사용하면 패치를 훨씬 쉽게 관리할 수 있지만 패치할 것이 없으면 더 좋습니다.

코드가 사용되지 않는 경우 해결 방법

코드베이스가 커짐에 따라 종속 항목 (또는 종속 항목의 종속 항목 또는 종속 항목)은 더 이상 사용되지 않는 코드 경로를 유지할 수 있습니다. 이러한 섹션 중 하나에 RHC를 로드하거나 실행하는 코드가 포함되어 있으면 삭제해야 합니다. 종료되었는지 사용되지 않았는지는 중요하지 않습니다. 사용하지 않는 경우 트리셰이크 또는 라이브러리를 패치하여 제거하여 삭제해야 합니다.

해결 방법이 있나요?

일반적으로 그렇지 않습니다. RHC는 허용되지 않습니다. 하지만 허용되는 경우도 있습니다. 이런 경우는 다른 옵션으로는 불가능한 경우가 대부분입니다.

사용자 스크립트 API

사용자 스크립트는 일반적으로 사용자가 제공하는 작은 코드 스니펫으로, TamperMonkey 및 Violentmonkey와 같은 사용자 스크립트 관리자를 위해 고안되었습니다. 이러한 관리자는 사용자가 작성한 코드를 번들로 묶을 수 없으므로 User Script API는 사용자가 제공한 코드를 실행하는 방법을 제공합니다. 이는 chrome.scripting.executeScript 또는 기타 코드 실행 환경을 대체하지 않습니다. 실행하려면 사용자가 개발자 모드를 사용 설정해야 합니다. Chrome 웹 스토어 검토팀에서 이 콘텐츠가 의도하지 않은 방식 (예: 사용자가 제공한 코드)으로 사용되고 있다고 판단하면 거부되거나 스토어에서 게시 중단될 수 있습니다.

chrome.debugger

chrome.debugger API는 확장 프로그램에 Chrome Devtools 프로토콜과 상호작용할 수 있는 기능을 제공합니다. 이 프로토콜은 Chrome의 Devtools 및 수많은 다른 도구에 사용되는 것과 동일한 프로토콜입니다. 이를 통해 확장 프로그램은 원격 코드를 요청하고 실행할 수 있습니다. 사용자 스크립트와 마찬가지로 chrome.scripting을 대체하지 않으며 훨씬 뛰어난 사용자 환경을 제공합니다. 사용되는 동안 창 상단에 경고 표시줄이 표시됩니다. 배너를 닫거나 닫으면 디버깅 세션이 종료됩니다.

'Debugger 확장 프로그램이 이 브라우저를 디버깅하기 시작했습니다'라는 메시지가 표시된 Chrome 주소 표시줄의 스크린샷

샌드박스 처리된 iframe

문자열을 코드로 평가해야 하고 DOM 환경 (예: 확장 프로그램 서비스 워커가 아닌 콘텐츠 스크립트)에 있는 경우 샌드박스 처리된 iframe을 사용하는 방법도 있습니다. 확장 프로그램은 안전 예방 조치로 기본적으로 eval()와 같은 기능을 지원하지 않습니다. 악성 코드는 사용자의 안전과 보안을 위험에 빠뜨릴 수 있습니다. 그러나 코드가 웹의 나머지 부분에서 샌드박스된 iframe과 같이 알려진 안전한 환경에서만 실행되면 이러한 위험이 크게 줄어듭니다. 이 컨텍스트 내에서 eval 사용을 차단하는 콘텐츠 보안 정책을 해제하여 유효한 JavaScript 코드를 실행할 수 있습니다.

다루지 않는 사용 사례가 있다면 언제든지 chromium-extensions 메일링 리스트를 사용하여 팀에 문의하여 의견을 받거나 새 티켓을 개설하여 원스톱 지원에서 안내를 요청할 수 있습니다.

결정에 동의하지 않는 경우의 조치

정책 시행은 미세하게 조정될 수 있으며 검토에는 수동 입력이 필요하므로 Chrome 웹 스토어팀이 검토 결정을 변경하는 데 동의하는 경우도 있습니다. 검토 과정에서 실수가 있었다고 생각되면 원스톱 지원을 사용하여 거부에 항소할 수 있습니다.