Apr 9, 2024

망가진 QR코드를 고치기

문제

구글 차트 API를 써서 QR코드를 그리는 웹사이트가 있는데, 어느날 갑자기 해당 API가 구글해버려서 더이상 제공되지 않는 상황. 당신은 꼭 QR 코드를 그리고 싶었다. 어떻게 하면 좋을까?

설계

해당 이미지 제공 API를 가로채서 내가 원하는 그림을 그리면 되지 않을까?

구현

playwright님께서 수고해주셨습니다.

#%%
from urllib.parse import urlparse, parse_qs
import qrcode
import qrcode.image.svg
from playwright.async_api import Page, expect, async_playwright

factory = qrcode.image.svg.SvgImage
img_type = 'image/svg+xml'
p = await async_playwright().start()
browser = await p.chromium.launch(headless=False)
page = await browser.new_page()

#%%
async def handle_route(route, request):
    obj = parse_qs(urlparse(request.url).query)
    img = qrcode.make(obj['chl'][0], image_factory=factory)
    blob: bytes = img.to_string()
    await route.fulfill(body = blob, content_type = img_type, headers = {
        'access-control-allow-origin': '*'
    })
await page.route("https://chart.googleapis.com/*", handle_route)

#%%
await page.goto("https://target.website.com")

설명(대충 GPT-4로 만들어낸 설명입니다)

이 코드는 Playwright를 사용하여 특정 웹 페이지에서 QR 코드 이미지 요청을 가로채고, 해당 요청을 사용자 정의 QR 코드 이미지로 대체하는 과정을 설명합니다. Python 언어로 작성되었습니다.

라이브러리 임포트: urllib.parse에서 urlparse와 parse_qs를, qrcode와 qrcode.image.svg를, 그리고 playwright.async_api에서 Page, expect, async_playwright를 임포트합니다. 이들은 URL 파싱, QR 코드 생성, 그리고 비동기 웹 자동화에 필요합니다.
QR 코드 설정: SvgImage 팩토리를 사용하여 SVG 형식의 QR 코드 이미지를 생성하도록 설정합니다. img_type은 생성될 이미지의 MIME 타입을 지정합니다.
Playwright 세션 시작: 비동기 Playwright 세션을 시작하고, Chromium 브라우저 인스턴스를 헤드리스 모드가 아닌 상태로 실행합니다. 그 후 새 페이지를 엽니다.
요청 가로채기 함수: handle_route 함수는 가로채야 할 요청을 처리합니다. 요청 URL에서 쿼리 문자열을 파싱하여 QR 코드 데이터를 추출하고, qrcode 라이브러리를 사용해 해당 데이터로 QR 코드를 생성합니다. 생성된 QR 코드는 SVG 이미지로 변환되어 응답 본문으로 설정됩니다. 이 함수는 CORS(Cross-Origin Resource Sharing) 문제를 방지하기 위해 access-control-allow-origin 헤더도 포함하여 응답합니다.
요청 라우팅 설정: page.route를 사용하여 특정 패턴의 URL(https://chart.googleapis.com/*)에 대한 요청을 handle_route 함수로 리디렉션합니다. 이는 구글 차트 API로의 모든 요청을 가로채 사용자 정의 QR 코드로 대체하겠다는 의미입니다.
타겟 웹사이트 방문: 마지막으로, Playwright를 사용하여 타겟 웹사이트(https://target.website.com)로 이동합니다. 이 페이지에서 발생하는 구글 차트 API 요청은 앞서 설정한 라우팅 규칙에 의해 가로채지고, 사용자 정의 QR 코드로 대체됩니다.

이 코드는 웹사이트에서 제공되지 않는 리소스(예: 망가진 QR 코드 API)를 사용자가 제어하는 리소스로 교체하는 방법을 보여줍니다. Playwright의 요청 가로채기 기능을 활용하여, 실제 웹 페이지 요청을 가로채고 사용자 정의 응답으로 대체하는 과정을 구현합니다.

설명(다시 작성해봤습니다)

망가진 구글 API로 요청하는 걸 중간에 가로채서, 요청값을 가지고 QR코드를 쓱싹 만들어내고, 정상적으로 요청을 처리한 것처럼 다시 되돌려줌. QR코드 요청 파라미터나, CORS 헤더같은건 하드코딩 하드코딩.

결론

오늘도 해치웠다