InnerHtml을 안전하게 사용하면 괜찮겠죠?

"잘" 쓰면 당연히 괜찮습니다. 하지만, 프로그램이 복잡해 질수록 잘 쓰는게 어렵기 때문에 Trusted Types 같은 것들을 이용해서 특정 경우에만 작동이 되도록 강제 하기도 합니다. (퍼포먼스 관점에서는 여전히 안 좋을 수 있습니다. innerHTML이 실행 되고 나서야 html 파싱과 렌더링이 시작되니까요.) 이미 렌더링 되어있는 html을 DB등에 저장하기 위해서 어쩔수 없이 string으로 변환 했다가 다시 렌더링 해야 하는 상황인가요? 대상이 되는 노드의 패턴이 일정하거나 간단하다면, 텍스트와 속성만 저장해 둔 후에 다시 자바스크립트 상에서 같은 모양의 노드를 직접 만드는게 당연히 좋긴 합니다. 그게 아니라면 상황에 따라 다를 것 같습니다. 예를 들어, (1) 렌더링 되어있는 노드 읽기 (2) 다른 태그로 감싸기 -> (3) 문자열로 저장 -> (4) 불러오기 -> (5) innerHTML 이라는 순서라고 했을때, 지금 질문을 봤을때 (2) 에서 복잡한 과정을 하는 것 같지 않거든요, 그러면 애초에 (1) 에서 XSS가 일어났어야 (5) 에서도 일어난다는 것인데. 그러면 (1) 번을 먼저 제대로 처리 하는게 맞을것 같고요. 아니면, (1) 에서는 self-XSS 라서 별로 상관없는데, (5) 에서는 다른 사람들도 그 페이지를 볼 수 있는 경우라면 조금복잡합니다. 가장 간단한건 DOMPurify 같은 라이브러리를 활용해서 스크립트가 작동 될 수 있을만한 부분들을 다 제거하는 것입니다. 하지만, 라이브러리 자체 버그나 취약점이 있을 수 있어서 놓치는 부분들이 있을 수 있고, 업데이트를 계속 해줘야 합니다. 조금 더 철저하고 비싼 접근법으로 가면 그냥 innerHTML에서 XSS가 일어날 수 있다고 가정을 해버리고, 렌더링을 할 때 sandbox 환경에서 할 수도 있습니다. 아예 다른 origin에서 렌더링을 시키고, XSS가 발생해도 딱히 아무것도 할 수 없게 해버리는 거죠.