Successivamente, convertiamo il testo del commento da Markdown e scriviamolo:
Successivamente, convertiamo il testo del commento da Markdown e scriviamolo:
```javascript{9}
```javascript{4,10}
// tutorial6.js
// tutorial6.js
var Comment = React.createClass({
var Comment = React.createClass({
render: function() {
render: function() {
var md = new Remarkable();
return (
return (
<divclassName="comment">
<divclassName="comment">
<h2className="commentAuthor">
<h2className="commentAuthor">
{this.props.author}
{this.props.author}
</h2>
</h2>
{marked(this.props.children.toString())}
{md.render(this.props.children.toString())}
</div>
</div>
);
);
}
}
});
});
```
```
Tutto ciò che stiamo facendo qui è chiamare la libreria marked. Dobbiamo convertire `this.props.children` dal testo racchiuso di React a una stringa che marked è in grado di capire, quindi vi chiamiamo esplicitamente `toString()`.
Tutto ciò che stiamo facendo qui è chiamare la libreria remarkable. Dobbiamo convertire `this.props.children` dal testo racchiuso di React a una stringa che remarkable è in grado di capire, quindi vi chiamiamo esplicitamente `toString()`.
Ma c'è un problema! I nostri commenti visualizzati appaiono come segue nel browser: "`<p>`Questo è un `<em>`altro`</em>` commento`</p>`". Noi vogliamo che questi tag vengano in realtà visualizzati come HTML.
Ma c'è un problema! I nostri commenti visualizzati appaiono come segue nel browser: "`<p>`Questo è un `<em>`altro`</em>` commento`</p>`". Noi vogliamo che questi tag vengano in realtà visualizzati come HTML.
Questo è il risultato della protezione di React da parte di un [attacco XSS](https://en.wikipedia.org/wiki/Cross-site_scripting). C'è una maniera di aggirare questo comportamento, ma il framework ti avvisa di non farlo:
Questo è il risultato della protezione di React da parte di un [attacco XSS](https://en.wikipedia.org/wiki/Cross-site_scripting). C'è una maniera di aggirare questo comportamento, ma il framework ti avvisa di non farlo:
```javascript{3-6,14}
```javascript{3-7,15}
// tutorial7.js
// tutorial7.js
var Comment = React.createClass({
var Comment = React.createClass({
rawMarkup: function() {
rawMarkup: function() {
var rawMarkup = marked(this.props.children.toString(), {sanitize: true});
var md = new Remarkable();
var rawMarkup = md.render(this.props.children.toString());
return { __html: rawMarkup };
return { __html: rawMarkup };
},
},
@ -279,9 +281,9 @@ var Comment = React.createClass({
});
});
```
```
Questa è una speciale API che rende intenzionalmente difficile inserire HTML nativo, ma per marked ci avvantaggeremo di questa possibilità.
Questa è una speciale API che rende intenzionalmente difficile inserire HTML nativo, ma per remarkable ci avvantaggeremo di questa possibilità.
**Ricorda:** usando questa funzionalità stai assumendo che marked sia sicuro. In questo caso, passiamo `sanitize: true` che istruisce marked a fare l'escape di ogni markup HTML nel sorgente, anziché restituirlo inalterato.
**Ricorda:** usando questa funzionalità stai assumendo che remarkable sia sicuro.
@ -223,7 +223,7 @@ var CommentList = React.createClass({
Markdown은 텍스트를 포맷팅하는 간단한 방식입니다. 예를 들어, 별표(`*`)로 텍스트를 둘러싸는 것은 강조의 의미입니다.
Markdown은 텍스트를 포맷팅하는 간단한 방식입니다. 예를 들어, 별표(`*`)로 텍스트를 둘러싸는 것은 강조의 의미입니다.
먼저 서드파티 라이브러리인 **marked**를 애플리케이션에 추가합니다. 이 JavaScript 라이브러리는 Markdown 텍스트를 HTML 문법으로 변환해줍니다. head 태그안에 스크립트 태그를 추가해 주세요. (React playground에는 이미 포함되어 있습니다):
먼저 서드파티 라이브러리인 **remarkable**를 애플리케이션에 추가합니다. 이 JavaScript 라이브러리는 Markdown 텍스트를 HTML 문법으로 변환해줍니다. head 태그안에 스크립트 태그를 추가해 주세요. (React playground에는 이미 포함되어 있습니다):
```html{9}
```html{9}
<!-- index.html -->
<!-- index.html -->
@ -234,39 +234,41 @@ Markdown은 텍스트를 포맷팅하는 간단한 방식입니다. 예를 들
우리가 한 일이라고는 marked 라이브러리를 호출한 것 뿐입니다. marked가 `this.props.children`에서 텍스트를 읽어들여 처리할 수 있도록 React 형식의 텍스트(React's wrapped text)를 단순 텍스트(raw string)으로 전환하기 위해 명시적으로 `toString()`을 호출했습니다.
우리가 한 일이라고는 remarkable 라이브러리를 호출한 것 뿐입니다. remarkable가 `this.props.children`에서 텍스트를 읽어들여 처리할 수 있도록 React 형식의 텍스트(React's wrapped text)를 단순 텍스트(raw string)으로 전환하기 위해 명시적으로 `toString()`을 호출했습니다.
하지만 여기엔 문제가 있습니다! 우리는 HTML 태그들이 정상적으로 렌더되길 원하지만 브라우저에 출력된 결과물은 "`<p>``<em>`또 다른`</em>` 댓글입니다`</p>`"처럼 태그가 그대로 보일것입니다.
하지만 여기엔 문제가 있습니다! 우리는 HTML 태그들이 정상적으로 렌더되길 원하지만 브라우저에 출력된 결과물은 "`<p>``<em>`또 다른`</em>` 댓글입니다`</p>`"처럼 태그가 그대로 보일것입니다.
React는 이런 식으로 [XSS 공격](https://en.wikipedia.org/wiki/Cross-site_scripting)을 예방합니다. 우회할 방법이 있긴 하지만 프레임워크는 사용하지 않도록 경고하고 있습니다:
React는 이런 식으로 [XSS 공격](https://en.wikipedia.org/wiki/Cross-site_scripting)을 예방합니다. 우회할 방법이 있긴 하지만 프레임워크는 사용하지 않도록 경고하고 있습니다:
```javascript{3-6,14}
```javascript{3-7,15}
// tutorial7.js
// tutorial7.js
var Comment = React.createClass({
var Comment = React.createClass({
rawMarkup: function() {
rawMarkup: function() {
var rawMarkup = marked(this.props.children.toString(), {sanitize: true});
var md = new Remarkable();
var rawMarkup = md.render(this.props.children.toString());
return { __html: rawMarkup };
return { __html: rawMarkup };
},
},
@ -283,9 +285,9 @@ var Comment = React.createClass({
});
});
```
```
이는 의도적으로 생(raw) HTML을 넣기 힘들게 하려고 만든 특별한 API지만 marked를 사용하기 위해 이 백도어를 활용합시다.
이는 의도적으로 생(raw) HTML을 넣기 힘들게 하려고 만든 특별한 API지만 remarkable를 사용하기 위해 이 백도어를 활용합시다.
**잊지 마세요:** 이 기능은 marked가 안전한 것으로 믿고 사용하는 것입니다. 이 경우, 소스에 있는 그대로 넘겨 주는 대신, 모든 HTML 마크업을 이스케이프하도록 marked에게 `sanitize: true`를 넘겨 주었습니다.
**잊지 마세요:** 이 기능은 remarkable가 안전한 것으로 믿고 사용하는 것입니다.
@ -224,35 +224,37 @@ Note that we have passed some data from the parent `CommentList` component to th
Markdown is a simple way to format your text inline. For example, surrounding text with asterisks will make it emphasized.
Markdown is a simple way to format your text inline. For example, surrounding text with asterisks will make it emphasized.
In this tutorial we use a third-party library **marked** which takes Markdown text and converts it to raw HTML. We already included this library with the original markup for the page, so we can just start using it. Let's convert the comment text to Markdown and output it:
In this tutorial we use a third-party library **remarkable** which takes Markdown text and converts it to raw HTML. We already included this library with the original markup for the page, so we can just start using it. Let's convert the comment text to Markdown and output it:
```javascript{9}
```javascript{4,10}
// tutorial6.js
// tutorial6.js
var Comment = React.createClass({
var Comment = React.createClass({
render: function() {
render: function() {
var md = new Remarkable();
return (
return (
<divclassName="comment">
<divclassName="comment">
<h2className="commentAuthor">
<h2className="commentAuthor">
{this.props.author}
{this.props.author}
</h2>
</h2>
{marked(this.props.children.toString())}
{md.render(this.props.children.toString())}
</div>
</div>
);
);
}
}
});
});
```
```
All we're doing here is calling the marked library. We need to convert `this.props.children` from React's wrapped text to a raw string that marked will understand so we explicitly call `toString()`.
All we're doing here is calling the remarkable library. We need to convert `this.props.children` from React's wrapped text to a raw string that remarkable will understand so we explicitly call `toString()`.
But there's a problem! Our rendered comments look like this in the browser: "`<p>`This is `<em>`another`</em>` comment`</p>`". We want those tags to actually render as HTML.
But there's a problem! Our rendered comments look like this in the browser: "`<p>`This is `<em>`another`</em>` comment`</p>`". We want those tags to actually render as HTML.
That's React protecting you from an [XSS attack](https://en.wikipedia.org/wiki/Cross-site_scripting). There's a way to get around it but the framework warns you not to use it:
That's React protecting you from an [XSS attack](https://en.wikipedia.org/wiki/Cross-site_scripting). There's a way to get around it but the framework warns you not to use it:
```javascript{3-6,14}
```javascript{3-7,15}
// tutorial7.js
// tutorial7.js
var Comment = React.createClass({
var Comment = React.createClass({
rawMarkup: function() {
rawMarkup: function() {
var rawMarkup = marked(this.props.children.toString(), {sanitize: true});
var md = new Remarkable();
var rawMarkup = md.render(this.props.children.toString());
return { __html: rawMarkup };
return { __html: rawMarkup };
},
},
@ -269,9 +271,9 @@ var Comment = React.createClass({
});
});
```
```
This is a special API that intentionally makes it difficult to insert raw HTML, but for marked we'll take advantage of this backdoor.
This is a special API that intentionally makes it difficult to insert raw HTML, but for remarkable we'll take advantage of this backdoor.
**Remember:** by using this feature you're relying on marked to be secure. In this case, we pass `sanitize: true` which tells marked to escape any HTML markup in the source instead of passing it through unchanged.
**Remember:** by using this feature you're relying on remarkable to be secure. In this case, remarkable automatically strips HTML markup and insecure links from the output.
Ben Alpert
9 years ago