아이폰 사파리에서 이미지 새로고침 안될 때(Feat. 캡챠, Webkit 엔진)

로그인 페이지에 캡챠가 적용되어 있다. '새로고침'을 누르면 당연히 캡챠가 새로고침 되어야 한다. 물론 내가 할 땐 잘됐다. 그런데 테스트를 해보시더니 캡챠 문자열 새로고침이 안된다고 한다.

"아이폰에서 안되요."

처리 프로세스

1. 서버로 캡챠 새로고침을 요청한다.
2. 이미지 element의 src attribute에 캡챠 이미지를 세팅한다.
3. '/capcha/image' API 에서는 세션에 저장된 캡챠값을 이미지로 생성하여 반환한다.

$.ajax('/captcha/refresh').done(function () {
    imgElement.attr('src', '/captcha/image');
});

그런데 아이폰(=사파리=웹킷 엔진)에서는 이미지가 새로고침 되지 않았다.

오류 해결

여러가지 테스트를 해보니, 웹킷 엔진에서는 img src 값이 수정되지 않는 이상 캐시 이미지를 그대로 보여주는 것 같다. 그래서 다음과 같이 캐시 방지를 위한 값을 파라미터로 추가했다.

$.ajax('/captcha/refresh').done(function () {
    imgElement.attr('src', '/captcha/image?cache=' + (new Date()).getMilliseconds());
});

크로스브라우저 처리는 정말 어렵다. 나는 한창 IE8을 많이 쓰던 시절에 웹개발을 시작했다. IE가 없어지면 세상이 더 좋아질 줄 알았다. 어느날, 정말로 IE가 세상에서 사라졌다. 하지만 이제 다른 방식으로 힘들다. 물론 IE를 대응할 때처럼 '부당하다'는 감정이 들지는 않지만, 힘들긴 힘들다. 그래도 이렇게 문제가 계속 생기니 내가 먹고살 수 있는 것이겠지... ☺️