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

Question

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

으아악

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

으아악

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

으아악

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

으아악

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

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

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

Answer 1

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

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

그래서 string.replace() 方法。您可以先替换 ex 的恶意标签。从输入字符串中提取

• 집

• 강의

• Q&A

• 나의

• 집
• 강의
• 기사
• Q&A
• 사전
• 수동
• 다운로드
• 주제

집

기사

Q&A

강의

주제

다운로드

게임

사전

简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）