#chrome

최근 Chrome 브라우저에서 특정 이미지가 정상적으로 로딩되지 않고 ERR_BLOCKED_BY_ORB 오류가 발생하는 현상을 겪었다. 이 오류는 특히 404 Not Found 상태일 때 브라우저가 이미지를 제대로 표시하지 못하는 경우에 발생한다. 처음에는 img 태그에 onError 속성을 추가하여 이미지가 로드되지 않을 때 기본 이미지를 표시하도록 설정했지만, 여전히 이미지가 나타나지 않는 문제가 있었다. 📌 사용했던 onError 코드 예제 <img src="/assets/profile/1234.jpg" onError="this.src='/default-image.png'"> 이렇게 onError를 활용하면 이미지가 없을 때 기본 이미지를 표시해야 하지만, 크롬 디버그 도구에서 확인해보면 ERR_BLOCKED_BY_ORB 오류가 발생하면서 이 이벤트조차 실행되지 않았다. 즉, Chrome 브라우저가 보안 정책에 의해 HTML 응답을 차단하면서 onError 이벤트도 트리거되지 않는 현상이었다. 이번 글에서는 ERR_BLOCKED_BY_ORB 오류가 발생하는 원인과 해결 과정을 공유한다. 🚨 ERR_BLOCKED_BY_ORB란? ERR_BLOCKED_BY_ORB는 최근에 Chrome의 ORB(Opaque Response Blocking) 정책에 의해 발생하는 오류이다. ORB는 보안상의 이유로 이미지, 스크립트, CSS 파일 등에 대해 기대한 MIME 타입이 아닌 응답을 차단하는 기능이다. 🔍 Chrome의 ORB 정책이란? ORB(Opaque Response Blocking)는 Chrome에서 보안 강화를 위해 도입된 정책으로, 외부 리소스(예: 이미지 요청)에 대해 잘못된 응답을 받으면 브라우저가 차단하는 기능이다. 정상적인 응답: 200 OK + image/png → 정상 표시 잘못된 응답: 404 Not Found + text/html → 브라우저가 차단 즉, 이미지를 요청했지만 서버가 HTML 응답을 반환하면 차단된다. 🔎 문제 발생 원인 처음에 NGINX에서 존재하지 않는 이미지 요청에 대해 기본 404 HTML 페이지를 반환하고 있었다. 📌 발생했던 문제 상황 사용자가 https://mysite.com/assets/profile/1234.jpg 요청 해당 이미지가 존재하지 않음 (404 Not Found) 하지만 NGINX 기본 설정에서는 404.html(HTML 문서)을 반환 Chrome은 이미지 요청에 HTML이 응답된 것을 감지하고 ERR_BLOCKED_BY_ORB 오류 발생 즉, 404 Not Found가 발생했을 때 브라우저가 HTML 페이지를 받으면 보안 정책에 의해 차단되는 현상이 발생했다. 🛠 해결 과정 ✅ 1. 404 상태에서 빈 이미지 반환하도록 설정 이미지가 없는 경우에도 HTML이 아니라 image/png MIME 타입을 유지하면서 404 상태를 유지하도록 설정해야 한다. 첫번째 시도 설정 location ~* \.(png|jpg|jpeg|gif|webp|svg)$ { try_files $uri =404; error_page 404 =200 /EMPTY_FOR_ERROR_BLOCKED_BY_ORB.png; } error_page 404 =200 → 404가 아닌 200 OK로 응답하면서 빈 이미지 제공 하지만 Chrome은 이미지가 아닌 HTML을 받을 수도 있다고 판단하여 차단 즉, =200도 지워줘야만 한다. 🚀 해결된 설정 location ~* \.(png|jpg|jpeg|gif|webp|svg)$ { try_files $uri =404; error_page 404 /EMPTY_FOR_ERROR_BLOCKED_BY_ORB.png; } location = /EMPTY_FOR_ERROR_BLOCKED_BY_ORB.png { root /myweb_dir/assets; default_type image/png; add_header Cache-Control "no-store"; expires -1; try_files $uri =404; } 📌 해결 방법 요약 error_page 404에서 404 상태를 유지하도록 설정 default_type image/png;을 명시하여 브라우저가 올바른 MIME 타입을 인식 add_header Cache-Control "no-store";로 캐싱을 방지 expires -1;로 만료 시간을 즉시로 설정하여 브라우저가 캐싱하지 않도록 함 🔬 최종 테스트 설정 적용 후 아래 명령어로 테스트 진행. curl -I https://mysite.com/assets/profile/1234.jpg ✅ 정상적인 응답 HTTP/2 404 content-type: image/png cache-control: no-store expires: -1 404 상태 코드 유지 MIME 타입이 image/png로 올바르게 반환 브라우저가 더 이상 ERR_BLOCKED_BY_ORB 오류를 발생시키지 않음 💡 결론 🎯 ERR_BLOCKED_BY_ORB 해결을 위한 핵심 포인트 이미지가 존재하지 않을 때 기본 HTML 404 페이지가 반환되지 않도록 해야 함 404 상태에서 이미지 응답을 유지하려면 error_page 404를 빈 PNG로 처리 MIME 타입(image/png)을 명확하게 설정해야 함 캐싱 방지를 위해 Cache-Control: no-store를 추가 이번 설정을 적용한 후, 더 이상 ERR_BLOCKED_BY_ORB 문제가 발생하지 않았다. Chrome 브라우저에서 이미지가 정상적으로 표시되지 않는다면, 서버가 404 응답을 올바르게 처리하고 있는지 확인하는 것이 중요하다! 🚀 이제 404 이미지 요청이 Chrome에서 차단되지 않고, 올바르게 빈 이미지로 응답된다. 비슷한 문제를 겪는 분들은 위 해결 방법을 적용해보길 바란다. 😊

