요청 헤더 수정
나가는 요청에 사용자 지정 동작이나 인증을 적용할 수 있도록 HTTP 요청 헤더를 수정하는 규칙을 구현합니다.
요청 헤더 수정은(는) CoddyKit의 무료 Browser Extensions Development (Chrome & Edge) 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Browser Extensions Development (Chrome & Edge) 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Browser Extensions Development (Chrome & Edge) 강의에는 총 4개의 강의가 포함되어 있습니다.
이 강의의 일부는 아직 번역되지 않았으며 영어로 표시됩니다.
What are Request Headers?
When your browser talks to a website, it sends messages called HTTP requests. These requests carry extra info, like metadata, in something called headers.
Headers tell the server things like what browser you're using (User-Agent), what kind of content you expect (Accept), or even authentication tokens (Authorization).
Efficient Header Control
We learned about declarativeNetRequest for blocking and redirecting. It's powerful because it lets the browser handle rules efficiently, without your extension's JavaScript always running.
Today, we'll use it to modify these request headers, adding, changing, or removing them before a request even leaves your browser!
Introducing `modifyHeaders`
To change headers, we use a specific actionType within our declarativeNetRequest rules: "modifyHeaders".
This action takes an array of requestHeaders. Each item in this array describes a single header modification you want to make.
Header Operations Explained
For each header modification, you specify an operation:
"set": Replaces an existing header's value or adds it if it doesn't exist."append": Adds a new value to a header. If the header already exists, it will have multiple values. If not, it adds it."remove": Deletes a header entirely from the request.
Essential Permissions
To use declarativeNetRequest for header modification, your extension needs specific permissions in its manifest.json file:
"declarativeNetRequest": The basic permission to use the API."declarativeNetRequestWithHostAccess": Needed if your rules modify headers on specific websites (hosts). This is usually the case!
Add a Custom Header
Let's add a custom header called X-CoddyKit-User to all outgoing requests. This could be useful for identifying requests from your extension.
This code goes into your extension's background.js file.
chrome.declarativeNetRequest.updateDynamicRules({
removeRuleIds: [1],
addRules: [{
id: 1,
priority: 1,
action: {
type: "modifyHeaders",
requestHeaders: [{
header: "X-CoddyKit-User",
operation: "set",
value: "CoddyKitStudent"
}]
},
condition: {
urlFilter: "<all_urls>",
resourceTypes: ["main_frame", "sub_frame", "xmlhttprequest"]
}
}]
});
// In a real extension, this runs once on install/update.
// You'd observe the header in your browser's DevTools Network tab.Dissecting the Rule
The code uses chrome.declarativeNetRequest.updateDynamicRules to manage rules. Here's a quick breakdown:
id: A unique number for your rule.priority: Determines which rule wins if multiple rules apply.action: Defines what to do. Here,"modifyHeaders"with ourrequestHeaders.condition: Specifies when the rule applies (e.g.,<all_urls>for everywhere).
Change the User-Agent
You can use "set" to change standard headers too. Here, we'll modify the User-Agent header for requests going to example.com. This spoofs your browser's identity for that site.
chrome.declarativeNetRequest.updateDynamicRules({
removeRuleIds: [2],
addRules: [{
id: 2,
priority: 1,
action: {
type: "modifyHeaders",
requestHeaders: [{
header: "User-Agent",
operation: "set",
value: "CoddyKitBrowser/1.0 (Extension)"
}]
},
condition: {
urlFilter: "*://example.com/*",
resourceTypes: ["main_frame", "sub_frame"]
}
}]
});
// This rule would change the User-Agent for example.com.Remove a Header
Sometimes, you might want to remove a header for privacy or to prevent certain tracking. Let's remove the Referer header for all image requests.
The Referer header tells a website where you came from.
chrome.declarativeNetRequest.updateDynamicRules({
removeRuleIds: [3],
addRules: [{
id: 3,
priority: 1,
action: {
type: "modifyHeaders",
requestHeaders: [{
header: "Referer",
operation: "remove"
}]
},
condition: {
urlFilter: "<all_urls>",
resourceTypes: ["image"]
}
}]
});
// This rule would remove the Referer header for image requests.Quick Check: Header Operations
You want to add an API key as a custom header, X-API-Key, to a request. If the header somehow already exists, you want to make sure your key is also present, possibly as a second value, rather than replacing an existing one.
Recap & Next Steps
Great job! You've learned how to powerfully modify HTTP request headers using declarativeNetRequest.
- We explored the
"modifyHeaders"action. - Understood the
"set","append", and"remove"operations. - Saw how to add custom headers, change user agents, and remove sensitive info.
- Remember the necessary permissions:
declarativeNetRequestanddeclarativeNetRequestWithHostAccess.
Next, we'll dive into redirecting and rewriting URLs!
자주 묻는 질문
“요청 헤더 수정” 강의는 무료인가요?
네 — “요청 헤더 수정” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Browser Extensions Development (Chrome & Edge) 강의 전체를 잠금 해제할 수 있습니다. Browser Extensions Development (Chrome & Edge) 강의에는 총 4개의 강의가 포함되어 있습니다.
“요청 헤더 수정”에서 뭘 배우나요?
나가는 요청에 사용자 지정 동작이나 인증을 적용할 수 있도록 HTTP 요청 헤더를 수정하는 규칙을 구현합니다. 브라우저에서 직접 실행하는 실습 코드로 Browser Extensions Development (Chrome & Edge)을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Browser Extensions Development (Chrome & Edge)을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Browser Extensions Development (Chrome & Edge)은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.
“요청 헤더 수정” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Browser Extensions Development (Chrome & Edge) 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Browser Extensions Development (Chrome & Edge) 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.