기계 번역으로 제공되는 번역입니다. 제공된 번역과 원본 영어의 내용이 상충하는 경우에는 영어 버전이 우선합니다. # ㅂJavaScript용 Amazon Chime SDK 클라이언트 라이브러리에서 content-security 정책 사용 최신 웹 애플리케이션은 콘텐츠 보안 정책을 사용하여 특정 유형의 공격으로부터 사용자를 보호합니다. `VideoFxProcessor`를 사용하는 애플리케이션에는 이 단원에 설명된 정책 지시문이 포함되어야 합니다. 이 지시문을 사용하면 Amazon Chime SDK가 런타임에 필요한 리소스에 액세스할 수 있습니다. **Topics** + [필수 콘텐츠 보안 정책 지시문](#required-csp) + [콘텐츠 보안 정책 예제](#example-csp) + [콘텐츠 보안 정책 오류](#csp-errors) + [교차 오리진 오프너 콘텐츠 보안 정책](#cross-origin-policy) ## 필수 콘텐츠 보안 정책 지시문 다음 콘텐츠 보안 정책 지시문을 사용해야 합니다. + `script-src:`: `blob: https://*.sdkassets.chime.aws`를 추가하여 비디오 처리 코드를 로드하고 `wasm-unsafe-eval`을 추가하여 실행을 허용합니다. + `script-src-elem:`: `blob:` `https://*.sdkassets.chime.aws`를 추가하여 소스에서 비디오 처리 코드를 로드합니다. + `worker-src:`: `blob: https://*.sdkassets.chime.aws`를 추가하여 오리진 전체에서 작업자 JavaScript를 로드합니다. 이러한 항목 중 하나를 생략하거나 HTTP 헤더 및 `http-equiv` 메타 태그를 사용하여 정책을 지정하고 실수로 교차점을 통해 이러한 항목을 제외하는 경우 배경 필터를 초기화할 수 없습니다. 필터가 지원되지 않는 것 같거나 작동하지 않는 비디오 프레임 프로세서를 생성합니다. 브라우저 콘솔에 다음과 같은 오류가 표시됩니다. ``` Refused to connect to 'https://static.sdkassets.chime.aws/bgblur/workers/worker.js…' because it violates the document's content security policy. ``` ### 필수 스크립트 정책 지시문 제대로 작동하려면 `VideoFxProcessor` 클래스가 Amazon 콘텐츠 전송 네트워크에서 런타임에 JavaScript 클래스를 로드해야 합니다. 이러한 클래스는 WebGL2를 사용하여 비디오의 후처리를 구현합니다. 애플리케이션이 이러한 클래스를 가져와서 실행할 수 있게 하려면 다음 지시문을 포함해야 합니다. + `script-src 'self' blob: https://*.sdkassets.chime.aws` + `script-src-elem 'self' blob: https://*.sdkassets.chime.aws` **참고** Safari와 Firefox를 완벽하게 지원하려면 `script-src` 및 `script-src-elem` 지시문을 사용해야 합니다. ### 작업자 정책 지시문 `VideoFxProcessor`는 JavaScript 클래스를 blob으로 로드하여 웹 작업자 스레드를 실행합니다. 스레드는 기계 학습 모델을 사용하여 비디오를 처리합니다. 애플리케이션에 이 작업자를 가져오고 사용할 수 있는 액세스 권한을 부여하려면 다음 지시문을 포함하세요. `worker-src 'self' blob: https://*.sdkassets.chime.aws` ### WebAssembly 정책 `VideoFxProcessor`는 Amazon 소유의 동일한 콘텐츠 전송 네트워크에서 WASM(WebAssembly) 모듈을 로드합니다. Chrome 95 이상에서는 컴파일된 WASM 모듈을 여러 모듈 경계를 넘어 전달할 수 없습니다. 이러한 모듈을 가져오고 인스턴스화할 수 있도록 하려면 `script-src` 지시문에 `'wasm-unsafe-eval'`를 포함하세요. WebAssembly에 대한 콘텐츠 보안 정책 문서에 대한 자세한 내용은 GitHub의 [WebAssembly 콘텐츠 보안 정책](https://github.com/WebAssembly/content-security-policy/blob/main/proposals/CSP.md)을 참조하세요. ### (선택 사항) 배경 이미지 정책 지시문 동적으로 로드된 배경 이미지를 배경 교체 필터와 함께 사용하려면 `VideoFxProcessor`에 이미지에 대한 액세스 권한이 있어야 합니다. 그렇게 하려면 이미지를 호스팅하는 도메인에 `connect-src` 지시문을 포함시키세요. ## 콘텐츠 보안 정책 예제 다음 예제 정책을 사용하면 `VideoFxProcessor`를 사용할 수 있습니다. `connect-src` 정의는 `VideoFxProcessor`에만 국한되지 않습니다. 대신 Amazon Chime SDK 회의에서 나온 오디오 및 비디오와 관련이 있습니다. ``` ``` ## 콘텐츠 보안 정책 오류 필수 지침을 생략하면 `VideoFxProcessor`가 인스턴스화되지 않고 지원되지 않습니다. 이 경우 브라우저 콘솔에 다음과 같은(또는 유사한) 오류가 나타납니다. ``` Refused to connect to 'https://static.sdkassets.chime.aws/ml_media_fx/otherassets/worker.js' because it violates the document's content security policy. ``` ## 교차 오리진 오프너 콘텐츠 보안 정책 메모리 사용량을 제한하기 위해 모듈은 처리 용도로 `SharedArrayBuffer`를 사용하는 것을 선호합니다. 그러나 이를 위해서는 웹 보안을 신중하게 구성해야 합니다. 애플리케이션 HTML을 제공할 때는 다음 헤더를 설정해야 합니다. ``` Cross-Origin-Opener-Policy: same-origin Cross-Origin-Embedder-Policy: require-corp ``` 메타태그에 상응하는 항목이 없으므로 서버에서 이를 설정해야 합니다. 이러한 헤더를 설정하지 않으면 배경 필터가 약간 더 많은 RAM을 사용할 수 있습니다. 배경 필터는 CPU를 많이 사용하고 GPU를 많이 사용할 수 있습니다. 일부 모바일 디바이스와 저사양 노트북 또는 데스크톱 컴퓨터에서는 여러 개의 동영상 스트림과 함께 필터를 실행할 수 없을 수도 있습니다.