원격 호스팅 코드 위반 처리

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

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

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

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

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

RHC를 발견하는 방법

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

라이브러리에서 코드를 요청하는 경우 취해야 할 조치

코드가 어디에서 왔는지와 관계없이 RHC는 허용되지 않습니다. 여기에는 직접 작성하지는 않았지만 프로젝트에서 종속 항목으로 사용하는 코드가 포함됩니다. Firebase를 사용하는 일부 개발자에게 Firebase 인증에서 사용할 원격 코드가 포함될 때 이 문제가 발생했습니다. 이 라이브러리는 서드 파티 (즉, Google 소유) 라이브러리이지만 RHC에 예외가 적용되지 않습니다. RHC를 삭제하거나 프로젝트에 코드가 포함되지 않도록 코드를 구성해야 합니다. RHC를 로드하는 코드가 내 코드가 아니라 사용 중인 라이브러리인 문제가 발생하면 라이브러리 작성자에게 문의하는 것이 가장 좋습니다. 이 문제가 발생하고 있음을 알리고 해결 방법이나 코드를 업데이트하여 문제를 해결해 달라고 요청하세요.

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

일부 라이브러리는 알림을 받은 후 거의 즉시 업데이트를 제공하지만, 다른 라이브러리는 버려지거나 문제를 해결하는 데 시간이 걸릴 수 있습니다. 특정 위반에서 무엇이 발생하고 있는지에 따라 차단 해제를 위해 이동할 때까지 기다리지 않고도 검토를 완료할 수 있습니다. 다양한 옵션을 사용하여 빠르게 다시 시작할 수 있습니다.

코드 감사

요청을 유발하는 코드가 필요한지 확실한가요? 삭제할 수 있거나 문제를 일으키는 라이브러리를 삭제할 수 있는 경우 해당 코드를 삭제하면 됩니다.

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

트리 쉐이킹

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

트리 셰이킹을 구현하는 방법의 구체적인 내용은 프로젝트에 따라 다릅니다. 하지만 Rollup의 간단한 예를 들면 프로젝트 코드를 컴파일하기만 해도 트리아이콘을 추가할 수 있습니다. 예를 들어 Firebase Auth에만 로그인하는 파일(main.js)이 있는 경우:

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에 입력 파일, 노드 파일을 로드하는 데 필요한 플러그인 @rollup/plugin-node-resolve, 생성되는 출력 파일의 이름을 알려주면 됩니다.

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

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

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

파일 자동 수정

원격으로 호스팅된 코드가 코드베이스에 들어가는 점점 더 일반적인 방법은 포함하는 라이브러리의 하위 종속성으로 들어가는 것입니다. 라이브러리 X가 CDN에서 라이브러리 import를 원하는 경우 로컬 소스에서 로드되도록 업데이트해야 합니다.Y 최신 빌드 시스템을 사용하면 원격 참조를 추출하고 코드에 직접 인라인하는 플러그인을 간단하게 만들 수 있습니다.

즉, 다음과 같은 코드가 주어졌다고 가정해 보겠습니다.

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
    }
  }]
};

새 플러그인으로 빌드를 실행하면 Google 코드인지, 하위 종속 항목인지, 하위 하위 종속 항목인지, 아니면 다른 위치에 있는지와 관계없이 모든 원격 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 file)을 저장하고, 적용하려는 변경사항으로 patch-package를 구성하기만 하면 됩니다. 프로젝트의 README에서 전체 튜토리얼을 읽을 수 있습니다. 프로젝트를 패치하는 경우 프로젝트에 연락하여 업스트림에서 변경사항을 적용하도록 요청하는 것이 매우 좋습니다. patch-package를 사용하면 패치 관리가 훨씬 쉬워지지만 패치할 항목이 없는 것이 훨씬 좋습니다.

코드가 사용되지 않는 경우 대처 방법

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

다른 해결 방법이 있나요?

일반적으로 허용되지 않습니다. RHC는 허용되지 않습니다. 하지만 허용되는 경우가 소수 있습니다. 이러한 경우는 다른 옵션이 불가능한 경우인 경우가 거의 대부분입니다.

User Scripts API

사용자 스크립트는 일반적으로 사용자가 제공하는 작은 코드 스니펫으로, TamperMonkey 및 Violentmonkey와 같은 사용자 스크립트 관리자를 위한 것입니다. 이러한 관리자는 사용자가 작성한 코드를 번들로 묶을 수 없으므로 사용자 스크립트 API는 사용자가 제공한 코드를 실행하는 방법을 노출합니다. 이는 chrome.scripting.executeScript 또는 기타 코드 실행 환경을 대체하지 않습니다. 사용자는 개발자 모드를 사용 설정해야 실행할 수 있습니다. Chrome 웹 스토어 검토팀에서 의도된 용도 (즉, 사용자가 제공한 코드)와 다른 방식으로 사용되고 있다고 판단하는 경우 거부되거나 스토어에서 등록정보가 삭제될 수 있습니다.

chrome.debugger

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

샌드박스 처리된 iframe

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

다루지 않는 사용 사례가 있는 경우 chromium-extensions 메일링 리스트를 사용하여 팀에 문의하여 의견을 받거나 새 티켓을 열어 원스톱 지원의 안내를 요청하세요.

평결에 동의하지 않는 경우 해야 할 일

정책 시행은 미묘한 차이가 있을 수 있으며 검토에는 수동 입력이 포함되므로 Chrome 웹 스토어팀에서 리뷰 결정을 변경하는 데 동의하는 경우가 있습니다. 검토에 오류가 있다고 생각되면 원스톱 지원을 사용하여 거부에 대해 이의신청할 수 있습니다.