Shopify 임베디드 앱에서 "frame-ancestors directive"오류 수정

11225 단어 ecommerceshopifynodewebdev
Shopify 앱 구축은 복잡할 수 있으며 프로세스 중에 많은 문제에 직면할 수 있습니다. 인증 흐름 이해에서 다양한 API 사용 및 웹후크 처리까지.

Shopify 앱을 구축할 때 앱이 포함된 앱이 되도록 할지 여부를 선택할 수 있습니다.
  • 포함 가능한 앱 - 판매자가 Shopify 관리자 또는 Shopify POS 내에서 앱에 액세스하고 상호 작용하도록 허용할 수 있습니다.
  • 포함할 수 없는 앱 - 판매자가 앱을 설치한 다음 Shopify 외부에서 앱의 호스팅 페이지로 리디렉션됩니다.

    • Shopify용 임베디드 앱을 구축하기로 결정한 경우 앱이 안전하고 Shopify의 보안 정책 및 표준을 충족하는지 확인해야 합니다.

    Shopify에서 처리해야 하는 가장 일반적인 콘텐츠 보안 정책 중 하나는 frame-ancestors입니다. 이 정책은 iframe, 프레임, 개체, 포함 및 애플릿 요소를 사용하여 포함되는 리소스를 허용하거나 허용하지 않도록 브라우저에 지시합니다.

    많은 개발자들이 임베디드 앱과 관련된 문제에 직면하고 있고 다양한 커뮤니티에서 해결책을 찾고 있는 것을 보고 이에 대해 글을 쓰기로 했습니다.

    다음은 Shopify 임베디드 앱의 상위 4개frame-ancestors 오류와 이를 수정하는 방법입니다.

    1. 'content-security-policy' 헤더는 frame-ancestors https://[shop].myshopify.com https://admin.shopify.com 을 설정해야 합니다. 여기서 [shop]은 앱이 포함된 상점 도메인입니다. .



    Shopify에 앱을 제출하면 검토 팀에 전달되기 전에 거부될 수 있습니다. Shopify에는 앱을 제출할 때 실행되는 일련의 자동화가 있습니다. 위의 거부를 받았다면 Content-Security-Policy: frame-ancestors <source>; 헤더를 설정하지 않았음을 의미합니다.

    이를 수정하려면 프레임 요청의 응답에 frame-ancestors 헤더를 추가해야 합니다.

    // A middleware for setting up the header
router.use((req, res) => {
  const shop = req.query.shop;
  if (shop) {
    // Set the `frame-ancestors` header on the response
    res.setHeader(
      'Content-Security-Policy',
      `frame-ancestors https://${shop} https://admin.shopify.com;`
    );
  }
});

router.get('/app', (req, res) => {
  // Send a file, or redirect to your app's frame
  res.sendFile(path.join(__dirname, '../public', 'index.html'));
});


    참고: frame-ancestors 헤더는 상점마다 달라야 합니다.

    2. "child-src 'self' https://* shopify-pos://*" 콘텐츠 보안 정책 지침을 위반했기 때문에 '{URL}' 프레임을 거부했습니다. 'frame-src'가 명시적으로 설정되지 않았으므로 'child-src'가 폴백으로 사용됩니다.



    이 오류는 보안되지 않은 URL을 로드하려고 하기 때문에 발생할 수 있습니다. 사용 중인 앱 URL이 HTTPS 프로토콜이 아니라 HTTP 프로토콜 아래에 있는지 확인하십시오.

    로컬에서 실행 중인 경우( localhost ) ngrok 또는 localtunnel 와 같은 터널 서비스를 사용할 수 있습니다.

    3. Safari에서: [오류] https://XXXX.myshopify.com/admin/auth/login이 콘텐츠 보안 정책의 frame-ancestors 지시문에 나타나지 않기 때문에 로드를 거부했습니다.



    Safari는 Chrome이나 Firefox보다 엄격한 브라우저입니다. 초기 앱 URL이 로드된 후 사용자를 다른 URL로 리디렉션하려고 하면 이 오류가 나타날 수 있습니다.

    이 문제를 해결하려면 서버 대신 클라이언트에서 리디렉션을 만들어야 합니다. 방법은 다음과 같습니다.

    function generateRedirectHtml(redirectUrl) {
  return `
  <!DOCTYPE html>
  <html>
    <head>
      <title>Redirecting, please wait...</title>
      <script>
        setTimeout(()=>{
          window.top.location="${redirectUrl}";
        }, 3000);
      </script>
    </head>
    <body>
        Redirecting...
    </body>
  </html>
  `;
}

