kkurdupov
8월 20, 2020, 8:48오전
1
안녕하세요 여러분! 버그를 보고하고자 합니다.
사전 준비
비디오/오디오 업로드가 포함된 게시물을 생성합니다.
보안 미디어 업로드로 테스트했지만, 비보안 미디어에서도 재현되어야 합니다.
게시물을 편집하기 시작합니다.
브라우저 개발자 콘솔을 엽니다. 선택적으로 업로드 API 필터를 설정할 수 있습니다.
모든 요청이 완료될 때까지 기다린 후 콘솔을 지웁니다.
재현 방법
왼쪽(편집) 영역에 아무거나 입력합니다.
브라우저 개발자 콘솔을 확인합니다.
실제 결과
모든 키 입력이 변경 사항으로 간주되어, 단순히 타이핑하는 것만으로도 비디오 업로드 이벤트가 지속적으로 생성됩니다.
많은 변경 사항은 대량의 요청을 전송하게 하여, API Rate Limit으로 인해 요청이 거부 되고 포럼에서 자동으로 로그아웃 됩니다.
기대되는 결과
게시물 편집 중 에는 오디오/비디오 업로드 요청이 발생하지 않아야 합니다.
gif를 확인해 주세요:
버그 관련 참고 사항:
이 라인 이 버그를 유발합니다. 이 코드는 미리보기 렌더링 시마다, 즉 게시물이 변경될 때마다 <video>/<audio> DOM 요소의 load 함수를 호출합니다.
3개의 좋아요
kkurdupov
8월 20, 2020, 4:25오후
3
네, 2.6beta뿐 아니라 test-passed 브랜치의 최신 커밋(208d85aaff0392a3a796f84ea78670def6ed7b8e)에서도 여전히 존재합니다.
simon
8월 20, 2020, 5:41오후
4
이것은 이상하네요. 웹 인스펙터의 네트워크 탭에서 “캐시 비활성화” 체크박스를 선택할 때만 문제를 재현할 수 있습니다. "캐시 비활성화"를 선택 해제하면 예상되는 결과가 나옵니다. 저는 Ubuntu에서 Chrome을 사용 중입니다. 귀하의 영상에서는 "캐시 비활성화"가 선택되어 있지 않은 것으로 보이는데, 무엇이 차이를 일으키고 있는지 정확히 알 수 없습니다.
1개의 좋아요
kkurdupov
8월 21, 2020, 2:30오전
5
“캐시 비활성화”는 요청 전송에 영향을 주어서는 안 됩니다. 이 옵션은 요청의 결과가 어디서 가져와지는지를 결정합니다. 즉, 브라우저 캐시에서 가져올지, 아니면 실제 소스에서 가져올지를 결정하는 것입니다.
해당 업로드 요청은 각 키 입력마다 미리보기가 다시 렌더링되는 코드에 의해 전송됩니다. 이로 인해 새로운 비디오/오디오 DOM 요소가 생성됩니다. 따라서 load 는 새로운 DOM 요소에 대해 호출되며, 이는 반드시 요청을 전송해야 합니다.
만약 DOM 요소가 캐시된 것(매번 새로 생성되지 않는 것)이라면, “캐시 비활성화” 설정과 관계없이 요청은 단 한 번만 전송됩니다.
martin
8월 24, 2020, 2:07오전
8
이 문제를 확인해 보았고, 보안이 적용된 업로드와 그렇지 않은 업로드 모두에서 일부 재현할 수 있었습니다. 특정 시점에 캐싱이 이루어져 이러한 요청이 더 이상 반복되지 않는 것처럼 보이지만, 여전히 문제가 남아 있습니다.
말씀하신 해당 줄:
retrieveCachedUrl(upload, siteSettings, "orig-src", opts, url => {
if (url.startsWith(`//${window.location.host}`)) {
let hostRegex = new RegExp("//" + window.location.host, "g");
url = url.replace(hostRegex, "");
}
upload.src = url;
// this is necessary, otherwise because of the src change the
// video/audio just doesn't bother loading!
upload.parentElement.load();
// set the url and text for the <a> tag within the <video/audio> tag
const link = upload.parentElement.querySelector("a");
if (link) {
link.href = url;
link.textContent = url;
}
});
break;
은 제가 추가한 것이지만, 현재 실제로 아무 영향도 미치지 않는 것 같습니다. 이 줄을 제거해도 비디오 미리보기가 정상적으로 작동합니다. 비디오 썸네일 등에 대한 다른 작업을 진행했는데, 아마도 제가 이 줄을 추가했던 원래 문제를 이미 해결했을 가능성이 높습니다. 따라서 이 줄을 제거하여 여러 요청이 발생하는 문제를 해결하겠습니다.
3개의 좋아요
martin
8월 24, 2020, 3:18오전
9
4개의 좋아요
