
인증된 보안 연구 재현 CVE-2026-27701 / GHSA-xh9w-5859-x97j (live-codes/livecodes @ 8017e01): 신뢰할 수 없는 PR 제목이 i18n-update-pull github-script 블록에 삽입됨.
자동화된 연구 산출물 — 업스트림 프로젝트가 아님.
이 저장소는 Université Laval의 석사 논문에서 게시된 GitHub Actions 워크플로우 취약점 재현을 위해 자동화된 하네스가 구축한 일회용 실험실입니다. 이는 커밋
8017e0146fc020b8e9ec4115afc6f7b228354e46(2026-02-21) 시점의live-codes/livecodes를 그대로 스냅샷한 것이며, 해당 프로젝트의 자체 라이선스에 따라 재배포되며, 해당 라이선스 파일은 이 스냅샷에 변경 없이 포함되어 있습니다.업스트림 프로젝트는 관여하지 않으며, 결코 공격 대상이 아니며, 여기서 연구된 취약점은 이미 공개된 것입니다. 이 저장소의 모든 시크릿과 변수는 무작위로 생성된 더미 값입니다 — 실제 자격 증명은 존재하지 않습니다. 액션 참조와 러너 이미지는 2026-02-21에 확인된 값으로 고정되어 있습니다. 스냅샷에 적용된 모든 변경 사항은 하네스 출력의
pinning.md를 참조하세요.질문 또는 이의 제기: [email protected]
그냥 작동하는 코드 플레이그라운드!
React, Vue, Svelte, Solid, Typescript, Python, Go, Ruby, PHP 및 90개 이상의 언어/프레임워크를 위한 풍부한 기능을 갖춘 오픈소스 클라이언트 사이드 코드 플레이그라운드입니다.

* GitHub 계정은 GitHub 통합을 사용하는 기능에만 필요합니다.
... 모든 기능을 즐기세요!
페이지에 다음 코드를 추가하세요:
<div id="container"></div>
<script type="module">
import { createPlayground } from 'https://cdn.jsdelivr.net/npm/livecodes';
createPlayground('#container', {
params: {
markdown: '# Hello LiveCodes!',
css: 'h1 {color: dodgerblue;}',
js: 'console.log("Hello, from JS!");',
console: 'open',
},
});
</script>
임베디드 플레이그라운드 문서를 확인하세요.
... 그리고 그냥 작동합니다!
자세한 내용은 전체 기능 목록을 확인하세요.
소프트웨어 개발 키트(SDK)는 LiveCodes 플레이그라운드를 임베드하고 통신할 수 있는 쉽고 강력한 인터페이스를 제공합니다.
SDK는 경량(gzip 기준 5kb 미만), 제로 의존성 npm 패키지로 제공되며, CDN에서도 사용할 수 있습니다. 다양한 구성 및 임베드 옵션으로 플레이그라운드를 만들 수 있습니다. 또한 SDK 메서드를 통해 런타임 중 플레이그라운드를 프로그래밍 방식으로 통신하고 제어할 수 있습니다.
npm i livecodes
예시: (LiveCodes에서 열기)
import { createPlayground } from 'livecodes';
createPlayground('#container', {
config: {
markup: {
language: 'markdown',
content: '# Hello World!',
},
},
view: 'result',
});
JavaScript SDK는 프레임워크/라이브러리에 구애받지 않습니다. 그러나 인기 있는 라이브러리용 래퍼 컴포넌트도 제공됩니다(현재 React 및 Vue). SDK는 래퍼 없이 Svelte 및 Solid에서 직접 사용할 수 있습니다. TypeScript 지원은 타입 안전성과 훌륭한 개발자 경험을 제공합니다.
React SDK 예시: (LiveCodes에서 열기)
import LiveCodes from 'livecodes/react';
const config = {
markup: {
language: 'markdown',
content: '# Hello World!',
},
};
const Playground = () => <LiveCodes config={config} view="result" />;
export default Playground;
Vue SDK 예시: (LiveCodes에서 열기)
<script setup>
import LiveCodes from 'livecodes/vue';
const config = {
markup: {
language: 'markdown',
content: '# Hello World!',
},
};
</script>
<template>
<LiveCodes :config="config" view="result" />
</template>
또한 SDK는 플레이그라운드 링크 생성도 지원합니다:
import { getPlaygroundUrl } from 'livecodes';
const url = getPlaygroundUrl({
config: {
markup: {
language: 'markdown',
content: '# Hello World!',
},
},
});
console.log(url);
자세한 내용은 SDK 문서를 참조하세요.
문서에는 데모, 코드 샘플, 스크린샷, Storybook 및 TypeScript 타입이 포함되어 있습니다.
최신 변경 사항을 확인하세요:
피드백을 환영합니다!
보안 보고는 SECURITY.md를 참조하세요.
문의 양식을 통해 연락하실 수도 있습니다.
기여는 언제나 환영하며 크게 감사드립니다.
훌륭한 기여자 여러분께 큰 감사를 드립니다! 여러분의 노력이 모든 차이를 만듭니다!
기여 가이드를 참조하세요.
LiveCodes는 다음 서비스의 후원을 받고 있습니다:
LiveCodes가 사용하는 패키지와 해당 라이선스는 여기에 나열되어 있습니다.
MIT 라이선스 © Hatem Hosny
LiveCodes는 무료이며 오픈소스입니다. 앱에는 광고가 없으며 구독도 필요하지 않습니다. 제한 없이 무제한 사용이 가능합니다.
LiveCodes를 스폰서링함으로써 프로젝트의 지속적인 개발과 유지 관리를 지원하고, 개발자 커뮤니티를 위한 귀중한 리소스로 남을 수 있도록 도울 수 있습니다.