Chrome Native Client (NaCl, pNaCl) 정리

예전 블로그에 있던 글을 옮김. (2015년 7월 즈음..)

Chrome Native Client 개요

현재 크롬에서 넷스케이프 기반의 Plug-In API인 NPAPI를 사용하고 있음.

하지만 NPAPI는 오래된 기술이고 보안에도 취약하다는 단점을 가지고있어 Google에서 곧 지원을 중지한다고 함.(9/2015)

NPAPI는 외부 DLL과plugin.dll을 이용하여 통신하고 DLL의 각종 함수를이용할 수 있었음.

이를 대체하기 위해 찾던 중. PPAPI(Pepper Plug-in API)를찾음. 이는 Dynamic Linking을 지원하지 않으나이를 Chrome에서 지원하는 Native Client(이하NaCl)가 감싸서 특정 방법으로 지원을 한다고 하여 NaCl에대해 알아보게 되었음.

 

NaCl은 웹 브라우져에서 네이티브 코드를 실행하고 네이티브에 가까운속도를 낼 수 있도록 하는 기술이며 구글의 오픈소스 프로젝트이다.(네이티브 컴파일 된 코드를 브라우져에서실행가능하게 하는 오픈소스 기술 – Explorer의 Active X와도비슷하다고 할 수 있음)

#샌드박스 – 컴퓨터의보안 관련 단어로 외부로부터 들어온 프로그램이 보호된 영역에서 동작하게 만들어 시스템이 부정하게 조작되는 것을 막는 보안형태 또는 실험적 의미로도쓰이는데 이 떄는 실제로 프로젝트를 적용하기 전에 실험적으로 프로그램을 연결하는 곳(버추얼 머신 같이)을 지칭한다. 

Chrome Native Client 장점

NaCl은 C, C++네이티브코드를 웹페이지에서 실행할 수 있다.

자바스크립트만큼이나 안전하다(보안성).

유저가 플러그인을 다운받지 않아도 사용이 가능하다.

여러 OS, platform에서 구동 가능하다. (Windows, Mac OS, Linux, Chrome OS & x84-32, x84-64, arm …)

+ 컴파일된 코드가 브라우져 내에서 거의 네이티브에 가까운 속도로안전히 실행된다.

+ 클라이언트 컴퓨터의 리소스를 어플리케이션에 대부분 사용 가능.

+ 그래픽, 오디오 등(2d, 3d그래픽의 렌더링, 오디오 재생, 마우스나 키보드 이벤트 응답, 다중 스레드 실행이나 메모리 직접액세스 등)의 처리시 유저가 플러그인을 설치할 필요 없이 네이티브 코드로 실행이 가능

 

Chrome Native Client 종류

NaCl은 Portable NaCl과 Traditional(non-portable) NaCl이 존재.

https://developer.chrome.com/native-client/nacl-and-pnacl- 두 NaCl의 차이점.

NaCl Web Application은 기존에 사용되는 html, css, js와 NaClSDK에서 지원하는 NaCl Module로 이뤄져 있다.

NaClSDK는 현재 C, C++을지원하며 지속적인 업데이트 중.

NaCl Module은 js,html과 통신하게 된다.

 

PNaCl(pinnacle이라고 읽음) 은 Portable Native Client로 Portable Executable(pexe)하나로 여러 OS, platform에서실행이 가능하며 크롬 내장 번역기에서 사용자의 하드웨어에 대한 네이티브코드로 변환을 해줌.

보통의 웹 어플리케이션을 배포할 경우 사용자는 여러 아키텍쳐에서 실행 할 수 있으므로 PNaCl을 이용하며 이를 사용자의 웹에서 실행하기 전에 하드웨어에 맞춰 nexe로바뀌어 실행하게 됨.

 

NaCl(전통적인 NaCl)은아키텍쳐에 종속적인 모듈(architecture-dependent-nexe).

