Page Rewriting

이 예제에서는 Edge Cloud Apps 함수를 사용하여 동적 콘텐츠 적응을 구현하는 방법을 보여줍니다. 아래 코드 스니펫은 방문자의 브라우저 유형에 따라 페이지 콘텐츠를 동적으로 재작성하는 방법을 보여줍니다. 사용자가 Chrome을 사용하여 페이지에 액세스하는 경우 콘텐츠가 재작성되고, 그렇지 않으면 원래 콘텐츠가 변경되지 않고 유지됩니다.

코드 예제

async function handleRequest(request) {
    // 원래 요청을 가져와서 응답을 검색합니다.
    let response = await fetch(request);
    // 사용자 지정 응답 헤더를 설정합니다.
    response.headers.set("X-Version", "petshop-v1");

    // 요청이 Chrome 브라우저에서 온 것이고 응답 콘텐츠 유형이 HTML인지 확인합니다.
    if (isFromChrome(request) && isHtml(response)) {
        console.log("페이지 콘텐츠를 재작성하는 중...");

        // 응답 본문 텍스트를 검색하고 대체를 수행합니다.
        let body = await response.text();
        body = body.replace('Make Your Pets Happy');
        body = body.replace(
            'Dolore tempor clita lorem rebum kasd eirmod dolore diam eos kasd.',
        );

        // 수정된 응답을 반환합니다.
        return new Response(body, response);
    } else {
        console.log("원래 페이지 콘텐츠를 통과하는 중...");
        return response;
    }
}

// 요청이 Chrome 브라우저에서 시작되었는지 확인합니다.
function isFromChrome(request) {
    let userAgent = request.headers.get("User-Agent");
    return userAgent && userAgent.toLowerCase().includes("chrome");
}

// 응답 콘텐츠 유형이 HTML인지 확인합니다.
function isHtml(response) {
    let contentType = response.headers.get("Content-Type");
    return contentType && contentType.toLowerCase().includes("text/html");
}

// 들어오는 요청을 처리하기 위해 Fetch 이벤트 리스너를 추가합니다.
addEventListener("fetch", event => {
    event.respondWith(handleRequest(event.request));
});

참고 사항

이 예제에서는 사용자의 브라우저 유형을 감지하고 그에 따라 HTML 콘텐츠를 수정하여 동적 콘텐츠 적응을 구현하는 방법을 보여줍니다. 콘텐츠 재작성에는 수많은 애플리케이션이 있으며, 다음은 몇 가지 성숙한 온라인 시나리오입니다.

• 욕설 필터링: 페이지 콘텐츠에서 욕설을 자동으로 감지하고 대체합니다.
• 외부 링크 재작성: 페이지에서 외부 링크의 주소를 동적으로 수정합니다.
• 웹사이트 전체 IPv6 지원: 방문자의 IP 유형에 맞춰진 콘텐츠를 제공합니다.