안전교육 동영상 우회를 위한 준비 <script> 동적 loading/ callback / Javascript Observer 무력화

videojs를 loading하면서 video에 대한 configuration을 하는 예제

 

// 비디오 요소 선택
const video = document.querySelector('video');

// 스크립트 요소 생성
const script = document.createElement('script');
script.src = 'https://vjs.zencdn.net/8.20.0/video.min.js';
script.onload = function() {
    console.log('Video.js가 성공적으로 로드되었습니다.');

    // 선택한 비디오 요소로 Video.js 초기화
    const player = videojs(video, {
        controls: true,
        autoplay: false,
        preload: 'auto'
    });

    // 비디오 재생
    player.play();
};

// 스크립트를 head에 추가
document.head.appendChild(script);

 

 

문제 상황) video tag에 대하여 여러가지 속성을 조정하고 싶은데 이것을 막는 코드가 있는 것 같다. 이 막는 코드를 무력화 하고 싶다. 현상은 속성을 조정하면 alert창이 뜨면서 수정할 수 없다고 알림

 

1. JavaScript 디버깅을 통한 코드 분석

• DevTools를 사용
  • 브라우저의 개발자 도구(DevTools)를 열고, Sources 탭에서 관련 JavaScript 코드를 확인
  • 해당 alert를 발생시키는 코드를 찾아 중단점을 설정하거나 코드를 수정
• breakpoint 설정
  • debugger 명령어를 사용하거나 속성 조작 시 이벤트가 발생하는 함수에 중단점을 설정해 실행 흐름을 분석.

2. MutationObserver 우회

• MutationObserver를 제거하거나 무력화

const observers = [];
const originalObserver = window.MutationObserver;
window.MutationObserver = function(callback) {
    const observer = new originalObserver(callback);
    observers.push(observer);
    return observer;
};

// 기존 MutationObserver를 모두 중지
observers.forEach(observer => observer.disconnect());

 

3. 속성 변경 제한 우회

• alert을 발생시키는 이벤트 핸들러를 제거

const videoElement = document.querySelector('video');
// 모든 이벤트 핸들러 제거
const clone = videoElement.cloneNode(true);
videoElement.parentNode.replaceChild(clone, videoElement);

// 속성 변경
clone.setAttribute('controls', 'true');
clone.setAttribute('autoplay', 'true');

 

또는, addEventListener로 추가된 핸들러를 제거

const video = document.querySelector('video');
const clone = video.cloneNode(true);
video.replaceWith(clone);
clone.setAttribute('muted', 'true');

 

 

4. alert 중단

• 전역적으로 alert 함수를 무효화: (사실 이건 해결책은 아닌데, 알면 좋을 듯)

window.alert = function() { console.log('Alert blocked'); };

 

 

5. Tampermonkey나 Userscript 사용

사용자 스크립트를 통해 페이지 로드 시 실행되는 JavaScript를 무효화하거나 재정의

// ==UserScript==
// @name         Video Attribute Modifier
// @version      1.0
// @match        *://*/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    const video = document.querySelector('video');
    if (video) {
        video.setAttribute('controls', 'true');
        video.setAttribute('autoplay', 'true');
    }
})();