보통 프로그램이 실행될 때, 브라우져는 사용자의 컴퓨터 아키텍쳐에기반하여 로드될 nexe(NaCl Exxcutable)를 결정.

이 NaCl의 경우 특정한 하드웨어 플랫폼을 타겟으로 제작하는 것이가능함.

Chrome Native Client 작동 원리

NaCl은 툴체인과 런타임 컴포넌트(Toolchains,Runtime components)로 구성된다.

Toolchains : C, C++코드를 pexe, nexe로 변환해주는 개발툴(컴파일러, 링커 …)들의 집합

PNaCl을 만들기 위한 툴체인은 LLVM기반의툴체인이며 하나의 pexe를 생성

NaCl을 만들기 위한 툴체인은 gcc기반의 툴체인이며 여러 아키텍쳐 별로 그에 맞는 nexe모듈을 생성하여 실행시 어떤 nexe가 로드될 지 사용자의 하드웨어에 따라 선택됨.

Runtime components : 브라우져나 나클 모듈의 안전하고효율적인 실행이 가능한 다른 호스트 플랫폼에 임베디드된 구성요소(pexe의 경우 PNaCl Translator(AOT)를 통해 사용자의 하드웨어에 적합한 nexe로변환되어 NaCl Sandbox 내에서 실행)

NaCl은 컴퓨터에 네이티브 코드의 실행을 허락하게 하게 때문에 특히보안이 더 중요.

Double Sandbox Design 채택.

NaCl 샌드박스는 코드가 시스템의 리소스에 안전하게 허용된 API들만 접근 가능한 것을 보장하며 허락된 데이터패턴과 코드만이 사용된다.

이런 보안조치들은 크롬브라우져내에 기존에 존재하는 샌드박스에 추가되어 NaCl모듈은항상 엄격하게 제한된 상황내에서 권한을 가지고 실행이 된다.

이 프로세스와 바깥의 통신은 오직 브라우져 인터페이스를 통해서만 가능하다.

 

Chrome Native Client 구조

HTML / CSS / Javascript / Manifest /pexe(portable NaCl file) 로 이루어져 있음.

I.      Html 파일 내부에 embed tag를 이용해 manifest(nmf)파일을 찾게 함.

A.    <embed name=”myNaCl” src=”myNaCl.nmf”type=”application/x-pnacl” />

II.     Manifest파일은 옵션에 따라 어떤 모듈을명시할 지 명시함.

A.    “url”: “myNaCl.pexe” …

III.   pexe(portable NaCl file)은컴파일된 NaCl module로 Javascript와 다른브라우져 리소스의 연결을 해주는 Pepper API를 사용한다.

IV.   PPAPI(Pepper plug-in API)는NaCl module이 직접 OS시스템 레벨의 펑션을 사용하는것이 아니고 PPAPI가 제공해주는API를 통해 사용하기때문에 안전하고 이동성? 이식성?(portable)이 좋다.

V.    https://developer.chrome.com/native-client/devguide/coding/application-structure 에 더 자세하게 나와있음.

 

 

 

Chrome Native Client Example

NaCl SDK에는 여러가지 기본적인 예제들이 수록되어 있다.

경로는 NACL_SDK_ROOT/examples/ 또는 이 안에 여러가지카테고리별로 살펴 볼 수 있으므로 살펴볼 것

cmd창을 열어 현재 디렉토리 또는 사용해보고 싶은 예제가 있는 디렉토리에서make +옵션 을 하여 빌드를 해주고 실행해준다. 실행은examples 폴더 내의 httpd.cmd를 실행하면 내부의빌드된 여러 예제들을 구동해볼 수 있다.

예제를 디버깅해보고 싶다면 make debug 명령을 이용해 디버깅할수 있다.

 

Chrome Native Client Tutorial

C++ 코드를 PNaCl Toolchain을이용하여 pexe로 실행하는 튜토리얼 자바스크립트(javascript)에서‘hello’라는 메시지를 보내면NaCl Module에서‘hello from NaCl’이라는 메시지를 보내어 alert로띄어주는 예제를 만들어 볼 것.

