웹페이지에서 아무렇게나 C# 코드 실행

🙋 내가 만들었어요!
,
1

https://codepen.io/naratteu/pen/NPrPeMp

.NET Lab 같이 브라우저상에서 직접 C# 코드를 컴파일해 실행하는 웹앱의 응용으로, 웹앱을 iframe으로 넣어서 다른 문서에 있는 C# 코드를 실행해주는 형태로 구성해봤어요

위 저장소를 포크하고 개인 github page에 배포해두면, 해당도메인의 다른페이지에서 아래와같이 c#코드를 실행할수 있게됩니다. iframe의 innerText는 보통 사용되지 않으니까 가능한 방법이였습니다.

<iframe src="/bframe.run/csx.html">
    System.Console.WriteLine("Hello, World!");
</iframe>

다른 도메인의 문서에서 사용하는경우에는 웹 보안상 서로의 DOM에 접근하기 어려우므로 ESM모듈로써 임포트 한 후 자기자신의 정보를 전달해 실행토록 할 수 있습니다.

<iframe onload="import('https://naratteu.github.io/bframe.run/csx.mjs').then(m => m.init(this))">
    System.Console.WriteLine("Hello, World!");
</iframe>

비슷하게 만든 다른 모듈로, 태그에서 src로 스크립트 경로를 명시하면 innerText로 적은 스크립트는 읽지 않는다는점을 이용해 livescript를 즉시 작동되게 한것도 있습니다.

image

{712C128B-7D26-438C-9861-EB21F2BBF85B}
{712C128B-7D26-438C-9861-EB21F2BBF85B}516×263 5.44 KB

당장은 wasm런타임에서 Csharp 코드를 컴파일해 실행하는 방법이 충분히 구현되지 않아 블레이저 웹앱의 iframe까지 필요하지만, 위같은 단순 라이브러리 수준의 경량화도 가능하지 않을까 합니다.

이런 해괴한 html 구성의 이점은 전체 문서에 어떤 전역적인 라이브러리 의존성을 선언하거나 WebComponent define같은 선행스크립트를 배치해두지 않아도, 프레임워크 없이 순수HTML에서 HTMLElement 하나를 격리된 단독 컴포넌트로써 임의로 붙여넣어 사용할수있다는점입니다. 다만 Hack에 가까운 방식이다보니 또 순수Html이 아닌 웹프레임워크에서 사용해보려니 호환성이 좋지 않네요

7개의 좋아요