From 33eec6065ffa2307827b8a40414ba876eeadc71d Mon Sep 17 00:00:00 2001 From: Leonardo YongUk Kim Date: Sat, 11 Apr 2015 04:44:56 +0900 Subject: [PATCH 1/2] Create 19-dangerously-set-inner-html.ko-KR.md Based on 2e1ccae2758e61ab86bc79bdcac0d61747065a4a --- tips/19-dangerously-set-inner-html.ko-KR.md | 24 +++++++++++++++++++++ 1 file changed, 24 insertions(+) create mode 100644 tips/19-dangerously-set-inner-html.ko-KR.md diff --git a/tips/19-dangerously-set-inner-html.ko-KR.md b/tips/19-dangerously-set-inner-html.ko-KR.md new file mode 100644 index 00000000..0263ff7a --- /dev/null +++ b/tips/19-dangerously-set-inner-html.ko-KR.md @@ -0,0 +1,24 @@ +--- +id: dangerously-set-inner-html-ko-KR +title: Dangerously Set innerHTML +layout: tips +permalink: dangerously-set-inner-html-ko-KR.html +prev: children-undefined-ko-KR.html +--- + +부적절히 `innerHTML`를 사용하면 [사이트 간 스크립팅 (XSS)](http://en.wikipedia.org/wiki/Cross-site_scripting) 공격에 노출됩니다. 화면의 사용자 입력을 정제하다(sanitize) 오류를 내기 쉬우며, 적절하게 사용자의 입력을 정제하지 못하면 인터넷 상 [웹 취약점의 원인](http://owasptop10.googlecode.com/files/OWASP%20Top%2010%20-%202013.pdf)이 됩니다. + +우리 설계철학은 안전을 "쉽게" 얻는 것입니다. 개발자는 그들의 의도를 명시적으로 알려야만 "안전하지 않는" 연산을 할 수 있습니다. `dangerouslySetInnerHTML` prop의 이름은 의도적으로 무섭게 만든 것인데, prop 값은 문자열이 아닌 객체이고 정제된 데이터를 지정하는데 쓸 수 있습니다. + +보안 영향을 완전히 이해했다면, 데이터에서 나쁜 부분을 완전히 제거하고 `__html` 키와 정제된 값을 담은 새로운 객체를 만듭시다. 여기에 JSX 문법을 쓴 예제가 있습니다. + +```js +function createMarkup() { return {__html: 'First · Second'}; }; +
+``` + +부주의하게 `
`를 쓰면 `getUsername()`가 `{__html: ''}` 객체 대신 순수 `문자열`을 반환하기 때문에 렌더링이 안되는 것이 요점입니다. `{__html:...}` 문장 속의 의도는 "type/taint" 같이 숙고하는 것입니다. 함수는 이 래퍼 객체를 사용하여 정제된 객체를 반환할 수 있는 데 뒤 따라오는 `dangerouslySetInnerHTML`에 표시할 데이터를 전달합니다. 이런 이유로 `
`의 형태의 코드를 작성하는 것은 추천하지 않습니다. + +이 기능성은 주로 DOM 문자열을 다루는 라이브러리와 협동하기 위한 목적으로 제공하며, 포함할 HTML은 잘 정제되어야 합니다. (예: XML 검증을 통과) + +더 완벽한 사용 예제를 보려면 [대문](/)의 최신 예제를 참조하세요. From b0d161dd5e2269c9a3dd853422599c05f3f7f81c Mon Sep 17 00:00:00 2001 From: Shim Won Date: Fri, 17 Apr 2015 17:14:22 +0900 Subject: [PATCH 2/2] Update Translation to 6a7a4fd --- docs/08-working-with-the-browser.ko-KR.md | 4 ++-- docs/10.4-test-utils.ko-KR.md | 2 +- docs/11-advanced-performance.ko-KR.md | 4 ++-- docs/tutorial.ko-KR.md | 20 +++++++++----------- 4 files changed, 14 insertions(+), 16 deletions(-) diff --git a/docs/08-working-with-the-browser.ko-KR.md b/docs/08-working-with-the-browser.ko-KR.md index 3772799b..07682959 100644 --- a/docs/08-working-with-the-browser.ko-KR.md +++ b/docs/08-working-with-the-browser.ko-KR.md @@ -105,12 +105,12 @@ _마운트된_ 합성 컴포넌트들은 다음과 같은 메소드를 지원합 페이스북에서 우리는 IE8을 포함한 구식 브라우저를 지원합니다. 미래지향적인 JS를 작성할 수 있도록 우리는 polyfill을 오랫동안 써왔습니다. 이는 우리의 코드베이스에 구식 브라우저를 위한 코드뭉치를 흩뿌려 놓을 필요가 없으며 그럼에도 우리의 코드가 "잘 작동"할 것이라 예상할 수 있음을 의미합니다. 예를 들어, `+new Date()` 대신에 그냥 `Date.now()`를 사용할 수 있습니다. 오픈소스 React는 우리가 내부에서 사용하는것과 동일하기 때문에, 우리는 이를 통해 미래지향적인 JS를 사용하는 철학을 전달했습니다. -그 철학에 더하여, 우리는 또한 JS 라이브러리의 저자로서 polyfill을 라이브러리에 포함해서 배포하지 않습니다. 만약 모든 라이브러리가 이런 짓을 하면, 같은 polyfill을 여러 번 내리게 되어 쓸모없이 크기만 차지하는 죽은 코드들을 만들 것 입니다. 당신의 제품이 구식 브라우저를 지원해야한다면, [es5-shim](https://github.com/kriskowal/es5-shim) 같은 녀석을 사용할 기회가 있었을 겁니다. +그 철학에 더하여, 우리는 또한 JS 라이브러리의 저자로서 polyfill을 라이브러리에 포함해서 배포하지 않습니다. 만약 모든 라이브러리가 이런 짓을 하면, 같은 polyfill을 여러 번 내리게 되어 쓸모없이 크기만 차지하는 죽은 코드들을 만들 것 입니다. 당신의 제품이 구식 브라우저를 지원해야한다면, [es5-shim](https://github.com/es-shims/es5-shim) 같은 녀석을 사용할 기회가 있었을 겁니다. ### Polyfill은 구식 브라우저를 지원하기 위해 필요하다 -[kriskowal's es5-shim](https://github.com/kriskowal/es5-shim)의 `es5-shim.js`는 React에 필요한 다음의 기능을 제공합니다: +[kriskowal's es5-shim](https://github.com/es-shims/es5-shim)의 `es5-shim.js`는 React에 필요한 다음의 기능을 제공합니다: * `Array.isArray` * `Array.prototype.every` diff --git a/docs/10.4-test-utils.ko-KR.md b/docs/10.4-test-utils.ko-KR.md index 4db40ce6..94d2fb12 100644 --- a/docs/10.4-test-utils.ko-KR.md +++ b/docs/10.4-test-utils.ko-KR.md @@ -173,7 +173,7 @@ ReactComponent shallowRenderer.getRenderOutput() result = renderer.getRenderOutput(); expect(result.type).toBe('div'); expect(result.props.children).toEqual([ - Title + Title, ]); ``` diff --git a/docs/11-advanced-performance.ko-KR.md b/docs/11-advanced-performance.ko-KR.md index 4fba6c29..85abde74 100644 --- a/docs/11-advanced-performance.ko-KR.md +++ b/docs/11-advanced-performance.ko-KR.md @@ -47,7 +47,7 @@ React가 C6에만 DOM 변경을 수행한 것을 확인하세요. 이는 필연 ```javascript React.createClass({ - propsTypes: { + propTypes: { value: React.PropTypes.string.isRequired }, @@ -71,7 +71,7 @@ shouldComponentUpdate: function(nextProps, nextState) { ```javascript React.createClass({ - propsTypes: { + propTypes: { value: React.PropTypes.object.isRequired }, diff --git a/docs/tutorial.ko-KR.md b/docs/tutorial.ko-KR.md index 54cc1600..85dae665 100644 --- a/docs/tutorial.ko-KR.md +++ b/docs/tutorial.ko-KR.md @@ -214,7 +214,7 @@ var CommentList = React.createClass({ Markdown은 텍스트를 포맷팅하는 간단한 방식입니다. 예를 들어, 별표(`*`)로 텍스트를 둘러싸는 것은 강조의 의미입니다. -먼저 서드파티 라이브러리인 **Showdown**을 애플리케이션에 추가합니다. 이 JavaScript 라이브러리는 Markdown 텍스트를 HTML 문법으로 변환해줍니다. head 태그안에 스크립트 태그를 추가해 주세요. (React playground에는 이미 포함되어 있습니다): +먼저 서드파티 라이브러리인 **marked**를 애플리케이션에 추가합니다. 이 JavaScript 라이브러리는 Markdown 텍스트를 HTML 문법으로 변환해줍니다. head 태그안에 스크립트 태그를 추가해 주세요. (React playground에는 이미 포함되어 있습니다): ```html{7} @@ -223,15 +223,14 @@ Markdown은 텍스트를 포맷팅하는 간단한 방식입니다. 예를 들 - + ``` 다음은, 댓글 텍스트를 Markdown으로 전환하고 출력해 봅시다. -```javascript{2,10} +```javascript{9} // tutorial6.js -var converter = new Showdown.converter(); var Comment = React.createClass({ render: function() { return ( @@ -239,25 +238,24 @@ var Comment = React.createClass({

{this.props.author}

- {converter.makeHtml(this.props.children.toString())} + {marked(this.props.children.toString())}
); } }); ``` -우리가 한 일이라고는 Showdown 라이브러리를 호출한 것 뿐입니다. Showdown이 `this.props.children`에서 텍스트를 읽어들여 처리할 수 있도록 React 형식의 텍스트(React's wrapped text)를 단순 텍스트(raw string)으로 전환하기 위해 명시적으로 `toString()`을 호출했습니다. +우리가 한 일이라고는 marked 라이브러리를 호출한 것 뿐입니다. marked가 `this.props.children`에서 텍스트를 읽어들여 처리할 수 있도록 React 형식의 텍스트(React's wrapped text)를 단순 텍스트(raw string)으로 전환하기 위해 명시적으로 `toString()`을 호출했습니다. 하지만 여기엔 문제가 있습니다! 우리는 HTML 태그들이 정상적으로 렌더되길 원하지만 브라우저에 출력된 결과물은 "`

```또 다른`` 댓글입니다`

`"처럼 태그가 그대로 보일것입니다. React는 이런 식으로 XSS 공격을 예방합니다. 우회할 방법이 있긴 하지만 프레임워크는 사용하지 않도록 경고하고 있습니다: -```javascript{5,11} +```javascript{4,10} // tutorial7.js -var converter = new Showdown.converter(); var Comment = React.createClass({ render: function() { - var rawMarkup = converter.makeHtml(this.props.children.toString()); + var rawMarkup = marked(this.props.children.toString(), {sanitize: true}); return (

@@ -270,9 +268,9 @@ var Comment = React.createClass({ }); ``` -이는 의도적으로 생(raw) HTML을 넣기 힘들게 하려고 만든 특별한 API지만 Showdown을 사용하기 위해 이 백도어를 활용합시다. +이는 의도적으로 생(raw) HTML을 넣기 힘들게 하려고 만든 특별한 API지만 marked를 사용하기 위해 이 백도어를 활용합시다. -**잊지 마세요:** 이 기능은 Showdown이 안전한 것으로 믿고 사용하는 것입니다. +**잊지 마세요:** 이 기능은 marked가 안전한 것으로 믿고 사용하는 것입니다. 이 경우, 소스에 있는 그대로 넘겨 주는 대신, 모든 HTML 마크업을 이스케이프하도록 marked에게 `sanitize: true`를 넘겨 주었습니다. ### 데이터 모델 연결하기