NaCl Module과 JS간의메시지 통신 예제.(NACL_SDK_ROOT는 SDK경로pepper_$(VERSION) 까지)

1.    Native Client SDK다운로드

2.    NACL_SDK_ROOT/getting_started 디렉토리에서 Local Server 실행 (make serve)

3.    Chrome Browser 실행 및 설정 세팅

A.      F12버튼을 눌러 Developer tools로 들어감

B.     오른쪽 하단부분에  톱니바퀴를 눌러 설정으로 들어감

C.     General 부분의 Disable cache(while DevTools is open)을 체크

D.    Chrome 재실행

4.    NACL_SDK_ROOT/getting_started/part1디렉토리로 이동. 

          A.    Index.html 파일은 NaCl Module과 통신하는 Javascript 코드와 레이아웃인html코드가 있음.

B.     Hello_tutorial.nmf : NaCl과html파일을 연결해주고 추가적인 옵션도 줄 수 있는 메니페스트 파일

C.     Hello_tutorial.cc : C++ code

D.    Makefile : Hello_tutorial.cc를pexe로 빌드해주는 컴파일 커맨드

5.    컴파일 후 실행

A.    make (추가옵션)으로 컴파일

B.     http://localhost:5103/part1 에서 LOADING... => SUCCESS로 바뀌는지 확인.

C.     컴파일이 안될 경우 환경변수에 NACL_SDK_ROOT 설정을해주었는지 확인

D.    SUCCESS로 바뀌지 않을 경우 약간 시간을기다려보거나 실수와 해결책 쪽을 참고.

6.    Javascript 코드를 수정하여 NaCl module로 메시지 전송

A.    function moduleDidLoad() {
  HelloTutorialModule =document.getElementById('hello_tutorial');
  updateStatus('SUCCESS');
  // Send a message to the Native Clientmodule         
  HelloTutorialModule.postMessage('hello');
}

B.     html 내의 Javascript 코드 수정 -> 모듈로 메시지 전송

7.    NaCl module의 메시지 핸들러 구현

A.    hello_tutorial.cc내에 Javascript에서 받은 메시지를 처리하는 부분을 수정

B.     module인스턴스의 HandleMessage() 멤버함수 구현

C.     PostMessage함수를 이용해 Javascript로 메시지 전송

D.    코드는 https://developer.chrome.com/native-client/devguide/tutorial/tutorial-part1step 7에 있음. Namespace는 위에 추가하고 HandleMessage 부분에 내용 추가

8.    5번과 같이 재실행. 이번에는 메시지(hello from nacl)가 alert창으로 뜨는 것을 확인할 수 있음.

알아본 결론

현재 NaCl로 위의 그림과 같이 dll을연동하여 쓰려면 리눅스에서 소스를 컴파일 하여(cygwin환경 등).so를 사용해야 하는 것으로 확인되어 사용이 사실상 힘들 것이라 판단. 방향을 다른 대체할수 있는 것이 없을까 찾는 것으로 돌림. 

실수와 해결책

(Windows 7 64bit / Visual Studio 2010 / pepper 42 / chrome 43 / python 2.7.10)

1.    Visual Studio 2010(VS 2010) Add-in이용해서 빌드하고 실행하면 기본 Chrome path로 잡힌 chrome이 실행되는데 이chrome은 기본 설정이 다른건지 플러그인이나컴포넌트같은게 사용안함으로 되어있는건지 NaCl로드, 실행이제대로 안된다. -> 평소 사용하는 크롬에 url쳐서실행해볼 것.

2.    Make할 때 make: Nothing to be done for 'all'. 이런 메시지가 나오는 경우는 이미 빌드가 되어바뀔 파일이 없다는 것으로 .bc .pexe 결과 폴더 등을 지우고 하면 다시 빌드가 된다.

