Iframe과 CSP — Panel에서 외부 content 안전하게 load

"Side panel은 그냥 extension HTML page, popup을 다스리는 같은 MV3 content security policy가 다스려. Lesson 5는 규칙과 안전한 escape valve — 뭘 직접 렌더 가능, 뭐가 iframe 필요, hole 안 만들고 frame-src 넓히는 법."

Default extension-pages CSP

MV3가 extension 안 모든 HTML page (popup, side panel, options page, full-tab page)에 strict default Content Security Policy와 함께 ship:

script-src 'self'; object-src 'self';

허용하는 것:

• Extension에 bundle 된 JavaScript file (<script src="panel.js">).
• Extension에 bundle 된 stylesheet.
• 이미지 / font / 대부분의 다른 passive resource는 어디서든.
• Fetch / XHR은 어떤 URL 로든.

금지하는 것:

• Inline script (<script>...</script>)와 inline event handler (onclick="foo()").
• eval, new Function, string argument 가진 setTimeout — 다 runtime에 ban.
• Extension 바깥 어디서든 <script src="https://cdn.example.com/lib.js"> load.
• Non-extension URL 가리키는 <iframe> — CSP 안 넓히면 차단.

Remote-script ban이 MV3의 flagship 보안 변경이야. Remote frame은 default extension CSP가 알아서 안전하게 만들어 주지 않아. 의도적으로 embed할 origin은 좁은 frame-src allowlist에 넣고, frontend probe나 fetch에 필요한 origin은 connect-src로 따로 잠가. Framing은 양쪽 계약이라 extension CSP가 허용해도 상대 response가 ancestor를 거절하면 끝이고.

CSP 넓히기 — frame-src

Panel에 iframe 허용하려면 manifest에 content_security_policy.extension_pages entry 추가. 형식은 single CSP string. script-src와 object-src baseline 다시 진술하고 frame-src 추가:

{
  "content_security_policy": {
    "extension_pages": "script-src 'self'; object-src 'self'; frame-src 'self' https://www.youtube.com https://*.figma.com;"
  }
}

이제 <iframe src="https://www.youtube.com/embed/...">가 panel.html 안에서 동작. 다른 origin은 여전히 차단. List를 가능한 한 tight 하게 유지 — frame-src의 모든 domain이 그 site가 나중에 compromise 되면 잠재 공격 surface.

흔한 use case

• 문서나 도움말. 내가 관리하는 도메인에 올려 둔 문서를 그대로 띄우는 거야. 도움말을 extension 안에 넣고 버전마다 갱신하는 것보다 훨씬 싸게 먹혀.
• 남의 서비스 화면. Notion 페이지, Figma 파일, YouTube 강의 같은 것들. 하나하나 frame-src에 명시적으로 적어 줘야 해.
• Authentication redirect. 일부 auth flow가 third-party identity provider 통해 redirect. iframe 패턴이 새 tab spawn 없이 panel 안에서 redirect 처리.
• Sandboxed extension content. 자체 chrome-extension:// page (다른 path 가진) 가리키는 iframe이 민감 코드 wall off — user-provided HTML/markdown 표시할 때 script-of-self 권한 없이.

제어하는 page sandbox

마지막 케이스 — untrusted user content 렌더링 — 엔 extension iframe과 sandbox manifest key 결합:

{
  "sandbox": {
    "pages": ["sandbox.html"]
  }
}

sandbox.html이 chrome.* API access 없이 unique origin에서 돔. 부모 panel이 거기 postMessage 가능, 안의 어떤 코드도 user clip storage 닿을 수 없다고 신뢰. Source content가 본질적으로 임의인 rich markdown 이나 HTML clip 표시 패턴.

Web accessible resources — 역방향

위 iframe 이야기는 panel이 외부 content load 하는 것. 반대로 host page가 extension page를 embed하게 하려면 web_accessible_resources를 사용해:

{
  "web_accessible_resources": [
    {
      "resources": ["injected.js", "badge.html"],
      "matches": ["https://*.github.com/*"]
    }
  ]
}

List 된 origin이 어떤 extension file load 허용되는지 선언. Extension file 가리키는 <script> 태그 inject 하는 content script (Lesson 3의 legacy bridge 패턴)와 page가 extension iframe embed 하게 허용하는 extension에서 사용.