테마 스크립트를 CSP에 자동으로 추가하는 방법

외부 JavaScript 참조를 테마에 추가하려는 사용자의 지원 주제를 자주 접하게 됩니다. 기본적으로 콘텐츠 보안 정책(CSP)은 이를 차단하며, 관리자가 CSP 사이트 설정(또는 테마 설정/수정기)에 스크립트를 수동으로 추가해야 합니다.

그러나 @Johani님이 이를 개선할 수 있는 훌륭한 제안을 해주셨습니다.

테마 개발자에게 관리자 UI에서 복사/붙여넣기를 하도록 요구하는 대신, 이 과정을 자동화할 수 있습니다. 테마의 모든 HTML을 파싱하여 외부 스크립트의 src를 추출하고 CSP에 추가하는 것입니다.

결국 컴퓨터는 인간보다 반복적인 복사/붙여넣기 작업에서 훨씬 더 능숙하니까요!

이를 구현하는 PR을 열었습니다:

로컬에서 콘솔 오류가 몇 가지 발생합니다:

image

프로덕션 환경에서는 https://CDN_SERVER/theme-javascripts/31657759d037d8c06397e9965a1113169100846e.js... 형식으로 소스가 추가되는 것을 확인했는데, 이는 정책에서 이미 https://CDN_SERVER/theme-javascripts를 화이트리스트에 등록해 놓은 상태이므로 중복됩니다. 자동 확장(auto-extension)을 외부 스크립트 소스에만 제한하는 것이 좋을까요?

감사합니다 @pmusaraj. CSP에서 잘못된 URL이 제공되지 않도록 몇 가지 추가 검사를 추가했고, theme-javascript URL이 제외되도록 확인했습니다:

정말 대단하네요. @merefield, 이거 엄청 멋지지 않나요?