3.    chrome 은 항상 Pepper version보다 같거나 커야 한다. Chrome 버전은about:chrome으로 확인 가능함. 현재 사용한 버전은pepper_42 chrome은 43버전을 사용함(7/7/2015)

4.    Add-in 설치에도 적었으나 Python은 3.x버전대는 지원하지 않으므로 2.7버전을 사용해야 함.

5.    VS2010에서 프로젝트 구성 관리자에서 새로운구성속성을 만들 때 (NaCl64 등..) Win32에서설정을 복사해야 함. 이미 만들어진 다른 곳(NaCl32 등..)에서 설정을 복사하면 안됨.

6.    cmd에서 빌드할 경우 make시 몇가지 옵션을 줄 수 있는데 CONFIG=Debug를 뒤에쓰면 디버그 모드로 빌드가 되고TOOLCHAIN또한 옵션을 줄 수 있음.

A.    make TOOLCHAIN=[all|pnacl|glibc|newlib|host]CONFIG=[Release|Debug]

7.    빌드 후 실행을 하기 위해서는 cmd창에서 make serve를 해 주어야 한다. 이 외에도 예제를 보고 싶은경우 exmaple에 있는 httpd.cmd를 이용해 서버를켜주면 되며 서버는 기본적으로 로컬호스트에 5103포트가 열린다.

A.    url : http://localhost:5103

8.    크롬브라우져에서 디버깅시 F12를 눌러 크롬개발자 툴에 가서 톱니바퀴모양의 설정 버튼을 누르고 일반(General)탭의Disable cache를 체크한 후에 크롬 재시작후 개발한다.

9.    되야되는데 안되는 경우가 있음.(내 크롬에서는안되고 다른사람 크롬에서는 되는데 전혀 다른게 없어보이고) F12를 눌러서 크롬 개발자 툴의 console창 윗단에 Only unpacked extensions andapps installed from the Chrome Web Store can load NaCl modules without enablingNative Client in about:flags. 이렇게 뜨는 경우가 있음. 이럴 떄는chrome://flags에 가서 Native Client 활성화를시키고 크롬을 재부팅하면 됨.

10.  VS2010에서 프로젝트 생성시 빈 프로젝트를NACL_SDK_ROOT내부에 생성해야 함 외부에 생성하면 제대로 컴파일되지 않음.

11.  make명령을cmd에 입력할 때 직접 생성한 프로젝트의 경우 경로를 못찾는 경우가 있음. 이럴 떄는make.bat 파일의 내용을 @%NACL_SDK_ROOT%\tools\make.exe%* 로 바꿔주면 됨. Make.exe를 못 찾는 경우 이렇게 바꾸면 절대경로가 되어 어느위치에서도 찾을 수 있음.

12.  msb6006 code 1 x86_64-nacl-g++.exe이종료되었습니다. 에러가 나며 빌드가 안되는 경우 정확한 확인은 안되지만

A.    첫째로 Add-in의 버전문제일 수 있으나 1578버전 이상이라면 링크패스가 제대로 잘 잡아지는 것으로 수정이 되어서 이 이상이라면 버전문제는 아닌 것 같음.

B.     둘쨰로 프로젝트의 위치 문제로 프로젝트는 NACL_SDK_ROOT디렉토리내부에 있어야 함.

C.     두 경우 다 아니라면 그냥 프로젝트를 다시 생성해봐야 할 것 같음. 현재 이유는 불명확하나 처음에 만들었던 프로젝트는 빌드가 안되고 나중에 만든 프로젝트는 빌드가 제대로 되어실행까지 잘 되는 것을 확인할 수 있었음

13.  윈도우에서는 .dll로 dynamic linking을 지원하고 gcc환경(linux, unix ..) 에서는 .so로 dynamic linking을 제공한다.

A.    NaCl이 pepperAPI를 통해 브라우저에서 요청하는 nexe는 gcc(혹은 g++)기반이므로 .dll을 그대로 가져다 사용할 방법은 현재 (7/7/2015) 없다.

