CORS 우회 하기

iframe 으로 구글이나 네이버 검색결과를 보여주려고 하면 CORS 에러가 난다.

Response Header 의  x-frame-options 를 변경해 무력화(?) 할 수 있다.

 

Manifest V3

manifest.json

{
    "declarative_net_request": {
        "rule_resources": [
            {
                "id": "ruleset_1",
                "enabled": true,
                "path": "rules.json"
            }
        ]
    },
    "permissions": [
        "declarativeNetRequest"
    ],
    "host_permissions": [
        "*://*.google.com/*",
        "*://*.naver.com/*"
    ],
    "manifest_version": 3
}

참고: https://developer.chrome.com/docs/extensions/reference/declarativeNetRequest/

 

 

rules.json

[
  {
    "id": 1,
    "priority": 1,
    "action": {
      "type": "modifyHeaders",
      "responseHeaders": [
        { "header": "x-frame-options", "operation": "remove" },
        { "header": "X-FRAME-OPTIONS", "operation": "remove" }
      ]
    },
    "condition": { "urlFilter": "search.naver.com", "resourceTypes": ["sub_frame", "image"] }
  },
  {
    "id": 2,
    "priority": 1,
    "action": {
      "type": "modifyHeaders",
      "responseHeaders": [
        { "header": "x-frame-options", "operation": "remove" },
        { "header": "X-FRAME-OPTIONS", "operation": "remove" }
      ]
    },
    "condition": { "urlFilter": "www.google.com", "resourceTypes": ["sub_frame", "image"] }
  }
]

 

Manifest V2 

background.js 

chrome.webRequest.onHeadersReceived.addListener(
  function (details) {
    return {
      responseHeaders: details
        .responseHeaders
        .filter(header => header.name.toLowerCase() !== 'x-frame-options')
    }
  },
  {
    urls: ["<all_urls>"],
    types: ['sub_frame']
  },
  ["blocking", "responseHeaders", "extraHeaders"]
);