Access Custom Pages 데모 · stephenkim ops portal

직접 체험하기

아래 주소는 실제 Cloudflare Access가 지키는 데모 앱입니다. 누구도 통과할 수 없게 설정돼 있어서, 로그인을 시도하면 항상 거부 화면까지 보게 됩니다. 브라우저 언어 설정에 따라 한국어나 영어로 나옵니다.

로그인할 때는 Google 같은 IdP 버튼을 쓰세요. 이메일 OTP는 허용된 주소에만 코드가 발송되므로, 이 데모에서는 메일이 오지 않습니다.

데모 앱에 템플릿을 할당한 뒤 실제 응답을 캡처했습니다. 로그인 화면의 IdP 버튼과 이메일 OTP 입력칸은 Access가 <cf-access-authbox> 자리에 직접 넣습니다.

브라우저 첫 언어가 한국어면 템플릿 문구가 한국어로 나옵니다. Access가 넣는 로그인 상자 안 문구("Sign in with", "Send login code")는 영어로 고정입니다.

같은 템플릿 하나에서 locale 값으로 한/영을 자동으로 바꿉니다.

디바이스 포스처 같은 비-ID 조건에 걸리면 로그인 전에 이 화면이 나옵니다. 국가, WARP, Gateway 값은 실제 값입니다.

모두 Cloudflare validator(contract v2)에서 오류 0건으로 통과했습니다. 스크린샷은 예시 데이터(Jordan Lee)로 그린 미리보기입니다.

쓰는 값: 로그인 계정, IdP, 통과하지 못한 디바이스 점검 항목, Ray ID, 권한 요청 버튼

쓰는 값: 접속 국가, WARP/Gateway 연결 여부. WARP를 안 켰으면 켜라는 안내를 보여줍니다.

쓰는 값: 앱 이름·도메인, 로그인 오류 메시지. 로그인 상자는 Access가 넣습니다(미리보기의 점선 상자는 모양만 흉내 낸 것).

실패한 규칙 종류에 따라 "MFA 다시 하기 / 디바이스 확인 / 권한 신청" 단계를 골라 보여줍니다. 정책 이름은 노출하지 않습니다. 현재 intranet 앱에 할당된 거부 화면입니다.

Cloudflare One → Reusable components → Custom pages → Access custom pages → Create custom page
종류 선택: login / identity_denied / forbidden / interstitial(cloudflared 승인). 만든 뒤에는 종류를 바꿀 수 없습니다.
HTML + Liquid 편집 → Variables에서 쓸 수 있는 값 확인 → Problems의 오류를 고친 뒤 Publish
앱 → Additional settings → Custom block pages에서 템플릿을 할당하거나, 목록에서 Set as default로 계정 기본값 지정
대시보드에는 렌더링 미리보기가 없습니다. 테스트용 앱에 할당해서 직접 확인해야 합니다.

가능 <style>, 그라데이션, 미디어 쿼리, https 이미지, https 웹폰트(@font-face), 한글 문구
불가 <script>, onclick 같은 이벤트 속성, @import(Google Fonts 링크 방식 불가), <link>, http 이미지, data: URL, 직접 만든 로그인 폼
필수 login은 <cf-access-authbox>, interstitial은 <cf-access-cli-approval>를 정확히 1번, {% if %} 밖에 둬야 합니다.
제한 템플릿 256KB, 렌더링 100ms. 실패하면 Access 기본 페이지로 대체됩니다(정책 판정은 그대로).
API API로 만들 때 contract_version: 2를 꼭 넣어야 합니다. 빼면 레거시 모드로 저장돼 Liquid가 렌더링되지 않고 원문이 그대로 나갑니다.

locale은 브라우저 Accept-Language의 맨 앞 값 하나입니다. 한국어 화면의 브라우저라도 선호 언어 목록 맨 위가 English면 en이 들어옵니다. 한국어 사용자가 대부분이면 "en일 때만 영어, 나머지는 한국어"처럼 한국어를 기본값으로 두는 편이 안전합니다.
선택 값(user, ray_id 등)은 페이지 종류나 상황에 따라 비어 있을 수 있습니다. 항상 {% if %}로 감싸서 비었을 때도 화면이 자연스럽게 보이도록 만드세요.
validator는 오타 난 변수나 {% if %} 안의 authbox를 잡지 못합니다. 테스트용 앱에서 꼭 직접 확인하세요.