크롬 114 버전부터 popover API 라는걸 지원하게 되었습니다. Popover API는 웹 개발자가 웹 페이지에 popover 위젯을 추가할 수 있도록 하는 Web API입니다. popover는 사용자가 웹 요소에 마우스를 가져갈 때 나타나는 작은 텍스트 콘텐츠 블록입니다. Popover API를 사용하면 popover의 위치, 크기 및 콘텐츠를 제어할 수 있습니다. 그런데 문제는 기존 라이브러리 소스들 중에 popover라는 태그 속성을 쓰는 라이브러리들과 이름이 충돌하는 바람에 UI가 깨지는 현상들이 발생하고 있습니다. 아래 이슈들을 보면 해당 문제들을 보실 수 있습니다. https://support.google.com/chrome/thread/218644651/bug-after-updating-google-chrome-to-version-114-0-5735-90?hl=en https://github.com/flaming-cl/editorjs-text-color-plugin/issues/21 이 문제를 해결하려면, 사이트에서 공통으로 사용하는 css에 아래와 같은 코드를 추가해주어야 합니다. [popover] { display: initial; position: initial; margin: initial; border: initial; background: initial; padding: initial; width: initial; height: initial; overflow: initial; inset: initial; color: initial; }

Beyond Console.log() – Level up Your Debugging Skills — SitePoint console.log() is a great tool, but your browser's developer tools can do so much more. Learn how to take your coding and debugging to the next level. www.sitepoint.com 말 그대로 console.log()를 200% 활용하는 방법들!!   중괄호 쓰기 중괄호를 쓰면 변수 이름을 같이 출력할 수 있음 let x = 2; console.log(x) // 2 console.log({x}) // {x: 2}   로그 포맷 사용 가능 %s: logs as strings %i or %d: logs as integers %f: logs as floating-point value %o: logs as an expandable DOM element %O: logs as an expandable JavaScript object console.log('%ix %s developer', 10, 'console'); // 10x console developer console.log('%i', 12.34455241234324234); // 12 console.log('%cPay attention to me','color:firebrick;font-size:40px')   그룹으로 출력할 수도 있어요 console.group()을 사용하면 그룹 출력도 가능~!! const label = 'The Millenium Falcon Crew'; console.group(label); console.log('Leia'); console.log('Han'); console.log('Chewie'); console.log('Ben'); console.groupEnd(label);   에러 종류별로 필터 가능 console.log(), console.info(), console.error(), console.warn() 으로 나눠서 출력하면 디버거에서 종류별로 나눠서 볼 수 있음   출력된 횟수도 같이 출력하고 싶다! 횟수도 같이 출력하고 싶을 땐 console.count()를 씀. console.count('Chocula'); // Chocula: 1 console.count(); // default: 1 console.count('Chocula'); // Chocula: 2 console.countReset('Chocula'); console.count(); // default: 2 console.count(); // default: 3 console.count('Chocula'); // Chocula: 1   어떤 스크립트가 실행된 시간을 측정하고 싶다! 실행된 시간을 측정할 때는 console.time()과 console.timeEnd()를 쓰면 됨. console.time('go'); for(let i = 0; i < 200000; i+=1) { let x = Math.random()*2000; } console.timeEnd('go'); // go: 11.7861328125 ms