Chrome에서 ERR_BLOCKED_BY_ORB 이미지 차단 문제와 해결 과정

10일 전

최근 Chrome 브라우저에서 특정 이미지가 정상적으로 로딩되지 않고 `ERR_BLOCKED_BY_ORB` 오류가 발생하는 현상을 겪었다.
이 오류는 특히 **404 Not Found 상태일 때** 브라우저가 이미지를 제대로 표시하지 못하는 경우에 발생한다.
처음에는 `img` 태그에 `onError` 속성을 추가하여 이미지가 로드되지 않을 때 기본 이미지를 표시하도록 설정했지만, 여전히 이미지가 나타나지 않는 문제가 있었다.

### **📌 사용했던 `onError` 코드 예제**

```html
<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 페이지를 반환**하고 있었다.

### **📌 발생했던 문제 상황**

1. 사용자가 `https://mysite.com/assets/profile/1234.jpg` 요청
2. 해당 이미지가 존재하지 않음 (`404 Not Found`)
3. 하지만 NGINX 기본 설정에서는 `404.html`(HTML 문서)을 반환
4. **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;
}
```

### **📌 해결 방법 요약**

1. `error_page 404`에서 404 상태를 유지하도록 설정
2. `default_type image/png;`을 명시하여 브라우저가 올바른 MIME 타입을 인식
3. `add_header Cache-Control "no-store";`로 캐싱을 방지
4. `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` 해결을 위한 핵심 포인트**

1. **이미지가 존재하지 않을 때 기본 HTML 404 페이지가 반환되지 않도록 해야 함**
2. **404 상태에서 이미지 응답을 유지하려면 `error_page 404`를 빈 PNG로 처리**
3. **MIME 타입(`image/png`)을 명확하게 설정해야 함**
4. **캐싱 방지를 위해 `Cache-Control: no-store`를 추가**

이번 설정을 적용한 후, 더 이상 `ERR_BLOCKED_BY_ORB` 문제가 발생하지 않았다.
Chrome 브라우저에서 이미지가 정상적으로 표시되지 않는다면,
**서버가 404 응답을 올바르게 처리하고 있는지 확인하는 것이 중요하다!** 🚀

***

이제 **404 이미지 요청이 Chrome에서 차단되지 않고, 올바르게 빈 이미지로 응답**된다.
비슷한 문제를 겪는 분들은 위 해결 방법을 적용해보길 바란다. 😊

184

픽셀노마드

10일 전

댓글 0

답변 작성

이미지 첨부

아직 댓글이 없습니다. 첫번째 댓글 작성자가 되어주세요 :)