[vue-dompurify-html] a태그 새 창 열기

HTML 코드를 안전하게 추가하기 위해 v-html 대신 vue-dompurify-html 라이브러리를 사용하고 있다. 
그런데 a 태그에 target="_blank"를 설정해도 새 창으로 열리지 않는 문제가 발생했다.

---

이 문제는 DOMPurify의 기본 설정에서 target 속성을 제거하기 때문이다. 
이를 해결하기 위해 DOMPurify의 Hooks 기능을 사용하여 target="_blank"를 강제로 추가할 수 있었다.

// main.js
import { createApp } from 'vue';
import VueDOMPurifyHTML from 'vue-dompurify-html';

const app = createApp(App);
app.use(VueDOMPurifyHTML, {
	// DOMPurify는 hooks를 통해 정화 과정이 끝난 후 추가적인 처리를 할 수 있다.
    hooks: { 
        // 이 훅은 태그의 속성이 정화된 후에 호출된다. 
        // 여기서 우리는 a 태그처럼 target 속성이 있는 노드를 찾아 target="_blank"를 강제로 다시 추가한다.
        afterSanitizeAttributes: node => {
            if ('target' in node) {
                // 노드에 target="_blank" 속성을 설정해, 새 창에서 링크가 열리도록 한다.
                node.setAttribute('target', '_blank');
                // 보안 강화
                node.setAttribute('rel', 'noopener noreferrer'); 

            }
        },
	},
});

app.mount('#app');

 

 

주의 사항

하지만 target="_blank"를 사용하는 것은 보안상 위험할 수 있다. 새 창이 부모 창에 접근할 수 있는 취약점을 막기 위해 반드시 rel="noopener noreferrer"를 함께 사용해야 한다. 이를 추가하지 않으면 새 창이 부모 창의 컨트롤을 가져가는 보안 위험이 발생할 수 있으므로 주의가 필요하다.

 

참고

https://www.npmjs.com/package/vue-dompurify-html

https://github.com/cure53/DOMPurify#hooks