Mustache.js: ๋ชจ๋“  ๊ฐ’์„ ์ด์Šค์ผ€์ดํ”„ ํ•ด์ œ

์— ๋งŒ๋“  2012๋…„ 08์›” 14์ผ  ยท  14์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: janl/mustache.js

html์„ ์ „ํ˜€ ์ด์Šค์ผ€์ดํ”„ํ•˜์ง€ ์•Š๋Š” ์˜ต์…˜์„ ์ถ”๊ฐ€ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ?

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

๋‚˜๋Š” ๊ทธ๊ฒƒ์„ ํ…Œ์ŠคํŠธํ•˜์ง€ ์•Š์•˜์ง€๋งŒ ๋งค๋‰ด์–ผ ํŽ˜์ด์ง€์— ๋”ฐ๋ฅด๋ฉด :
All variables are HTML escaped by default. If you want to return unescaped HTML, use the triple mustache: {{{name}}}.
๊ทธ๋ž˜๋„ ์ž‘๋™ํ•˜์ง€ ์•Š์œผ๋ฉด ๋‹จ์ˆœํžˆ ์ž…๋ ฅ์„ ์ด์Šค์ผ€์ดํ”„ ์ฒ˜๋ฆฌํ•˜์ง€ ์•Š๊ณ  ๋ฐ˜ํ™˜ํ•˜๋Š” ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋ชจ๋“  14 ๋Œ“๊ธ€

๋‚˜๋Š” ๊ทธ๊ฒƒ์„ ํ…Œ์ŠคํŠธํ•˜์ง€ ์•Š์•˜์ง€๋งŒ ๋งค๋‰ด์–ผ ํŽ˜์ด์ง€์— ๋”ฐ๋ฅด๋ฉด :
All variables are HTML escaped by default. If you want to return unescaped HTML, use the triple mustache: {{{name}}}.
๊ทธ๋ž˜๋„ ์ž‘๋™ํ•˜์ง€ ์•Š์œผ๋ฉด ๋‹จ์ˆœํžˆ ์ž…๋ ฅ์„ ์ด์Šค์ผ€์ดํ”„ ์ฒ˜๋ฆฌํ•˜์ง€ ์•Š๊ณ  ๋ฐ˜ํ™˜ํ•˜๋Š” ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์˜ˆ, ํ˜„์žฌ ๋™์ž‘์ด์ง€๋งŒ ์ด์— ๋Œ€ํ•œ ์ œ ์‚ฌ์šฉ ์‚ฌ๋ก€์—๋Š” ๋งค์šฐ ์‹ ๋ขฐํ•  ์ˆ˜ ์žˆ๋Š” ์ž…๋ ฅ๊ณผ ๋งŽ์€ ํŠน์ˆ˜ ๋ฌธ์ž๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.

๋‚˜๋Š” ์ด ๋ถ€๋ถ„์„ ์–ธ๊ธ‰ํ•˜๊ณ  ์žˆ์—ˆ๋‹ค.
If you want to return unescaped HTML, use the triple mustache: {{{name}}}.
๋”ฐ๋ผ์„œ ๋ณ€์ˆ˜๋ฅผ ์ด์Šค์ผ€์ดํ”„ํ•˜์ง€ ์•Š์œผ๋ ค๋ฉด ์ด์ค‘ ์ฝง์ˆ˜์—ผ ๋Œ€์‹  ์‚ผ์ค‘ ์ฝง์ˆ˜์—ผ์„ ์‚ฌ์šฉํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.
ํŽธ์ง‘: ๋‚˜๋Š” ๊ทธ๊ฒƒ์„ ํ…Œ์ŠคํŠธํ–ˆ๊ณ  ์ด๊ฒƒ์€ ์ด ๊ตฌํ˜„์—์„œ ์˜ฌ๋ฐ”๋ฅด๊ฒŒ ๊ตฌํ˜„๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

์˜ˆ, ๊ธฐ๋ณธ ๋™์ž‘์„ ๋ณ€๊ฒฝํ•˜๋Š” ์œ ์šฉํ•œ ๋ฐ”๋กœ ๊ฐ€๊ธฐ๊ฐ€ ์žˆ๋Š”์ง€ ๊ถ๊ธˆํ•ฉ๋‹ˆ๋‹ค.

