Lobsters

Firefox Local Mode

Firefox Local Mode: 로컬 파일을 HTTPS 출처로 불러오기

Firefox 153의 Local Mode는 로컬 폴더를 사용자 지정 HTTPS 출처에 연결해 웹 페이지를 시험하는 기능입니다. DevTools를 열어 둔 동안에만 작동하며, Secure Context에서만 허용되는 Web API를 로컬 파일로 시험할 수 있습니다.

에디터 노트

Local Mode의 차이는 단순히 서버를 생략하는 데 있지 않고 HTTPS 출처를 로컬 폴더에 연결한다는 데 있습니다. Secure Context 전용 API를 시험하려는 경우에는 목적이 분명합니다. 반면 댓글에서 지적했듯 localhost도 Secure Context이므로, 같은 컴퓨터에서 페이지를 확인하는 작업에는 일반 HTTP 서버로 충분할 수 있습니다. 다른 기기에서 접속해야 한다면 Local Mode는 맞지 않습니다. 또 DevTools를 열어 둬야 한다는 제약과 실제 작동 오류를 겪었다는 댓글이 있습니다. 따라서 적합성은 HTTPS 출처가 필요한지, 접속 범위가 Firefox 내부로 한정돼도 되는지에 따라 갈립니다.

AI 요약

Firefox Local Mode는 로컬 폴더에 사용자 지정 HTTPS 주소를 연결합니다. 웹 페이지를 시험할 때 HTTP 서버를 따로 실행하지 않아도 되며, 출처마다 별도 저장소와 쿠키를 사용할 수 있습니다. 등록한 매핑은 Firefox 안에서 DevTools를 열어 둔 동안에만 작동합니다. 다른 프로그램이나 로컬 네트워크의 소프트웨어는 이 매핑에 접근할 수 없습니다.

설정과 사용

Firefox 153부터 DevTools의 Options 패널에서 매핑을 등록할 수 있습니다. 매핑마다 HTTPS 주소에 사용할 origin과 파일을 불러올 로컬 폴더를 지정합니다. DevTools를 연 상태에서 file:// 주소를 불러오면 알림이 표시됩니다. Add To Settings는 해당 파일의 매핑을 설정에 등록하고, Try it은 현재 파일이나 폴더에 임시 매핑을 만듭니다. 임시 매핑은 DevTools나 Firefox를 닫으면 사라집니다.

about:config 설정

매핑은 about:config에서도 관리할 수 있어 프로필 간에 옮기거나 자동화할 때 활용할 수 있습니다. 각 매핑은 devtools.local-mode.mappings.${index}.origin, devtools.local-mode.mappings.${index}.path, 선택 항목인 devtools.local-mode.mappings.${index}.disabled 설정으로 구성됩니다. index에는 매핑마다 고유한 정수를 사용합니다.

Lobsters 반응

  • @steef — 이 기능을 알고 나니 파일이 바뀔 때 자동으로 새로고침하는 기능도 있으면 좋겠습니다. 지금은 투박한 스크립트를 쓰지만, 브라우저에서 안정적으로 구현하는 편이 가장 좋다고 생각합니다.
  • @asem — 처음 생각한 것만큼 쓸모 있지는 않습니다. 개발자 도구를 계속 켜 둬야 하는데, 그냥 "python -m http.server"를 실행하는 대신 이걸 쓸 이유를 모르겠습니다. 제가 놓친 게 있나요?
    • @PuercoPop — 제가 놓친 게 있나요? HTTPS를 쓰는 Secure Context에서만 허용되는 Web API를 쉽게 시험할 수 있습니다.
  • @kiwec — 편리해 보여서 Firefox를 설치했는데 작동하지 않습니다. 폴더 파일 목록은 표시되지만 파일을 누르면 "failed to load" 오류가 납니다. 기본 firefox.localhost 주소도 보안 오류가 났습니다. cloudflared tunnel --url http://localhost:8080을 계속 쓰겠습니다.
    • @gavinmorrow — 저는 python3 -m http.server를 씁니다. 호스트와 포트도 조정할 수 있습니다. 간단하고 편합니다.
    • @pocket_walrus — Firefox 기능은 개발 중인 콘텐츠를 HTTPS로 쉽게 제공하는 데 맞춰져 있습니다. python3 -m http.server는 HTTPS를 쓰지 않습니다. 서비스 워커처럼 안전하지 않은 HTTP 사이트에서 제한되는 웹 기능이 늘고 있어 HTTPS가 점점 중요합니다. HTTPS가 필요하다면 Caddy도 좋은 대안입니다.
    • @gavinmorrow — Firefox는 localhost에서도 그런 기능을 허용하지 않나요?
    • @ThinkChaos — 맞습니다. 루프백 연결은 Secure Context입니다.
    • @pocket_walrus — 맞습니다. 다른 기기에서 같은 네트워크의 서버에 접속해야 할 때 문제가 됩니다. 하지만 글의 Local Mode로는 그 방식의 접근이 불가능하므로, 이 경우 localhost에서 HTTP 서버를 실행하면 같은 목적을 달성한다는 데 동의합니다.
    • @BD103 — 제 경우에는 잘 작동했습니다. 폴더에서 PNG 파일 몇 개를 Firefox로 제공할 수 있었습니다.
    • @Pomax — 저는 모든 것을 로컬에 두기 위해 Caddy를 쓰는 편입니다.

원문: Mozilla Firefox Source Docs / 번역·요약: Trawling

원문 보기 ↗토론 보기 ↗