JavaScript 클립보드가 되지 않을 때

오늘도 평소와 같이 회사에 출근해서 진행 중인 프로젝트 UI 테스트를 진행하였다. 뭐 거창한 건 아니고 기능 하나씩 구현하면서 버그가 있나 확인하는 작업이라고 할 수 있다.

화면 정의서와 다르게 구현되거나 기능이 빠진 부분에 대한 코드 훑어보고 후딱 처리하며 문제를 해결해 나가고 있는데, 어떤 기능 하나가 동작을 안하는데 도통 이유를 알 수 없었다.

오늘은 이 문제가 일어난 원인과 해결 방법에 대해 공유하려고 한다.

💣 클립보드 복사가 안된다

회사 코드를 공개할 수 없어서 바닐라 자바스크립트 코드를 예시로 들어보자.

<body>
  <button type="button">Click Here!</button>
  <script>
    const button = document.querySelector('button')

    const copyText = () => {
    navigator.clipboard.writeText(button.innerText)
    }

    button.addEventListener('click', copyText)
  </script>
</body>

button을 클릭하면 'Click Here!'라는 텍스트가 클립보드에 복사하는 기능을 구현하였다. 개발 작업 환경인 로컬에서는 해당 클립보드 기능이 제대로 동작하는 것을 확인할 수 있다.

이러한 기능은 자바스크립트에서 제공하는 Clipboard API를 통하여 사용되어 웹 페이지의 텍스트나 이미지 같은 데이터를 클립보드에 복사 및 붙여넣을 수 있도록 한다.

그러나 테스트용 배포를 하고 http 환경에서 해당 기능을 시도해보면 클립보드 복사가 되지 않는다. 원인이 무엇일까?

🧶 Clipboard API가 제공이 안되네...

안타깝게도 Clipboard API는 브라우저 보안 프로토콜로 인하여 Safari 13.1 버전부터 https 환경에서만 지원한다고 한다.

일반적으로 보안 상의 이유로 로컬 파일 시스템에 접근하거나 클립보드 같은 작업을 수행할 때 동일 출처 정책을 따른다. 이는 웹 페이지가 자신의 출처에서만 리소스에 접근하도록 하는 것이다. 따라서 http에서는 보안 정책에 위반되어 브라우저에서 차단되었을 가능성이 높다.

보안을 강화하기 위해서 https를 권장한다. https를 통한 통신은 데이터의 암호화를 제공하고, 브라우저는 https 환경에서 동작하는 페이지에 대해 더 높은 신뢰를 가진다.

그럼 로컬 환경에서는 왜 동작하는 것일까? 정확한 이유는 잘 모르겠지만 추측으로, 로컬에서는 보안 정책이 상대적으로 덜 엄격하거나 특정한 보안 규칙이 적용되지 않을 수 있다.

💊 그래도 해결책은 있다

Clipboard API 이전에 execCommand 메서드가 존재하였다.

안타깝게도 이 메서드는 더 이상 지원되지 않아 점점 도태되어 사라질 것이다.

하지만 이런 썩은 밤이라도 주워 먹어야 하는 불쌍한 다람쥐 신세.. 🌰🐿

<body>
    <button type="button">Click Here!</button>
    <script>
      const button = document.querySelector('button')

      const copyText = () => {
        if (navigator.clipboard) {
          navigator.clipboard.writeText(button.innerText)
        } else {
          const textArea = document.createElement('textarea')
          textArea.value = button.innerText
          document.body.appendChild(textArea)
          textArea.select()
          document.execCommand('copy')
          document.body.removeChild(textArea)
        }
      }

      button.addEventListener('click', copyText)
    </script>
  </body>

navigator.clipboard가 존재하는, 즉 https에서는 기존과 동일하게 동작한다. 그렇지 않은 http에서는 다소 코드가 길고 복잡한 과정을 거치게 된다.

값을 저장할 textarea라는 요소를 하나 만들어주고
복사할 값을 해당 요소의 value 속성에 할당한다.
해당 요소를 html 문서에 더하고 선택한다. 이는 클립보드에 복사할 내용을 선택하는 것과 같은 기능을 한다.
execCommand 메서드를 사용해 클립보드에 복사 명령을 한다.
더이상 필요 없어진 요소를 문서에서 삭제한다.

마치며

이런 썩은 밤 덕분에 야무지게 문제를 해결할 수 있었다. ~~그냥 회사에서 http 환경을 사용하지 않는다면.~~

Clipboard API가 왜 안될까...

💣 클립보드 복사가 안된다

🧶 Clipboard API가 제공이 안되네...

💊 그래도 해결책은 있다

마치며

Comments

JavaScript

Debounce로 성능 최적화하기

More from this blog

시맨틱하게 다이얼로그 만들기

aria-label 사용 시 주의할 점

[JavaScript] 이미지 사이즈 압축해서 용량 줄이기

[JavaScript] 이미지 수정 시 브라우저 캐싱 방지하기

[React] 렌더링 관점에서 보는 react-hook-form (feat. useRef)

Command Palette

💣 클립보드 복사가 안된다

🧶 Clipboard API가 제공이 안되네...

💊 그래도 해결책은 있다

마치며

Comments

JavaScript

Debounce로 성능 최적화하기

More from this blog

Debounce로 성능 최적화하기