์ผ๋ถ€ ๊ตฌํ˜„์€ ๊ณผ๊ฑฐ์— ์—ญ ์ด์Šค์ผ€์ดํ”„ pragma๋ฅผ ์ง€์›ํ–ˆ์Šต๋‹ˆ๋‹ค(mustache.php v1.x, ruby โ€‹โ€‹v0.8ish). ์ด๊ฒƒ์€ ๋ณธ์งˆ์ ์œผ๋กœ {{ foo }} ์™€ {{{ foo }}} ์˜ ์˜๋ฏธ๋ฅผ ๋ฐ”๊ฟจ์Šต๋‹ˆ๋‹ค. ini ํŒŒ์ผ๊ณผ ๊ฐ™์€ ๋น„-html ์‚ฌ์šฉ์— ์œ ์šฉํ•ฉ๋‹ˆ๋‹ค. ์ด ๊ฒฝ์šฐ html ์—”ํ„ฐํ‹ฐ๋ฅผ ์ด์Šค์ผ€์ดํ”„ํ•˜๋Š” ๊ฒƒ์ด ์˜๋ฏธ๊ฐ€ ์—†๊ณ  ์ถ”๊ฐ€ ์ฝง์ˆ˜์—ผ์„ ๋งŽ์ด ์ ˆ์•ฝํ•  ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค.

Mustache.php v2.x๋Š” ์ด pragma๋ฅผ ์ง€์›ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๋Œ€์‹  ์‚ฌ์šฉ์ž๊ฐ€ ๋Œ€์ฒด ์ด์Šค์ผ€์ดํ”„ ์ฝœ๋ฐฑ์„ ์ „๋‹ฌํ•  ์ˆ˜ ์žˆ๋„๋ก ์‚ฌ์šฉ์ž ์ง€์ • '์ด์Šค์ผ€์ดํ”„' ์˜ต์…˜์„ ์„ ํƒํ–ˆ์Šต๋‹ˆ๋‹ค. function($text) { return $text; } ์ „๋‹ฌํ•˜๋ฉด ํƒˆ์ถœ์ด ๊ธˆ์ง€๋ฉ๋‹ˆ๋‹ค.

ํ , ์ œ ์œ ์Šค ์ผ€์ด์Šค์— ๋”ฑ ๋งž์Šต๋‹ˆ๋‹ค. mustache.js์—์„œ ๊ทธ๋ ‡๊ฒŒ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ? ๊ทธ๋ ‡๋‹ค๋ฉด ํ•ด๋‹น ๊ธฐ๋Šฅ์„ ์–ด๋””์— ์ „๋‹ฌํ•  ๊ฒƒ์ž…๋‹ˆ๊นŒ?

๋งž์Šต๋‹ˆ๋‹ค. OWASP ์ง€์นจ์„ ๋”ฐ๋ฅด๋Š” ๊ฒƒ์€ ๊ดœ์ฐฎ์ง€๋งŒ ํ•ญ์ƒ ํƒˆ์ถœํ•˜๋Š” ๊ฒƒ์€ ๊ฒฝ์šฐ์— ๋”ฐ๋ผ ์œ ์šฉํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์ด ๋ฌธ์ œ๊ฐ€ ์™„๋ฃŒ๋˜๊ธฐ๊นŒ์ง€์˜ ETA๊ฐ€ ์žˆ์Šต๋‹ˆ๊นŒ?

