Vue3에서 Markdown을 HTML로 안전하게 표시

Question

그래서 제가 만든 "사용자 정의 마크다운"이 포함된 문자열 세트가 있습니다. 내 의도는 이러한 문자열을 프런트 엔드에서 HTML로 렌더링하는 것입니다. 다음 문자열이 있다고 가정해 보겠습니다.

으아악

저는 다음과 같은 것을 바랐습니다:

으아악

지금 제가 하는 일은 몇 가지 기본적인 정규식을 사용하는 것입니다:

으아악

이것은 잘 작동하며 올바른 문자열을 반환합니다. 그런 다음 인쇄하려면 템플릿에서 다음을 수행하세요.

으아악

제 문제는 어느 시점에 사용자가 직접 이러한 문자열을 입력하고 다른 사용자에게도 표시되도록 하고 싶다는 것입니다. 그래서 확실히 XSS 공격에 취약합니다.

이를 피할 수 있는 대안이 있나요? 저는 https://github.com/Vannsl/vue-3-sanitize를 살펴보았는데 이것이 제가 사용하고 있는 것 같습니다 div、span 和 br 标签的好方法，并设置所有标签的属性仅允许为 class. 이 정도면 안전할까요? 제가 해야 할 다른 일이 있나요?

이런 경우 백엔드에서 정리할 필요는 없을 것 같은데요? 즉, 서버에 있는 문자열에 가 포함되어 있어도 웹 브라우저는 악성코드를 실행할 수 없겠죠?

Answer 1

내 문제는 어느 시점에서 사용자가 직접 이러한 문자열을 입력할 수 있기를 원한다는 것입니다

그럼 게시물에 언급한 문자열을 사용자가 입력할 수 있는 양식 입력이 있나요? 그렇다면 내 제안은 사용자 입력을 백엔드로 전달하기 전에 먼저 사용자 입력을 삭제하는 것입니다. 따라서 백엔드 자체는 악성 코드를 저장해서는 안 됩니다.

그래서 string.replace() 方法。您可以先替换 ex 的恶意标签。从输入字符串中提取 、 등을 사용한 다음 데이터베이스에 저장하면 됩니다.

따를 수 있는 단계:

• 허용되지 않는 문자/문자열의 정규식을 포함하는 blacklist 변수를 만듭니다.
• string.replace()를 사용하여 문자열에 있는 사용 가능한 모든 문자를 블랙리스트 정규식을 기반으로 빈 문자열로 바꿉니다.
• 정리된 문자열을 데이터베이스에 저장합니다.

이렇게 하면 백엔드에서 오는 문자열에 대해 걱정할 필요가 없으며 v-html를 통해 아무런 해를 끼치지 않고 바인딩할 수 있습니다.