pagedesk

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

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

How to use

명령어 리스트

edit

https://example.com/view.html/pagedesk/edit/default

명령어

파라미터

동작

edit

default

query

기본편집 기능인 replace , dom 가공을 수행한다.

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

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

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;"
          }
       ]
    }