์„ค์น˜์˜ ํŒŒ์„œ์—์„œ {{{ ์™€ {{ ๋ฅผ ๋ฐ”๊พธ๋Š” ๊ฒƒ์ด ๋” ์‰ฝ์ง€ ์•Š์„๊นŒ์š”?

ํ˜„์žฌ ๋‚˜๋Š” ๊ทธ๋ƒฅ ์‹คํ–‰ :

template.replace(/\{\{([^\}]*)\}\}/g, '{{{$1}}}');

์‹คํ–‰ํ•˜๊ธฐ ์ „์— ๋ชจ๋“  ํ…œํ”Œ๋ฆฟ์—์„œ ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค. ์‹œ์Šคํ…œ์ด ๋” ๋งŽ์ด ๋‚ด์žฅ๋˜์–ด ์žˆ์œผ๋ฉด ์ข‹์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๋‚˜๋Š” @bobthecow ์˜ ์ œ์•ˆ์„ ์•„์ฃผ ์ข‹์•„ํ•ฉ๋‹ˆ๋‹ค. ํ•„์š”ํ•œ ๊ฒฝ์šฐ ๋‹ค๋ฅธ ๊ฒƒ์„ ํ”ผํ•  ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด XML์ด ์•„๋‹Œ ํ˜•์‹๊ณผ ๊ฐ™์€ JSON์ด ์žˆ๋Š” ๊ฒฝ์šฐ ๋”ฐ์˜ดํ‘œ/์‰ผํ‘œ/์ฝœ๋ก  ๋“ฑ์„ ์ด์Šค์ผ€์ดํ”„ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

@janl ๋‘ ๊ฐ€์ง€ ์‹œ๋‚˜๋ฆฌ์˜ค์—์„œ ๋™์ผํ•œ ํ…œํ”Œ๋ฆฟ์„ ๋ Œ๋”๋ง

@bobthecow ์šฐ๋ฆฌ๋Š” mustache.js์—์„œ ๋™์ผํ•œ ์ ‘๊ทผ ๋ฐฉ์‹์„ ์‰ฝ๊ฒŒ ์ทจํ•˜๊ณ  ๋ชจ๋“  ์ด์Šค์ผ€์ดํ”„์— ๋Œ€ํ•ด Mustache.escapeHtml์˜ ๋‚ด๋ณด๋‚ธ ๋ฒ„์ „์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋ฅผ ํ†ตํ•ด ์‚ฌ์šฉ์ž๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์€ ์ž‘์—…์„ ์ˆ˜ํ–‰ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Mustache.escapeHtml = function (text) { return text; }

์œ ์šฉํ• ๊นŒ์š”? ๋ฌผ๋ก  ํ›„์† ํ˜ธ์ถœ์—์„œ ์ด์Šค์ผ€์ดํ”„๊ฐ€ ์ œ๋Œ€๋กœ ์ž‘๋™ํ•˜๋„๋ก ํ•˜๋ ค๋ฉด ํ•จ์ˆ˜ ๊ฐ’์„ ์žฌ์„ค์ •ํ•˜๋Š” ๋ฐ ์ฃผ์˜ํ•ด์•ผ ํ•˜๋ฉฐ ํŠธ๋ฆฌํ”Œ ์Šคํƒ์œผ๋กœ ์ด์Šค์ผ€์ดํ”„๋ฅผ ๊ฒฐ์ •ํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค.

:+1: ๋‚˜๋Š” ๊ทธ๊ฒƒ์„ ํŒŒํ—ค์นœ๋‹ค. ๋‚ด๊ฐ€ ๋งํ•  ์ˆ˜ ์žˆ๋Š” ํ•œ, ์ฃผ์š” ์‚ฌ์šฉ ์‚ฌ๋ก€๋Š” HTML์ด ์•„๋‹Œ ๋ฌธ์„œ์ด๊ธฐ ๋•Œ๋ฌธ์— ์ด์Šค์ผ€์ดํ”„๋ฅผ ์™„์ „ํžˆ ๋น„ํ™œ์„ฑํ™”ํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๋‚˜๋Š” ์ด์Šค์ผ€์ดํ”„/noescape๋ฅผ ๋ฐ”๊พธ๋Š” ๋ฐ ๋งŽ์ด ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š” ๊ฒƒ์œผ๋กœ ๋ณด์ž…๋‹ˆ๋‹ค(์ด ๋•Œ๋ฌธ์— Mustache.php v2์—์„œ ๊ตฌํ˜„ํ•˜์ง€๋„ ์•Š์•˜์Šต๋‹ˆ๋‹ค).

์˜ˆ, ๊ทธ๊ฒƒ์€ ํ™•์‹คํžˆ ๋‚ด ์‚ฌ์šฉ ์‚ฌ๋ก€๋ฅผ ์ถฉ์กฑ์‹œํ‚ฌ ๊ฒƒ์ด๋ฉฐ ๋‹ค๋ฅธ ์‚ฌ๋žŒ๋“ค์ด ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์„ ์ƒ์ƒํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Mustache.escapeHtml = function (text) { return text.replace(/\"/g, '\\"'; }

๋ฌธ์ž์—ด์„ ์ด์Šค์ผ€์ดํ”„ํ•ฉ๋‹ˆ๋‹ค. ๋˜๋Š” ํ™”์ดํŠธ๋ฆฌ์ŠคํŠธ ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•  ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ฐ„๋‹จํžˆ ๋งํ•ด์„œ ๋‚ด๊ฐ€ ์ƒ๊ฐํ•  ์ˆ˜ ์žˆ๋Š” ๋ชจ๋“  ์‚ฌ์šฉ ์‚ฌ๋ก€๋ฅผ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋‚˜๋Š” ๊ทธ๊ฒƒ์„ ํ…Œ์ŠคํŠธํ•˜์ง€ ์•Š์•˜์ง€๋งŒ ๋งค๋‰ด์–ผ ํŽ˜์ด์ง€์— ๋”ฐ๋ฅด๋ฉด :
All variables are HTML escaped by default. If you want to return unescaped HTML, use the triple mustache: {{{name}}}.
๊ทธ๋ž˜๋„ ์ž‘๋™ํ•˜์ง€ ์•Š์œผ๋ฉด ๋‹จ์ˆœํžˆ ์ž…๋ ฅ์„ ์ด์Šค์ผ€์ดํ”„ ์ฒ˜๋ฆฌํ•˜์ง€ ์•Š๊ณ  ๋ฐ˜ํ™˜ํ•˜๋Š” ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์—„์ฒญ ๊ณ ๋งˆ์›Œ!! ์ด๊ฒƒ์€ ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค.

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