Adobe Express 애드온 개발자를 위한 Cross-Origin(교차출처) Isolation 가이드

Irelander_Kai·2024년 12월 30일
Adobe ExpressCross Originaddon
0

Adobe Express Addon

목록 보기
2/5

2024년에 Adobe Express Add-on에 중요한 변경사항이 적용됩니다. 웹사이트 개발에서 신경써야 할 부분중 하나인 교차출처관련 정책이 더욱 강화됩니다. 어도비 테크 블로그에 안내된 내용을 공유하려 합니다.

지금까지는 Addon을 개발하게 되면 가장 빠르게 소유하고 있는 서비스와 연동 할 수 있는 방법중 하나는 iframe을 통해 소유 서비스의 일부 컨텐츠를 애드온에서 사용하거나 서비스의 특정 기능을 postmessage를 통해서 애드온과 자사서비스간의 커뮤니케이션 처리를 통해 빠르게 연동할 수 있었습니다. 신규 Addon뿐만 아니라 기존 서비스 하고 있는 서비스들에도 모두 적용되는 부분이라고 하니 Addon개발을 진행중이거나 운영하시는 분들은 아래 내용을 참고해서 개발하시면 좋겠습니다.
( 블로그 내용의 개인적인 추가 의견이나 정보는 인용블록을 사용해서 남겨뒀습니다. )

변경사항

Adobe Express가 Chromium 기반 브라우저에서 교차 출처 격리(cross-origin isolation)를 적용할 예정입니다. 이 변경은 2024년 말부터 시행되며, 브라우저의 보안 규칙이 더욱 엄격해짐에 따라 애드온 기능에 영향을 미칠 수 있습니다.

이는 웹 보안 강화를 위한 필수적인 변화로, 개발자들은 선제적 대응이 필요합니다. 특히 서드파티 서비스를 활용하는 애드온의 경우 더욱 주의가 필요합니다.

영향 범위

적용 대상 브라우저

  • Chrome, Microsoft Edge, Opera 등 Chromium 기반 브라우저
  • Android 디바이스의 모바일 애드온
  • Firefox와 Safari는 영향 없음

현재는 Chromium 기반 브라우저만 해당되지만, 웹 보안 트렌드를 고려할 때 다른 브라우저들도 유사한 정책을 도입할 가능성이 높습니다.

영향 받는 기능

  1. iframe을 통한 콘텐츠 표시
  2. 결제 프로세스
  3. 외부 API fetch 호출
  4. 외부 이미지 로딩

특히 결제 시스템 연동의 경우, 사용자 경험에 직접적인 영향을 미칠 수 있어 우선적인 테스트가 필요합니다.

발생 가능한 오류 유형

1. iframe 로딩 실패

  • "refused to connect" 오류 메시지 표시
  • 중첩된 iframe의 연결 거부

iframe 오류는 사용자에게 가장 명확하게 보이는 문제이므로, 대체 UI 준비가 필요합니다.

2. 이미지 로딩 실패

  • UI에서 이미지 누락
  • 브라우저 개발자 도구의 Network 섹션에서 오류 확인 가능

이미지 로딩 실패에 대비한 폴백(fallback) 이미지나 플레이스홀더 구현을 권장합니다.

3. 네트워크 호출 실패

  • JavaScript 코드로 인한 네트워크 호출 실패
  • 개발자 도구에서 경고 및 오류 메시지 확인

테스트 방법

테스트 대상

  • 외부 콘텐츠 접근 기능
  • 리소스 임베딩
  • 결제 플로우
  • 외부 도메인 자산 표시

테스트 자동화 스크립트 구현을 통해 지속적인 모니터링이 가능합니다.

로컬 테스트

  • 로컬 헤더 오버라이드 적용
  • 개발자 문서의 시뮬레이션 가이드 참조

로컬 개발 환경에서 프로덕션 환경과 동일한 조건을 구성하는 것이 중요합니다. 개발자 문서의 시뮬레이션 가이드는 크롬 개발자도구의 네트워크 - header override기능을 통한 사용을 설명하고 있습니다.

향후 계획

Adobe의 계획

  • 현재 등록된 애드온에 대한 smoke 테스트 진행
  • 문제가 발견된 애드온 개발자에게 연락
  • 새로운 애드온 제출 시 교차 출처 격리 헤더 검토

