클립보드 제어가 사파리에서 안되는 이유?

문제 상황

 

브라우저에서 복사를 하게 되면 클립보드라는 저장소에 임시로 데이터가 저장된다. 

클립보드 메서드중 copy 메서드를 이용해 데이터를 저장하는데 사파리에서 클립보드에 복사되지 않는 이슈가 있었다. 

 

button.onclick = () => {
  setTimeout(() => {
    copyToClipboard(); 
  }, 100);
};

 

위와 같이 사용자의 상호작용에 대한 클립보드의 상호작용내에 비동기 호출후 클립보드를 복사하는 동작은 제대로 동작하지 않는다. 

사파리내에 보안정책 때문에 사용자의 이벤트로 바로 클립보드를 호출하는게 아니면 동작하지 않게 막고있다.

 

해결책

button.onclick = () => {
  copyToClipboard(); 
};

 

해결책은 생각보다 간단하다 사용자 이벤트에 바로 클립보드 제어를 해주면 된다.