router.use((req, res) => {
  const redirectUrl = 'YOUR_REDIRECT_URL';
  const userAgent = req.headers['user-agent']
    ? req.headers['user-agent'].toLowerCase()
    : '';

  // For Safari, use client redirect
  if (
    userAgent.includes('shopify') ||
    (userAgent.includes('safari') &&
      !userAgent.includes('chrome') &&
      !userAgent.includes('firefox'))
  ) {
    res.send(generateRedirectHtml(redirectUrl));
    return;
  }

  // For other browsers, use redirect header
  res.redirect(redirectUrl);
});


    4. 'X-Frame-Options'를 'deny'로 설정했기 때문에 프레임에 '{URL}' 표시를 거부했습니다.



    이 오류는 사용자를 앱의 체크아웃 페이지로 리디렉션하려고 할 때나 앱이 처음 로드될 때 나타날 수 있습니다.

    가장 먼저 해야 할 일은 앱에 대해 앱 URL이 올바르게 구성되었는지 확인하는 것입니다.



    다음으로 서버에서 리디렉션을 시도하는 경우 리디렉션 URL을 얻기 위해 서버에 대신 요청을 시도하고 클라이언트에서 실제 리디렉션을 만듭니다. 예를 들어

    async function getRedirectUrl() {
  const result = await (await fetch('/getRedirectUrl')).text();
  window.location.href = result;
}

<button onClick={getRedirectUrl}>Click Me</button>


    이 게시물이 Shopify에서 오류frame-ancestors를 수정하는 데 더 많은 시간을 소비하지 않는 데 도움이 되기를 바랍니다. 그렇지 않은 경우 또는 본 다른 오류가 있는 경우 댓글을 남겨주시면 블로그 게시물을 업데이트하겠습니다.

    또한 Common Ninja Developer Platform에 익숙하지 않은 경우 Shopify와 통합하고 당사 플랫폼을 사용하여 이러한 종류의 오류를 처리하는 데 소요되는 시간을 줄일 수 있다는 점을 언급하는 것이 좋습니다.

    ❓ 일반 닌자란?



    Common Ninja은 개발자가 전자 상거래 플랫폼용 앱을 매우 쉽게 구축하고 수익을 창출할 수 있도록 도와주는 플랫폼입니다. 단일 전자 상거래 API를 사용하면 앱을 한 번 구축하고 Shopify, BigCommerce, Wix, WooCommerce 등과 같은 여러 플랫폼과 통합할 수 있습니다. 앱을 다시 빌드하고 모든 플랫폼에서 개별적으로 작동하도록 할 필요가 없습니다.

    또한 Common Ninja는 개발자가 개발 프로세스를 향상하고 결제 및 스토리지 솔루션을 제공하는 데 도움이 되는 일련의 API 및 도구를 제공합니다.

    📚 더 알아보기



    Common Ninja 또는 API를 사용하여 첫 번째 앱을 빌드하는 방법에 익숙하지 않은 경우 여기에 대해 작성한 이전 문서가 있습니다.

    또한 다음 리소스를 사용하여 자세히 알아보고 도움을 받을 수 있습니다.

    📜 Common Ninja Docs
    💬 Discord Community
    CDK로 Athena 저장된 쿼리를 생성하는 방법의 예
    초보자를 위한 편리한 MATLAB 팁: 구문, 변수 이름 등

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage