pagedesk¶

/usr/local/m2/setting.json 다음 영역에 대해 기술한다.

{
  "functions": {
    "contents": {
      "pagedesk": {
        ...
      }
    }
  }
}

How to use¶

명령어 리스트¶

명령어	파라미터	동작
`edit`	`default`	기본편집 기능인 `replace` , `dom` 가공을 수행한다. https://example.com/view.html/pagedesk/edit/default
`edit`	`query`	`POST` 메소드를 이용하여 가공된 HTML을 응답받는다. POST /pagedesk/edit/query HTTP/1.1 Host: example.com Content-Type: text/plain Content-Length: 2043 <html> <body> ... </body> </html>
`template`	`[name]`	HTML 원본이 없는 경우, 사전 정의된 템플릿으로 HTML을 생성한다. {url}/pagedesk/edit/default/template/{name} # 이미지 원본 요청시 템플릿을 사용하여, HTML을 생성한다. https://example.com/image.jpg/pagedesk/edit/default/template/imgtpl
`extract`	`default` `selector` `attribute` `includeSelf`	원본 HTML 중 셀렉터의 영역을 추출하여, HTML을 생성한다. # default 옵션 사용시 dom.extract 설정에 따른다. https://example.com/view.html/pagedesk/edit/default/extract/default # 인라인 명령시 설정값은 무시한다. 물론 설정 활성화는 필수이다. # :id - id 영역추출 # .class - class 영역추출 # tag - tag 영역추출 https://example.com/view.html/pagedesk/edit/default/extract/selector=:id # attribute https://example.com/view.html/pagedesk/edit/default/extract/selector=iframe;attribute=srcdoc # includeSelf https://example.com/view.html/pagedesk/edit/default/extract/selector=div;includeSelf=true

함수 결과물 안내¶

이 함수는 HTML 원본을 편집하는 목적으로 개발되었으며, 함수가 만들어 낸 결과물의 첫 줄에 다음과 같은 주석이 포함된다.

# Content-Type: text/html

<!-- // through m2 pagedesk // -->
<html>
  <head>
    ...
  </head>
  <body>
    ...
  </body>
</html>

# Content-Type: application/json

{
  "prddesc": "<!-- // through m2 pagedesk // --><html><head></head><body></body></html>"
}

위 주석을 통해 pagedesk가 만들어낸 결과물임을 태깅한다.
만약 pagedesk가 획득한 원본에 위 주석이 존재한다면, 이미 처리된 것으로 간주하여 추가 편집하지 않는다.

meta¶

"meta" : {
  "enable" : false,
  "keyword": "pagedesk",
  "maxSourceSize": 1,
  "maxDomSourceSize": 0
}

enable (기본: false): pagedesk 활성화
keyword (기본: pagedesk): pagedesk 키워드
maxSourceSize (기본: 1MB): 처리가능한 최대 원본 텍스트 크기 (단위: MB)
maxDomSourceSize (기본: 0MB): dom 기능동작이 가능한 최대 원본 텍스트 크기 (단위: MB). 0 인 경우 maxSourceSize 를 사용한다.

template¶

클라이언트 요청 시 원본없이 요청 정보만으로 사전 정의된 문서를 생성한다.

"template": {
  "enable": false,
  "list": [
    {
      "name": "imgtpl",
      "type": "html",
      "body": "<div><img src='${URL}'></div>"
    }
  ]
}

enable (기본: false)

기능 활성화

list¶

템플릿 정의 후 /template/[name] 명령어를 통해 선택한다.

name

템플릿 명

type (기본: html)

문서 타입을 정의한다.

html 요청 Content-Type을 text/html 로 정의한다.
json 요청 Content-Type을 application/json 으로 정의한다.

body

문서 본문을 정의한다.
아래 예약어를 사용할 수 있다.

예약어

설명

표현 예

실행 예

URL

요청 URL

${URL}

https://foo.com/dir/image.jpg?seq=1234

예약어	설명	표현 예	실행 예
URL	요청 URL	`${URL}`	`https://foo.com/dir/image.jpg?seq=1234`

replace¶

{
  "functions": {
    "contents": {
      "pagedesk": {
        "replace": {
          ...
        }
      }
    }
  }
}

pre¶

소스가 유입되는 시점에 문자열을 치환한다.

"pre": {
  "enable" : false,
  "list" : [
    {
        "src": "://foo.com/",
        "dest": "://new.foo.com/"
    },
    {
        "src" : ".bar.com/image/",
        "dest" : ".bar.com/s3/image/",
        "flags": "gi"
    }
  ]
}

enable (기본: false)

문자열 사전치환 활성화

list

문자열 치환 리스트

src: 대상 문자열
dest: 반환 문자열
flags (기본: g): 정규표현식 플래그

post¶

모든 가공이 완료된 후 응답되기 직전에 문자열을 치환한다.

"post": {
  "enable" : false,
  "list" : [
    {
        "src" : "://foo.com/",
        "dest" : "://new.foo.com/"
    },
    {
        "src" : ".bar.com/image/",
        "dest" : ".bar.com/s3/image/"
    }
  ]
}

enable (기본: false)

문자열 사후치환 활성화

list

문자열 치환 리스트

src: 대상 문자열
dest: 반환 문자열
flags (기본: g): 정규표현식 플래그

html¶

"enable" : false

enable (기본: false): 텍스트 html 문서를 인식한다. 이 모듈이 정상적으로 로딩되어야 dom 처리가 가능하다.

in¶

replace.pre 가 수행된 텍스트를 html 소스로 입력시킨다.

"in": {
  "at": null,
  "escaped": true
}

at: 텍스트가 HTML이 아닌 경우(i.e. JSON ), HTML의 위치 지시자
escaped: true 라면 소스 텍스트가 escape character 치환 처리가 된 것으로 인지하여 unescape 처리한다.

out¶

처리가 완료된 html의 출력형태를 구성한다.

"out": {
  "at": null,
  "escaped": true
}

at: 편집된 HTML을 소스 텍스트의 위치 지시자에 삽입한다. 이 값이 null 이라면 편집된 HTML이 출력 텍스트가 된다.
escaped: true 라면 소스 텍스트에 삽입전 escape 처리한다.

dom¶

DOM(Document Object Model)에 기반하여 태그를 추가/삭제한다.

{
  "functions": {
    "contents": {
      "pagedesk": {
        "dom": {
          ...
        }
      }
    }
  }
}

extract¶

extract 명령어 지원을 위한 설정. DOM 생성 직후 실행한다.

"extract" : {
  "enable": false,
  "selector": "#productDetail",
  "attribute": null,
  "includeSelf": false
}

enable (기본: false): 요소 추출 활성화
selector (기본: null): 추출 대상 셀렉터
attribute (기본: null): 대상 요소의 속성에서 추출
includeSelf (기본: false): 추출 대상에 셀프 요소 포함 여부

# 원본
<section>
  <iframe srcdoc="<div><img src=image.jpg></div>">
</section>

# selector=section
<iframe srcdoc="<div><img src=image.jpg></div>">

# selector=section; includeSelf=true
<section>
  <iframe srcdoc="<div><img src=image.jpg></div>">
</section>

# selector=iframe; attribute=srcdoc
<div><img src=image.jpg></div>

insert¶

"insert" : {
  "enable" : false,
  "action": "appendChild",
  "list" : [
    {
      "selector" : "#aa.b.c",
      "action" : "appendChild",
      "html" : "<p>this is sample</p>"
    }
  ]
}

enable (기본: false)

태그삽입 활성화

action (기본: appendChild)

태그삽입 위치

appendChild 대상 노드의 마지막 child로 삽입
insertBefore 대상 노드의 이전 sibling으로 삽입
insertAfter 대상 노드의 다음 sibling으로 삽입

wrapInnerHtml 대상 노드의 모든 자식 노드를 html 로 감싼다.

<div id="desc">
  <h3>Heading</h3>
  <p>Paragraph</p>
</div>

<div id="desc"> 하위 태그를 감싸고 싶다면 아래와 같이 설정한다.

{
  "selector" : "#desc",
  "action" : "wrapInnerHtml",      # wrapInnerHtml 에서는 닫는 태그를 넣지 않는다.
  "html" : "<div id="wrapdesc">"    # 넣더라도 무시된다.
}

위 설정을 통해 출력되는 DOM 은 다음과 같다.

<div id="desc">
  <div id="wrapdesc">
    <h3>Heading</h3>
    <p>Paragraph</p>
  </div>
</div>

list

태그 삽입 리스트

selector: 셀렉터
action: 이 아이템에만 적용할 태그 삽입위치. 생략시 상위 레벨의 action 값 사용.
html: 삽입할 html 태그

remove¶

"remove" : {
  "enable" : false,
  "includeChild" : true,
  "elements" : [
      "applet",
      "acronym",
      "bgsound",
      "dir",
      "frame",
      "frameset",
      "noframes",
      "hgroup",
      "isindex",
      "listing",
      "nextid",
      "noembed",
      "strike",
      "xmp",
      "basefont",
      "big",
      "blink",
      "center",
      "font",
      "marquee",
      "menu",
      "menuitem",
      "multicol",
      "nobr",
      "spacer",
      "tt",
      "rb",
      "rtc"
  ]
}

enable (기본: false): 태그삭제 활성화
includeChild (기본: true): 자식태그 포함 삭제 기본 값
elements: 삭제할 태그목록

Note

만약 태그별로 자식포함 includeChild 를 조절하고 싶다면 다음과 같이 객체표현으로 지정가능하다.

"remove" : {
  "enable" : false,
  "includeChild" : true,
  "elements" : [
      "applet",
      {"tag": "acronym", "includeChild" : false},
      "bgsound",
      {"tag": "dir", "includeChild" : true}
      ... (생략 )...
  ]
}

tags¶

{
  "functions": {
    "contents": {
      "pagedesk": {
        "dom": {
          "tags": {
            ...
          }
        }
      }
    }
  }
}

anchor¶

"anchor": {
  "enable": false,
  "enableLink": true,
  "target": {
    "framename": "_blank",
    "overwrite": true
  }
}

enable (기본: false)

<a> 태그 컨트롤

enableLink (기본: true)

false라면 href 속성을 삭제한다.

target (기본: _blank)

<a target> 속성을 처리한다.

framename
- null 인 경우 target을 정의하지 않는다.
- _blank|_self|_parent|_top 브라우저 예약어를 정의한다.
- [framename] 그 외 사전 정의된 프레임 명을 삽입한다.
overwrite
- true 항상 framename 을 삽입한다.
- false 원본 target 부재시 삽입한다.

matchingList (기본: [])

매칭 리스트

domain: 도메인 매칭 패턴

Note

만약 example.com 도메인에만 <a> 태그의 링크 기능을 설정하려면 matchingList 를 사용한다.

"anchor": {
  "enable": true,
  "enableLink": false,
  "matchingList": [
    {
      "domain": "(.*).example.com",
      "enableLink": true,
      "target": {
        "framename": "_self"
      }
    }
  ]
}

refctrl¶

상품기술서 등 HTML 본문에서 참조되는 임의의 리소스가 허가된 도메인이 아닐 경우(또는 해당할 경우) 참조되지 않도록 상품기술서를 변경한다.

"refctrl" : {
   "enable" : false,
   "mode" : "whitelist",
   "domains" : [ "www.youtube.com", "youtu.be" ],
   "tags" : [
      {
         "name" : "iframe",
         "attr" : "src",
         "action" : "removeTag"
      },
      {
         "name" : "embed",
         "attr" : "src",
         "action" : "removeAttr",
         "domains" : [ "www.safe.com" ],
      }
   ]
}

참조되는 리소스(i.e src 또는 href 등) 에 대해 domains 필드에 기반하여 리소스 참조 정책을 수정한다.

enable (기본: false)

참조소스 제어 활성화 설정. true 인 경우에만 참조 소스를 제어한다.

mode

도메인 목록인 domain 설정 사용 정책

whitelist (기본) 도메인 목록에 존재하지 않는 리소스 참조만 허용한다. 다시 말해 존재하지 않는다면 수정한다.
blacklist 도메인 목록에 존재하는 리소스만 수정한다.

domains

대상 도메인 목록. 문자열 배열이다.

tags

수정대상 태그와 속성, 정책 세트를 구성한다.

name 태그 명칭
attr 태그가 리소스를 참조하는 속성. 예를 들어 <iframe> 의 경우 src 속성이며, <a> 의 경우 href 이다.
action 수정 정책. 다음 값 중 하나를 가진다.
- removeTag (기본) 해당 태그를 삭제한다.
- removeAttr 해당 속성을 삭제한다.
- replaceAttr 속성명을 변경한다. 값은 그대로 유지된다.
- insertAttr 추가 속성을 삽입한다.
domains (기본: null) 이 태그.속성에 한정하여 적용할 도메인 목록

다음과 같이 HTML 내 알 수 없는 리소스를 <iframe> 으로 참조하는 경우 이를 제어하는 방법에 대해 설명한다.

<p>foo bar</p>
<iframe width="560" height="315" src="https://foo.com/embed/xW95ui6xDNM" title="Unknown video player" allowfullscreen></iframe>
<hr>

다음은 YouTube를 제외한 어떠한 <iframe> 참조도 허용하지 않는 설정이다.

# functions.contents.pagedesk.dom

 "refctrl" : {
     "enable" : true,
     "mode" : "whitelist",
     "domains" : [ "youtube.com", "www.youtube.com" ],
     "tags" : [
       {
           "name" : "iframe",
           "attr" : "src",
           "action" : "removeTag"
       }
     ]
 }

Note

위 설정에서 "mode" : "blacklist" 으로 설정한다면 YouTube에 대해서만 태그를 수정한다로 의미가 변경된다.

tags.action 값에 따라 태그가 수정 정책을 정교하게 구성한다.

"action" : "removeTag" 해당 태그를 삭제한다. 아래와 같이 <iframe> 태그가 삭제된다.
```
<p>foo bar</p>
<hr>
```
"action" : "removeAttr" 해당 태그의 속성을 삭제한다. 아래와 같이 attr 필드의 값으로 설정한 src 속성이 삭제된다.
```
<p>foo bar</p>
<iframe width="560" height="315" title="Unknown video player" allowfullscreen></iframe>
<hr>
```

"action" : "replaceAttr" 해당 태그의 속성 값을 교체한다. 아래와 같이 src 속성이 alt 속성으로 대체되었다.

<p>foo bar</p>
<iframe width="560" height="315" alt="https://foo.com/embed/xW95ui6xDNM" title="Unknown video player" allowfullscreen></iframe>
<hr>

대체 속성은 추가적으로 replaceAttr 필드를 참조한다.

{
   "name" : "iframe",
   "attr" : "src",
   "action" : "replaceAttr",
   "replaceAttr" : "alt"
}

"action" : "insertAttr" 설정된 속성을 추가로 태그에 삽입한다. 아래와 같이 추가속성을 통해 해당 태그가 노출되지 않도록 수정한다.

<p>foo bar</p>
<iframe width="560" height="315" src="https://foo.com/embed/xW95ui6xDNM" style="display:none;" alt="hidden by m2" title="Unknown video player" allowfullscreen></iframe>
<hr>

이를 위해 덧붙여질 insertAttr 속성 리스트를 추가 구성해야 한다.

{
   "name" : "iframe",
   "attr" : "src",
   "action" : "insertAttr",
   "insertAttr" : [
      {
        "name": "style",
        "value": "display:none;"
      },
      {
        "name": "alt",
        "value": "hidden by m2;"
      }
   ]
}