Angular : RxJS, XSS 관련 예제 4. XSS 설명

1. 이 포스트는 RxJS와 XSS와 관련된 시리즈의 연속이다. 설명을 위한 예제를 공유하기 때문에 시리즈로 만들었다.

 

2. 시리즈의 2번 포스트를 보면 결과 값이 html 그대로 화면에 나오는 것을 볼 수 있다. 보통은 원하지 않는 결과이다.

 

3. 이렇게 되는 이유는 Angular 내부적으로 XSS 공격을 차단하기 위한 필터(escaper)를 가동하고 있기 때문이다.

  3-1 >는 &gt; <는 &lt; &은 &amp; 등으로 기본적으로 대체하기 때문에 테그가 해석이 되지 않는다.

 

4. XSS ?

  4-1 XSS는 cross site scripting attack으로 나쁜 놈이 다른 인터넷 사용자의 브라우저에 임의의 코드를 심는 방식이다.

  4-2 이 코드는 브라우저에서 실행이 되어 정보를 빼오거나 원하지 않는 동작을 하게 만든다.

  4-3 일반적으로 form에 html과 js를 혼합한 코드를 입력하는 형식으로 많이 사용된다.

 

5. Angular에서 내장 html정보를 표출하고 싶은 경우 innerHTML directive를 사용하면 된다.

  5-1 현재 표출되는 화면

 

  5-2 innerHTML directive를 사용한 코드

 

<table class="table table-striped text-center">
  <thead class="thead-light">
    <th>제목</th>
    <th>글자수</th>
    <th>내용</th>
  </thead>
  <tbody>
    <tr *ngFor="let item of wikiItems">
      <td><a target="_blank" href="http://en.wikipedia.org/?curid={{item.pageid}}">{{ item.title }}</a></td>
      <td>{{ item.wordcount }}</td>
      <td [innerHTML]="item.snippet"></td>
    </tr>
  </tbody>
</table>

 

  5-3 수정 후 화면

 

  5-4 html을 보면 키워드와 매칭되는 부분에 searchmatch라는 class가 설정되어 있다.

    5-4-1 searchmatch에 해당하는 css를 추가하면 좀 더 보기에 낫다.

    5-4-2 하지만 여기서 주의할 점이 있는데 page.component.css에 class를 추가하면 적용되지 않는다.

    5-4-3 이것은 컴포넌트에서 명시적으로 사용한 테그에만 css가 적용되기 때문이다.

      5-4-3-1 외부에서 가지고 온 하위 테그에는 적용되지 않는다.

    5-4-4 가장 쉬운 해결책은 global stylesheet styles.css에 추가하면 된다.

      5-4-4-1 프로그래밍은 안정적으로 결과만 나오면 된다. 예술이고 다 개소리이다.

 

/* You can add global styles to this file, and also import other style files */
.searchmatch {
  font-weight: bold;
}

 

  5-5 키워드 강조 후 결과 화면