참고 자료#

Mozilla HTTP Observatory CLI와 Qualys SSL Labs Server Test는 잠재적인 문제를 찾고 보안 모범 사례 준수 여부를 확인하는 데 유용한 자료입니다.

외부 리소스 포함#

외부 폰트, CSS, JavaScript는 사용하지 않습니다. 예외는 Google Analytics와 Matomo 이며, 이 또한 인스턴스에서 활성화한 경우에만 해당합니다. 에셋은 항상 GitLab 인스턴스에서 로컬로 호스팅하고 제공해야 합니다. iframes를 이용한 임베드 리소스도 사용하지 않습니다. 다만 iframe 없이는 사용할 수 없는 reCAPTCHA와 같은 일부 경우는 예외입니다.

인라인 스크립트와 인라인 스타일 회피#

사용자를 XSS 취약점으로부터 보호하기 위해, 향후 Content Security Policy로 인라인 스크립트를 비활성화할 예정입니다.

인라인 스크립트는 작업을 간편하게 만들어 주기도 하지만 보안 우려 사항이기도 합니다. 사용자가 제공한 콘텐츠가 의도치 않게 정제되지 않은 채 남으면, 악의적인 사용자가 웹 애플리케이션에 스크립트를 주입할 수 있습니다.

인라인 스타일은 거의 모든 경우에 피해야 하며, 다른 대안을 찾을 수 없을 때만 사용합니다. 이렇게 하면 스타일의 재사용성과 가독성을 확보할 수 있습니다.

HTML 출력 정제#

원시 HTML을 출력해야 한다면 반드시 정제해야 합니다.

Vue를 사용하는 경우에는 v-safe-html 디렉티브를 사용할 수 있습니다.

그 밖의 경우에는 아이콘도 렌더링할 수 있도록 미리 구성해 둔 dompurify 래퍼를 사용합니다.

import { sanitize } from '~/lib/dompurify';

const unsafeHtml = '<some unsafe content ... >';

// ...

element.appendChild(sanitize(unsafeHtml));

이 sanitize 함수는 원본과 동일한 구성을 받습니다.

보안 이슈 수정#

오래된 코드를 리팩터링할 때는 보안 이슈를 잡기 위해 작성된 스펙 중 여전히 유효한 것을 실수로 제거하지 않는 것이 중요합니다.

이러한 스펙은 describe 나 it 블록에 #security를 표시해 두어야 합니다. 그래야 코드를 읽는 엔지니어에게 이 스펙을 제거하면 나중에 심각한 결과를 낳을 수 있고, 보안 이슈의 재유입을 잡아낼 수 있는 코드를 제거하는 것임을 알릴 수 있습니다.