B.     http://stackoverflow.com/questions/28272807/native-clientnaci-can-invoke-a-third-party-dll-file

C.     http://stackoverflow.com/questions/11136107/c-code-on-nacl

D.    등의 페이지에서 확인할 수 있다.

References

NaCl 제작 영상

NaCl 공식 사이트

위키피디아(ko)

구글그룹스 – Native Client

NaCl 소개 –한글

NaCl Dynamic Linking(.so)

Alternative to NPAPI(Native Message)

Appendix A How to Install Native Client SDK(NaCl SDK)

Windows 7 64bit 환경

https://developer.chrome.com/native-client/sdk/release-notes 에서 최신 버전 확인

 

I.     https://developer.chrome.com/native-client/sdk/download 에서 다운로드

II.    설치를 위해 python이 필요함. 아직 3.x버전은지원하지 않으므로 2.7버전(7/2015현재2.7.10버전이 최신) 설치

A.    https://www.python.org/downloads/ 에서 다운로드 및 설치

B.    환경변수 설정 (기본 디렉터리 C:\Python27)

III.  다운로드 받은 파일을 압축해제 하고 해제한디렉토리에서 cmd창을 열어 naclsdk list를 입력.

A.    Pepper_$(version)이 list로 나오는 것을 확인할 수 있음

B.    방화벽이 막혀 있을 경우에는 
<urlopen error [Errno 10060] 연결된 구성원으로부터 응답이 없어 연결하지 못했거나,> 더 이상 진행하지 못함 
이라는 메시지를 출력 -> 외부에서 받거나 방화벽을 뚫어야 진행 가능

IV.  naclsdkupdate명령을 이용해 최신버전을 업데이트 하거나(stable한최신 버전 업데이트) 직접 버전을 정해 업데이트 (ex – naclupdate pepper_42)

A.    naclsdkupdate로 설치 확인 가능

B.    덮어쓰고 싶을 때는 naclsdk update –force

C.    도움말은 naclsdk help로 확인 가능 

Appendix B How to Install Native Client – Visual StudioAdd-in (VS 2010, 2012)

Visual Studio 2010기준 NaCl Add-in설치

 

I.     https://commondatastorage.googleapis.com/nativeclient-mirror/nacl/nacl_sdk/sdk/1578/vs_addin.tgz를 이용해 1578버전(7/2015-최신) 다운로드

 

II.    환경변수에 CHROME-PATH(기본으로는 C:\Program Files(x86)\Google\Chrome\Application\chrome.exe으로 잡혀있음) 및 NACL_SDK_PATH등록 (pepper_$(version) 까지등록 – 현재 pepper42버전을 설치했을 때는C:\Users\SDS\Desktop\VA4S_CS_Player\NaCl_SDK\nacl_sdk\pepper_42이렇게등록하였음)

 

III.  다운받은 파일 압축 해제 후 cmd창을 열어 install.bat을 실행

A.    IOError:[Errno 2] No such file or directory: 'C:\\Program Files (x86)\\MSBuild\\Microsoft.Cpp\\v4.0\\1033\\general.xml'
계속하려면 아무 키나 누르십시오 . . .
라는 결과가 떴음. 1033폴더가 v4.0 내부에있어야 하는데 v4.0\V120에 존재하여 이런 에러가 발생. 이유가확실하지는 않으나 1033폴더를 v4.0바로 아래로 옮겨주어문제는 해결

B.    다시 install.bat실행하면 
Installing Add-in: C:\Users\SDS\My Documents\Visual Studio 2010

Add-in installed.

Installation complete!
가 뜨며 완료가 될 것.

 

IV.  Visual Studio2010을 실행하여 구성관리자(ConfigurationManager)로 이동(Build-Configuration Manager)하여 활성 솔루션플랫폼 – 새로 만들기 NaCl을 생성 가능한지 확인하면완료.

A.    새 플랫폼을 만들 때는 항상 Win32에서 설정복사 할 것!