string 형태의 html을 html로 렌더링하기 (dangerouslySetInnerHTML)

 

React는 cross-site scripting 공격을 막기 위해서 html 태그가 담겨있는 string 형태를 렌더링하면, 태그로 나오지 않고 문자열 그대로 렌더링되게 한다.

<KeypadCover>
  {svgArr?.map((grids: any[]) =>
    grids.map((grid, i) => {
      return (
        <Button
          variant={i === grids.length - 1 ? 'primary' : 'secondary'}
          key={i}>
          {grid}
        </Button>
      );
    })
  )}
</KeypadCover>

여기서 svgArr은 svg 태그가 담겨져 있는 2차 배열이며, 이걸 화면에 나타내면 이렇게 나온다.

하.. 괴롭다 괴로워ㅠㅠㅠ

 

문자열을 html 형태로 렌더링하게되면 취약하지만 대비하고 있다! 라고 생각한다면, 해결하는 방법이 있다.

 

 

dangerouslySetInnerHTML

 

<KeypadCover>
  {svgArr?.map((grids: any[]) =>
    grids.map((grid, i) => {
      return (
        <Button
          variant={i === grids.length - 1 ? 'primary' : 'secondary'}
          key={i}
          dangerouslySetInnerHTML={{ __html: grid }}
        />
      );
    })
  )}
</KeypadCover>

 

dangerouslySetInnerHTML={{ __html: 변수명 }}

이렇게 입력!

 

이렇게 svg 태그가 제대로 나오게 된다.