javascript 웹 앱 정적분석을 위해 다양한...

/ 40

JavaScript 웹 앱 정적분석을 위해 다양한 모델링을 조화롭게 합치기

배성경 박지혁 류석영

PLRG@KAIST

1

/ 40


2

/ 40

웹 브라우저가 있는 곳엔 JavaScript 웹 앱!

3

Web�� App.

/ 40

JavaScript 웹 앱은 다양한 API를 사용한다.

4

Web�� App.

DOM�� Interfaces

Browser�� APIs

Tizen�� APIs

JavaScript�� Libraries

/ 40

예를들어…

5

출처: https://developer.tizen.org/dev-guide/2.2.0/org.tizen.web.appprogramming/html/sample_descriptions/exerciseplanner.htm

ExercisePlanner

/ 40

예를들어…

6

window.addEventListener('tizenhwkey', function(e) { if (e.keyName == 'back') { if ($.mobile.popup.active) { $.mobile.popup.active.close(); } else if ($.mobile.activePage.attr('id') === 'one') { tizen.application.getCurrentApplication().exit(); } else { history.back(); } } });

/ 40

예를들어…

7



jQuery�� Mobile

Tizen�� APIs

HTML5�� Interfaces

/ 40


8

/ 40

정적분석을 위해서는 모델링이 필요하다.

9



jQuery�� Mobile

Tizen�� APIs

HTML5�� Interfaces

/ 40


10

/ 4011

SAFE에는 다양한 모델링이 있다.

Model Built-in DOM jQuery Tizen

Scala O O O O

TypeScript X X O X

WebIDL X X X O

/ 4012

SAFE에는 다양한 모델링이 있다.

Model Built-in DOM jQuery Tizen

Scala O O O O

TypeScript X X O X

WebIDL X X X O

자동�� 모델링�� /�� 타입�� 기술�� 언어

수동�� 모델링�� /�� 구현�� 언어

/ 40

모델링 기법에는 장단점이 있다.

13

$(…)

/ 40


14

$(…)

(selector: string, context?: Element|JQuery): JQuery; (element: Element): JQuery; (elementArray: Element[]): JQuery; (object: {}): JQuery; (object: JQuery): JQuery; (): JQuery; (html: string, ownerDocument?: Document): JQuery; (html: string, attributes: Object): JQuery; (callback: Function): JQuery;

◀�� Scala

▼�� TypeScript

/ 40

자동 모델링

- IDL로 쓰인 스펙 필요

- 자세한 모델링 불가능

+ 자동으로 모델링

수동 모델링

- 노동 집약적

- 분석기에 붙박이

+ 자세한 모델링 가능

15


/ 40


16

/ 40

모델링을 조화롭게 같이 사용할 수는 없을까?

• 가정

- 각 모델링은 실제 자바스크립트 코드의 부분 집합을 구현한다.

- 각 모델링은 그 부분 집합에 대해 올바른 모델링을 하고 있다.

17

/ 40

조화롭게 합치고 싶은 것은?

• 각각의 모델링이 가지는 힙과 함수 모델링

$:{ css:l1 on:l2 ... }

수동 자동

$:{ mobile:{ popup:l4 ... } on:l3 ... }

+

수동 자동

정확한semantic

함수 인자의 타입/개수 검사

callback 함수 호출

+

18

/ 40

힙을 병합하자

19

/ 40

모든 원소를 가지게 합치기

$ $.mobile $.mobile.popup

$.on+

$ $.mobile $.mobile.popup $.css $.on

=$

$.css $.on

$

mobileon

popup

$

css on

$

mobilecss on

popup

20

/ 40

$ $.mobile $.mobile.popup

$.on

각 모델링의 location도 조화롭게 합치기

+$ $.mobile $.mobile.popup $.css $.on

=$

$.css $.on

2121

$

mobileon

popup

#4

#5#6

#7

$

css on

#1

#2 #3

$

mobilecss on

popup

#8

#9 #10 #11

#12

/ 40


Analyzer

Semantics

MMU HeapVirtual Address Physical Address

Values

22

$

mobilecss on

popup

