사이트 전체에 rel=’noreferrer noopener’를 자동으로 적용하는 방법 1가지

a 태그에 target=”_blank”와 rel=”noreferrer noopener”를 함께 사용해야 하는 이유를 아시나요? 보안 취약점 때문에 타켓의 속성값으로 blank를 이용할 때는 함께 사용을 권장 합니다.

매번 속성 값을 넣어 주지 않고 자동으로 입력되게 할 수 있지 않을까란 생각이 들어 ChatGPT에게 물어보고 그 해답을 찾아 정리 합니다. 처음 한번 설정 해 두면 사이트 전체에 적용되고 a 링크 태그에서 target을 blank로 설정만 하면 자동으로 rel=부분이 입력되게 프롬프트를 입력해서 결과 값을 얻었습니다.

ChatGPT 명령어

아래와 같이 챗봇에게 명령어를 내려봤습니다.

a href= 태그에 target='_blank' 일 때는 무조건 rel='noreferrer noopener'  속성 값을 자동으로 붙이도록 사이트 전체에 적용하고 싶습니다.

noreferrer noopener 결과 값

chatGPT가 조언해 준 결과 값은 다음과 같습니다. 사이트에 적용 해 테스트 해보니 잘 되고 있습니다. 역시 똑똑한 ChatGPT. ^^

noreferrer noopener 자동입력 샘플
<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는 코딩할 때 너무 만족하게 활용하고 있습니다. 예전 생각을 해보면 이런 간단한 코드를 얻기 위해 구글링을 몇시간씩 하거나 그누보드 같은 커뮤니티 사이트에 질문을 올린 후 하루 종일 답변을 기다리고 적용하고 잘 안되면 다시 질문하는 과정을 되풀이 했을텐데 이젠 내 옆에 물어 볼 사람(?)이 있다는 것이 너무나 든든 합니다.


단축주소: https://zeze.kr/2S7h

Leave a Comment

함께보면 유용한 글


마우스오버 툴팁 나타내기 1가지 방법

텍스트나 이미지에 마우스를 가져다 가면 추가 설명처럼 툴팁 박스가 보이게 하는 소스(마우스오버 툴팁스) 입니다. 마우스오버 툴팁 나타내기 소스코드 인터넷에서 또는 챗GPT를 통해 필요한 소스를 기록형으로 남기고 있습니다. 다른 글은 여기서 확인 가능 합니다. Tooltips 관련 ... Read more

Cloudflare(클라우드플레어)에 도메인 추가하는 방법 1가지

클라우드플레어에 도메인 추가 하는 방법에 대해 알아보려 합니다. 왜 이 작업이 필요 했을까요? 저 같은 경우는 사이트에 이상한 접속이 보여서 추가하기 시작 했습니다. 서버 디비 로그에 1.5기가 쌓여서 쉐어호스팅 업체의 경고 메일을 받았었고, 최근에 추가 ... Read more

폼 제출 버튼 비밀번호 적용하기 1가지 방법

폼 제출 버튼 비밀번호 적용하는 1가지 방법을 자바스크립트로 구현했습니다. updated: 24시간 내 쿠키 적용해 비밀번호를 1번만 입력하면 됩니다. 필요한 경우 아래와 같이 입력 폼이 있을 때 관리자만 입력을 할 수 있게 하고 싶을 경우가 있습니다. ... Read more

국내 사이트를 위한 대표적인 검색로봇 종류와 robots.txt 작성법 1가지

글로벌 사이트가 아닌 이상 대상은 내국인을 상대로한 웹마케팅을 기획해야 합니다. 지난 주말 작성을 어떻게 하는게 좋은지에 대한 고민도 하고 검색도 해봤습니다. 내가 내린 나만의 결론을 이야기하려 구글 검색이나 구글 SEO에 관심이 있으신 분들에게 조금이라도 도움이 ... Read more