#ERR_BLOCKED_BY_ORB

최근 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에서 차단되지 않고, 올바르게 빈 이미지로 응답된다. 비슷한 문제를 겪는 분들은 위 해결 방법을 적용해보길 바란다. 😊