[javascript] Marked에서 HTML 작성 시 주의해야 할 사항은 무엇인가요?
  1. HTML Injection 공격을 방지하기 위해 사용자 입력을 HTML로 변환하기 전에 반드시 이스케이프(Escape)해야 합니다. 이렇게 하면 사용자가 입력한 내용이 신뢰할 수 없는 코드로 평가되지 않습니다.

    const userInput = '<script>alert("Hello!");</script>';
    const escapedHTML = escapeHtml(userInput);
    const html = marked(escapedHTML);
    console.log(html);
    
  2. 사용자가 입력한 내용에 스크립트 태그나 다른 HTML 요소가 포함되어 있을 경우, Marked의 sanitize 옵션을 사용하여 HTML 요소를 제한할 수 있습니다.

    const userInput = '<script>alert("Hello!");</script> <p>Some content</p>';
    const html = marked(userInput, {
      sanitize: true
    });
    console.log(html);
    // Output: <p>alert("Hello!");</p> <p>Some content</p>
    
  3. 매우 긴 줄이나 HTML 특수 문자를 사용할 경우, Marked는 이를 처리하는 시간이 오래 걸릴 수 있습니다. 이런 경우 breaks 옵션을 사용하여 줄 바꿈을 적용할 수 있습니다.

    const userInput = 'This is a very long line without any breaks or spaces<img src="image.png" alt="Image">';
    const html = marked(userInput, {
      breaks: true
    });
    console.log(html);
    // Output: <p>This is a very long line without any breaks or spaces<br><img src="main.png" alt="Image"></p>
    
  4. 사용자가 입력한 URL 및 링크에 대한 보안 검사를 진행해야 합니다. Marked는 자동으로 URL을 링크로 변환하지만, 입력한 URL이 악의적인 사이트로 연결되지는 않는지 확인해야합니다.

    const userInput = 'Check out my website: [mywebsite.com](https://example.com)';
    const html = marked(userInput);
    console.log(html);
    

마크다운을 HTML로 변환할 때 위 주의 사항을 염두에 두면 보안 및 콘텐츠의 안정성을 유지할 수 있습니다. 추가적으로 Marked의 옵션을 사용하여 원하는 출력 결과를 조절할 수 있습니다.