Iframe 태그로 웹뷰 호출시 User-Agent 변경 ( 크롬 익스텐션 )

 

이번에 회사에서 Iframe 태그에 웹뷰를 띄워야하는 상황이 발생했다.

그냥 

 

<iframe src="주소" />

 

이렇게만 하면 보통 되니까 이렇게 바로 적용해보았는데

 

하필 iframe 으로 띄워야하는 웹뷰가 모바일기기에서만 동작하는 주소였다.

 

m.*.com 이런 형식의 주소였는데 iframe src 속성에 바로 넣으니,

실제 저 주소로 요청하는 기기가 PC 이다 보니까 m. 이 빠진 *.com 과 같이 피씨 전용 웹으로 리다이렉트 되었다.

 

네트워크 창을 열어 확인을 해보니

해당 값이 Mac OS 여서 그런 것이였다.

 

해당 값을 바꿔서 요청을 할 수 있는지 구글링을 많이 해보았지만, 현재 브라우저들에서는 UserAgent 값을 바꾸는 것이 불가능해보였다.

 

그렇게 찾던 중 크롬 익스텐션을 이용하여 해당값을 바꿀수 있다는 것을 찾게 되었고,

마침 회사에서 서비스중인 익스텐션이 있었기에 해당 익스텐션에 기능을 추가하는 방식으로 업무를 마무리하였다.

 

크롬 익스텐션에 declarativeNetRequest 권한을 통해 설정할 수 있었다.

declarativeNetRequest 는 선언 규칙을 지정하여 네트워크 요청을 차단하거나 수정하는 데 사용된다고 공식 문서에 적혀있다.

자세한건 https://developer.chrome.com/docs/extensions/reference/declarativeNetRequest/ 여기서 볼 수있다.

 

background.js 에 아래와 같이 코드를 작성하면 iframe 요청에 대해서 User-Agent 값을 변경할 수 있다.

 

const rules = {
  removeRuleIds: [1],
  addRules: [
    {
      id: 1,
      priority: 1,
      action: {
        type: "modifyHeaders",
        requestHeaders: [
          {
            header: "User-Agent",
            operation: "set",
            value:
              "바꿀User-Agent 값",
          },
        ],
      },
      condition: {
        resourceTypes: ["sub_frame", "script"],
      },
    },
  ],
};

chrome.declarativeNetRequest.updateDynamicRules(rules);