ポケモンシールホルダーキャンペーン用の工作

modify.py

from mitmproxy import http

SCRIPT = '''
<script>
const constraints = {
  audio: false,
  video: {
    width: 150,
    height: 300,
    facingMode: "environment"
  }
};

window.onload = () => {
  var worker;
  (async () => {
    worker = Tesseract.createWorker();
    await worker.load();
    await worker.loadLanguage('eng');
    await worker.initialize('eng');
    await worker.setParameters({
      tessedit_char_whitelist: '0123456789',
    });
    console.debug("worker ready");
    setInterval(captureCamera, 500)
  })();

  const findOrCreateVideoTag = () => {
    var video = document.querySelector('video')
    if(!video) {
      video = document.createElement('video');
      video.setAttribute("controls","");
      video.setAttribute("autoplay","");
      video.setAttribute("playsinline","");
      video.setAttribute("style", "display: none");
      document.body.appendChild(video)
    }
    return video;
  }

  const findOrCreateCaptureCanvas = () => {
    var capture_canvas = document.getElementById('capture_canvas')
    if(!capture_canvas) {
      capture_canvas = document.createElement('canvas');
      capture_canvas.width = 300;
      capture_canvas.height = 150;
      capture_canvas.id = 'capture_canvas';
    }
    return capture_canvas;
  }

  const updateVideoCanvas = () => {
    requestAnimationFrame(updateVideoCanvas);

    const video = document.querySelector('video')
    if(!video){ return; }
    const video_canvas = document.getElementById('video_canvas')
    if(!video_canvas){ return; }
    
    const context = video_canvas.getContext('2d');
    context.drawImage(video, 0, 0, video_canvas.width, video_canvas.height);
    context.strokeRect(110, 55, 80, 40);
  }

  const startCamera = (e) => {
    const capture_canvas = document.getElementById('capture_canvas')
    if(capture_canvas) { capture_canvas.remove() }

    const video = findOrCreateVideoTag()

    const video_canvas = document.createElement('canvas')
    video_canvas.width = 300;
    video_canvas.height = 150;
    video_canvas.id = 'video_canvas';
    e.target.parentNode.insertBefore(video_canvas, e.target);
     
    const handleSuccess = (stream) => {
      video.srcObject = stream;
    };
    navigator.mediaDevices.getUserMedia(constraints).then(handleSuccess);

    e.target.removeEventListener('click', startCamera);
  };

  const captureCamera = () => {
    const video = document.querySelector('video')
    if(!video){ return; }
    const video_canvas = document.getElementById('video_canvas')
    if(!video_canvas){ return; }

    console.debug("trying capture")

    const parentNode = video_canvas.parentNode;

    const capture_canvas = findOrCreateCaptureCanvas()
    const context = capture_canvas.getContext('2d');
    context.drawImage(video, 110, 55, 80, 40, 0, 0, capture_canvas.width, capture_canvas.height);
    const url = capture_canvas.toDataURL("image/png");

    (async () => {
      const { data: { text } } = await worker.recognize(url);

      const regex = /(?<serial_no_1>[0-9]{7})\\n(?<serial_no_2>[0-9]{7})/;
      const result = text.match(regex);

      if(result && result['groups']){
        parentNode.querySelector("input[name='regist_serial_no_1[]']").value = result.groups.serial_no_1
        parentNode.querySelector("input[name='regist_serial_no_2[]']").value = result.groups.serial_no_2

        parentNode.insertBefore(capture_canvas, video_canvas);
        video_canvas.remove();
        parentNode.querySelector('.camera_button').addEventListener('click', startCamera);
    }
    })();
  }

  document.querySelectorAll(".body.form_serial_no2").forEach((element) => {
    element.innerHTML = element.innerHTML + '<input type=button class="camera_button" value="camera capture" style="width: 300px; height: 40px;" />'
  });
  document.querySelectorAll(".camera_button").forEach((button_element) => {
    button_element.addEventListener('click', startCamera);
  });

  requestAnimationFrame(updateVideoCanvas);
}
</script>
'''

def response(flow: http.HTTPFlow):
    if(flow.request.path == '/regist/regist_serial_input.php'):
        flow.response.content = flow.response.content.replace(b'</head>', b"<!-- v2 --><script src='https://unpkg.com/tesseract.js@v2.1.0/dist/tesseract.min.js'></script></head>")
        flow.response.content = flow.response.content.replace(b'</body>', (SCRIPT + '</body>').encode())
        print(flow.response.content)