#8

#9 #10 #11

#12

$

mobileon

popup

#4

#5#6

#7

$

css on

#1

#2 #3

/ 40


Analyzer

Semantics


Values

23

$

mobilecss on

popup

#8

#9 #10 #11

#12

$

mobileon

popup

#4

#5#6

#7

$

css on

#1

#2 #3

#1 ↦ #8 #2 ↦ #10 #3 ↦ #11 #4 ↦ #8 #5 ↦ #9 #6 ↦ #11 #7 ↦ #12

/ 40

함수를 병합하자

24

/ 40

함수 병합은 어떻게?

1. 동일한 함수를 매칭

-객체 트리 구조를 이용한 매칭

-수동 함수 모델링을 이용한 매칭

2. 함수의 병합

25

/ 40

객체 트리 구조를 이용한 함수 매칭

원소

수동 모델링 함수

객체

자동 모델링 함수

이름a b c

d

e f

26

병합 모델링 함수

/ 40


수동 모델링 자동 모델링

$

27

support get@fun

bind get

support@fun

scriptEval

getbind

/ 40


support get

28

@fun

scriptEval

bind get

get

병합 모델링

• 한 모델링에서 표현한 함수는 그대로 유지

• 서로 같은 함수를 모델링하고 있을 때 병합

• 원소가 객체일 경우 재귀적으로 매칭 진행

bind

/ 40


• 한 모델링에서 표현한 함수는 그대로 유지

• 서로 같은 함수를 모델링하고 있을 때 병합

• 원소가 객체일 경우 재귀적으로 매칭 진행

29

병합 모델링

support get@fun

scriptEval

bind get

bindget

/ 40

수동 함수 모델링을 이용한 매칭

JQuery

String

• 자동 모델링 함수의 인자를 수동 모델링 함수에 넣어서 정적 분석

• 수동 모델링 함수의 반환 객체와 자동 모델링 함수의 반환 객체를 기준으로 매칭 다시 진행

30


/ 40


JQuery

String

• 자동 모델링 함수의 인자를 수동 모델링 함수에 넣어서 정적 분석

• 수동 모델링 함수의 반환 객체와 자동 모델링 함수의 반환 객체를 기준으로 매칭 다시 진행

31

객체


/ 40


support get

32

@fun

scriptEval

bind get

병합 모델링

/ 40

함수 병합

33

call

entry

exit

after-call

entry

exit

더 정확한 의미

인자 개수/타입 검사

콜백 함수 호출

/ 40

병합 모델

34

API Spec. Model Builder

Model ModelModelModel

Model Merger

Merged Model

Address Map

Merged Heap

Global Table

Analyzer

Semantics


Values

Analysis Result

/ 40

병합 모델의 특성

• 힙 병합은 올바르다

• 병합 후 객체가 가지는 원소의 집합은 기존 객체들이 가지는 원소들의 합집합과 동일

• 함수 병합은 효과적이다

- 동일한 의미를 가지는 함수를 매칭하고 각 모델링 함수의 장점을 살려 병합

35

/ 40

실제 분석 결과

• Scala 모델은 모든 API를 구현

• TypeScript 모델은 jQuery API를 구현

• WIDL 모델은 Tizen API를 구현

36

/ 40


• Tizen 샘플 웹 어플리케이션 23가지 중 9가지를 선별하여 분석 (선별 기준 - API의 사용 유무)

37

/ 40


• 기존 모델들이 분석하는 함수 포함 / 더 많은 함수 분석

• 기존 모델들이 검출한 이슈 포함 / 이슈 검출 능력 향상

38

/ 40

결론

• 힙과 함수를 병합하여 다양한 모델들을 조화롭게 사용하는 분석을 제시 및 구현

• Tizen에서 제공하는 샘플 웹 어플리케이션을 기반으로 실험을 진행

• 모델 병합 후 각각의 모델로 분석하였을 때보다 더 많은 함수를 분석하고 기존의 이슈들을 모두 포함 및 이슈 검출 능력 향상

39

/ 40

끝40

javascript 웹 앱 정적분석을 위해 다양한...

Documents