Trusted Types
보안이 엄격한 사이트에 AI 창 띄우기
해결하는 문제
콘솔로 띄운 AI 채팅창이 GitHub 같은 사이트에서는 오류로 막힌다.
Shadow DOM으로 사이트 디자인과 격리하고, 문자열을 HTML로 넣는 대신 요소를 하나씩 조립해 Trusted Types 정책을 통과합니다.
서버 의존도
외부 AI·서비스의 API 키가 필요합니다. 키를 페이지에 넣어 배포하면 노출되므로 주의합니다.
브라우저만브라우저 + CDN브라우저 + API 키브라우저 + 엣지 함수서버 필요
데이터가 흐르는 길
무엇이 들어와서 브라우저 안에서 어떻게 바뀌어 나가는지 정리했습니다.
들어오는 것보고 있는 웹페이지
브라우저가 하는 일격리된 영역에 요소를 하나씩 조립해 채팅창 생성
나오는 것사이트 위에 뜬 AI 채팅창
쓰는 브라우저 기술
Shadow DOMcreateElementTrusted Typesfetch
라이브러리와 모델
외부 라이브러리 없이 브라우저 기본 기능만 씁니다.
바꿀 수 있는 옵션
- innerHTML 대신 createElement
- 스타일 격리
- API 키 보관 방식
자주 막히는 곳
- innerHTML로 넣으면 보안 정책 위반으로 차단된다
- API 키를 코드에 넣으면 유출 위험이 크다
이 능력으로 만들 수 있는 서비스
같은 기술을 AI 서비스, 웹 서비스, 피지컬 AI로 넓힌 예시입니다.
AI 서비스
- 읽고 있는 문서에 대해 묻는 AI 도우미
웹 서비스
- 사내 위키 AI 질문 버튼
피지컬 AI
- 장비 매뉴얼 화면 질문 도우미
넓히는 방법
- 로컬 AI(Ollama) 연결로 키 노출 없애기
- 북마클릿 버튼으로
지원 브라우저
PC 크롬·엣지된다
맥 사파리된다
안드로이드 크롬안 된다
아이폰 사파리안 된다
코딩 에이전트에게 줄 프롬프트
복사해서 Claude, Codex, Cursor 같은 코딩 에이전트에 그대로 붙여 넣습니다.
콘솔에 붙여 넣으면 지금 페이지 위에 Shadow DOM으로 격리된 AI 채팅창이 뜨는 코드를 만들어줘. innerHTML은 쓰지 말고 createElement로만 만들어 Trusted Types 사이트에서도 동작하게 해줘.
같은 분류의 능력
12 보안·개인정보·권한에 속한 다른 능력입니다.
무료로 보는 것
체험 페이지, 한 줄 설명, 미리보기 영상
스킬팩 구성
full.html, skill.md, prompt.md, rules.md, customize.md, troubleshooting.md, 예시 데이터, agent-instructions.md