a 태그에 target=”_blank”와 rel=”noreferrer noopener”를 함께 사용해야 하는 이유를 아시나요? 보안 취약점 때문에 타켓의 속성값으로 blank를 이용할 때는 함께 사용을 권장 합니다.
매번 속성 값을 넣어 주지 않고 자동으로 입력되게 할 수 있지 않을까란 생각이 들어 ChatGPT에게 물어보고 그 해답을 찾아 정리 합니다. 처음 한번 설정 해 두면 사이트 전체에 적용되고 a 링크 태그에서 target을 blank로 설정만 하면 자동으로 rel=부분이 입력되게 프롬프트를 입력해서 결과 값을 얻었습니다.
ChatGPT 명령어
아래와 같이 챗봇에게 명령어를 내려봤습니다.
a href= 태그에 target='_blank' 일 때는 무조건 rel='noreferrer noopener' 속성 값을 자동으로 붙이도록 사이트 전체에 적용하고 싶습니다.noreferrer noopener 결과 값
chatGPT가 조언해 준 결과 값은 다음과 같습니다. 사이트에 적용 해 테스트 해보니 잘 되고 있습니다. 역시 똑똑한 ChatGPT. ^^
<head>
<script>
document.addEventListener('DOMContentLoaded', function() {
var links = document.querySelectorAll('a[target="_blank"]');
links.forEach(function(link) {
link.setAttribute('rel', 'noreferrer noopener');
});
});
</script>
</head>마무리
비 개발자에게 너무나 유용한 chatGPT는 코딩할 때 너무 만족하게 활용하고 있습니다. 예전 생각을 해보면 이런 간단한 코드를 얻기 위해 구글링을 몇시간씩 하거나 그누보드 같은 커뮤니티 사이트에 질문을 올린 후 하루 종일 답변을 기다리고 적용하고 잘 안되면 다시 질문하는 과정을 되풀이 했을텐데 이젠 내 옆에 물어 볼 사람(?)이 있다는 것이 너무나 든든 합니다.
