Canvas Tainted 문제 해결 — 외부 이미지와 서명을 합성할 때 서명만 저장되는 이슈

Canvas Tainted 문제 해결 — 외부 이미지와 서명을 합성할 때 서명만 저장되는 이슈

문제 상황

서약서에 서명하는 기능을 개발 중이었다.

서약서 이미지 위에 사용자가 직접 서명하면, 서약서 + 서명을 하나의 이미지로 합성하여 저장하는 구조다.

[서약서 이미지] + [서명 캔버스] = [합성된 이미지(PNG)]

• 서약서가 서버 내부 파일(/api/ftp/pledge.png)일 때 → ✅ 합성 정상
• 서약서가 외부 URL(https://example.com/pledge.png)일 때 → ❌ 서명만 저장됨

화면에는 서약서 이미지가 잘 보이는데, 합성 결과에는 서명만 들어가 있었다.

---

🔍 원인 분석

1단계: 이미지는 잘 보이는데 합성이 안 된다?

<img> 태그로 외부 이미지를 표시하는 것은 CORS 제한을 받지 않는다. 브라우저가 이미지를 "보여주기만" 하는 것은 보안상 문제가 없기 때문이다.

{/* ✅ 외부 이미지도 정상 표시 */}
<img src="https://example.com/pledge.png" />

하지만 이 이미지를 Canvas에 그리면 상황이 달라진다.

2단계: Canvas Tainted (오염) 상태

Canvas API에서 외부 도메인 이미지를 drawImage()로 그리면, 브라우저는 해당 canvas를 "tainted(오염)" 상태로 표시한다.

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
ctx.drawImage(externalImage, 0, 0); // ← 여기까지는 OK

canvas.toDataURL('image/png'); // ❌ SecurityError 발생!

왜? Canvas에 외부 이미지 픽셀 데이터가 들어가면, toDataURL()이나 getImageData()로 그 데이터를 읽을 수 있게 된다. 이는 다른 도메인의 이미지 데이터를 스크립트가 읽는 것이므로 브라우저가 차단한다.

3단계: crossOrigin="anonymous" 도 안 된다?

일반적인 CORS 해결법인 crossOrigin="anonymous" 속성을 추가하면?

const img = new Image();
img.crossOrigin = 'anonymous';
img.src = 'https://example.com/pledge.png';

이 경우, 외부 서버가 Access-Control-Allow-Origin 헤더를 반환해야 이미지가 로드된다. 외부 서버가 이 헤더를 보내지 않으면 이미지 로딩 자체가 실패한다.

Access to image at 'https://example.com/pledge.png' from origin 'http://localhost:3000' 
has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present.

→ 우리가 통제할 수 없는 외부 서버이므로 이 방법은 사용 불가.

---

해결 방법: 백엔드 이미지 프록시

핵심 아이디어: 외부 이미지를 우리 서버를 경유해서 가져오면, 프론트엔드 입장에서 같은 도메인으로 인식된다.

[프론트엔드] → /api/image-proxy?url=https://example.com/pledge.png
                         ↓
              [백엔드 서버가 외부 이미지를 직접 다운로드]
                         ↓
              [프론트엔드에 이미지 바이너리 반환]
                         ↓
              [같은 도메인 → Canvas tainted 없음!]

백엔드: ImageProxyController.java

@GetMapping("/api/image-proxy")
public ResponseEntity<byte[]> proxyImage(@RequestParam("url") String url) {
    // 외부 URL만 허용 (http/https)
    if (!url.startsWith("http://") && !url.startsWith("https://")) {
        return ResponseEntity.badRequest().build();
    }

    // Java HttpClient로 외부 이미지 다운로드
    HttpRequest request = HttpRequest.newBuilder()
            .uri(URI.create(url))
            .GET()
            .timeout(Duration.ofSeconds(15))
            .build();

    HttpResponse<byte[]> response = httpClient.send(request, 
            HttpResponse.BodyHandlers.ofByteArray());

    // 원본 Content-Type과 함께 반환
    return ResponseEntity.ok()
            .contentType(MediaType.parseMediaType(contentType))
            .body(response.body());
}

프론트엔드: AgreementModal.jsx

const mergeImageAndSignature = async (signatureDataUrl) => {
  const pledgeUrl = currentPledge.fileUrl;

  // URL 유형별 분기
  if (isExternalUrl(pledgeUrl)) {
    // ── 외부 URL: 프록시 경유 → blob → ObjectURL → Canvas ──
    const proxyUrl = `/api/image-proxy?url=${encodeURIComponent(pledgeUrl)}`;
    const response = await fetch(proxyUrl);
    const blob = await response.blob();
    const objectUrl = URL.createObjectURL(blob);
    // → objectUrl은 blob:http://localhost:3000/... 이므로 같은 도메인!
    // → Canvas tainted 없음 ✅
  } else {
    // ── 같은 서버 파일: DOM의 <img>를 직접 사용 ──
    ctx.drawImage(pledgeImgRef.current, 0, 0);
    // → 같은 도메인이므로 문제 없음 ✅
  }
};

인터셉터 설정: WebConfig.java

프록시 API는 인증이 필요 없으므로 JWT 인터셉터에서 제외해야 한다. 이 부분을 놓치면 프록시 자체가 401을 반환한다.

.excludePathPatterns(
    "/api/image-proxy"  // 서약서 외부 이미지 프록시 (인증 불필요)
)

---

⚠ 삽질 로그

디버깅 과정에서 여러 시행착오를 거쳤다.

시도	결과	원인
crossOrigin="anonymous" 추가	❌ 이미지 로딩 자체 실패	외부 서버가 CORS 헤더 미제공
fetch() → blob → ObjectURL	❌ application/json 89 bytes	fetch()에 인증 토큰 미포함 → 401 응답
axios (api 인스턴스) 사용	❌ 요청 경로 중복	baseURL: '/api'로 인해 /api/api/ftp/...
axios 직접 사용 + withCredentials	❌ 여전히 실패	쿠키만으로 인증 안 되는 구조
화면 DOM <img> ref 직접 사용	⚠️ 파일은 OK, 외부 URL은 NG	Canvas tainted
백엔드 프록시 + 인터셉터 제외	✅ 성공	같은 도메인으로 인식

---

정리

구분	같은 서버 파일	외부 URL
<img> 표시	✅	✅
Canvas drawImage()	✅	✅ (그려짐)
Canvas toDataURL()	✅	❌ (tainted)
해결 방법	DOM <img> ref 직접 사용	백엔드 프록시 경유

핵심 포인트

1. 브라우저는 이미지 "표시"와 "데이터 읽기"를 구분한다. 표시는 자유롭지만, Canvas를 통한 픽셀 데이터 읽기(toDataURL)는 CORS 정책의 적용을 받는다.

2. 외부 서버를 통제할 수 없으면 프록시가 유일한 해결책이다. 백엔드에서 외부 이미지를 대신 가져와 프론트에 전달하면 같은 도메인으로 인식된다.

3. 프록시 API도 인증 인터셉터에 등록되어 있으면 401이 발생한다. 반드시 excludePathPatterns에 추가해야 한다.

🏷️

#Canvas #CORS #TaintedCanvas #JavaScript #SpringBoot #ImageProxy #보안정책 #트러블슈팅