navigator.clipboard.writeText() 보안 이슈

🚨 문제 상황

window API 에서 제공하는 navigator의 writeText() 메소드를 이용해 오른쪽 아이콘 버튼을 누르면 비밀번호가 복사되는 기능을 구현했다.

아이콘 버튼에 click 이벤트가 발생하면 form 요소의 innerText를 password라는 변수로 할당받고 해당 변수를 navigator.clipboard.writeText의 인수로 전달해 form 요소 안의 내용을 클립보드에 복사하도록 하였다.

분명히 5달 전에 처음 구현했을 때는 잘 작동하였는데 최근 강의 내용을 복습하면서 live server로 앱을 실행시켜보니 다음과 같이 TypeError가 발생하였다.

script.js:113 Uncaught TypeError: Cannot read properties of undefined (reading 'writeText')
    at HTMLDivElement.<anonymous> (script.js:113:23)

---

🤔 문제 원인

HTTPS 환경에서 실행

해당 에러를 구글링 해보니 해당 메소드에는 호환성 관련 이슈가 있었다.

if (navigator.clipboard && navigator.clipboard.writeText) {
  navigator.clipboard
    .writeText('Some text to copy')
    .then(() => console.log('Text copied!'))
    .catch((err) => console.error('Failed to copy text: ', err));
} else {
  console.error('Clipboard API is not supported in this browser.');
}

따라서, 정확한 호환성 테스트를 위해 위의 코드를 이용하여 호환성 테스트를 해보았고 'Clipboard API is not supported in this browser.'라는 메시지를 콘솔창에서 확인할 수 있었다.

검색해 본 결과 내가 사용하고 있는 chrome 브라우저 는 최신 버전이었고 버전에 따른 호환성이슈라기 보다 다른 문제가 있는 듯 하였다. chrome이라는 키워드를 더해 더 구글링 해본 결과 해당 메소드는 크롬 브라우저 보안 설정과 관련된 이슈가 있었다.

chrome과 edge 브라우저의 경우 https 환경이 아닐 시 클립보드 기능을 차단한다.

즉, Clipboard API는 보안된 환경(HTTPS)에서만 동작하며 따라서 로컬 파일 시스템(file://)에서 실행 중이거나, HTTP에서 실행하는 경우 동작하지 않을 수 있다.

이를 해결하기 위해 Node.js로 서버 환경으로 접근할 수도 있지만, 크롬 브라우저의 보안 설정을 바꾸는 간단한 방법으로 문제를 해결할 수 있었다.

---

💡 문제 해결 방법

1. "chrome://flags/" 에 접속한다.

2. "Insecure origins treated as secure" 을 검색하여 box안에 접속할 url을 입력한 후, 해당 설정을 사용 가능으로 바꿔준다.

https://program-error-review.tistory.com/55