개발자 대응 방안

  1. 문서 검토 및 로컬 환경 설정
  2. 애드온 테스트 진행
  3. 필요한 수정사항 적용

특히 서드파티 의존성이 높은 애드온의 경우, 대체 구현 방안을 미리 검토하는 것이 좋습니다.

처리방안

위의 공유된 블로그의 내용을 보면 교차출처 리소스에 대한 사용이 필요한 경우 대체방안을 마련해야합니다. 개인적인 경험을 통해 이와 관련된 처리 방안들을 몇가지 소개하려고 합니다.

1. 에셋 로딩 실패 해결

이미지 태그 관련 문제

<!-- crossorigin 속성 설정 -->
<img src="external-image.jpg" crossorigin="anonymous">
// JavaScript에서 crossOrigin 속성 설정
const img = new Image();
img.crossOrigin = "anonymous";
img.src = "external-image.jpg";

이미지 로딩 시 CORS 정책을 준수하기 위해 반드시 crossorigin 속성을 설정해야 합니다. anonymous 값을 사용하면 자격 증명 없이 리소스를 요청합니다.

iframe 및 네트워크 호출 실패 해결

필수 헤더 설정

Cross-Origin-Embedder-Policy: credentialless
Cross-Origin-Resource-Policy: cross-origin

이러한 헤더는 모든 리소스 요청에 적용되어야 하며, 특히 iframe 내부에서 로드되는 모든 자산(리소스)에도 적용되어야 합니다.

서드파티 서비스 관련 해결 방안

일반적인 경우 서드파티 서비스를 사용하고 있을때, 헤더 설정이 자유롭지 못할 확률이 높아 처리가 어려울 수 있습니다. 가장 먼저 아래의 내용을 확인 후 제공되는 방법이 있는지를 확인합니다.

  1. 헤더 오버라이드 확인

    • 서드파티 제공자의 헤더 설정 기능 확인
    • 관리자 패널이나 설정에서 헤더 구성 가능 여부 검토

  2. 서드파티 지원 요청

    • 공식 지원 채널을 통한 헤더 설정 요청
    • 기술 문서 확인 및 개발자 포럼 문의

만약 위의 내용들을 공식적으로 지원하지 않는다면, 해당 서드파티 서비스에 대해서 프록시 서버를 구현해 처리하는 것도 한가지 방법입니다.

  1. 프록시 서버 구현

다만, 프록시 서버 구현 시 고려사항들이 존재하며 아래와 같습니다.
1. 보안: SSL/TLS 인증서 적용, 요청 검증
2. 데이터 무결성: 응답 데이터 정확성 보장
3. 개인정보 보호: 최소한의 데이터만 임시 저장
4. 성능: 캐싱 전략 및 타임아웃 설정
5. 모니터링: 오류 로깅 및 알림 시스템 구축

구현 예시

// 프록시 서버 요청 예시
async function fetchViaProxy(url) {
  try {
    const response = await fetch('/proxy', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ url })
    });
    return await response.json();
  } catch (error) {
    console.error('Proxy request failed:', error);
    throw error;
  }
}

프록시 서버 구현은 마지막 수단으로 고려해야 하며, 보안 및 성능 이슈를 충분히 검토한 후 적용해야 합니다.

마무리

이번 업데이트로 Adobe Express Add-on을 개발하거나 운영하시는 분들께서는 교차출처 정책 강화에 따른 변화를 면밀히 검토하고, 미리 대응 방안을 마련하시는 것이 중요합니다. 변화는 언제나 도전이지만, 이러한 보안 강화는 사용자에게 더욱 안전한 환경을 제공하는 긍정적인 발전이기도 합니다.

궁금한 점이나 도움이 필요하신 부분이 있다면 언제든지 댓글이나 메일을 통해 소통해 주세요. 여러분의 성공적인 애드온 개발을 응원하며, 앞으로도 유익한 정보로 찾아뵙겠습니다. 화이팅!

profile
Irelander_Kai
응용하는걸 좋아하는 개발자:)
이전 포스트

Adobe Express Add-ons 개발 가이드 - 1

다음 포스트

Adobe Express 코드 플레이그라운드 소개

0개의 댓글