코딩리뷰테스트 이후 배웠던점 정리 (스테픈2km완료)
이번 코딩리뷰 테스트를 통해 배웠던 기술을 조금더 정리해보려고 합니다.
이번 코딩리뷰테스트에서는
iframe을 정말 다양한 방식으로 활용하는 모습을 보여줬는데요
이 부분입니다,
iframe을 활용해 여러가지 처리를 했었는데
조금만 검색해보니 해킹을 할때도 iframe을 활용해서 공격을 하기도 한다고 하는군요
iframe은 웹문서 내에 외부 특정 페이지 또는 내부 특정 페이지를 삽입하여 페이지에 함께 보여주는 html태그다.
일부 해킹된 사이트에서 사용자의 접속이 가장 많은 페이지에 악성코드를 삽입하는 공격이 발생되기도 한다.
일단 이 부분에서
이렇게 iframe을 선택해서
iframe 내부에 헤더에 스크립트를 만들고
함수를 만들어서 문자열로 innerHTML로 넣고있는데
innerText로 넣어도 동일하게 동작한다.
문자열로 넣고 iframe이 로딩되는 순간 함수를 실행시키는 테크닉이라고 알게되었는데
정말 신기한 방식이랄까
한번도 시도해본적이 없어서
아마 광고나 해킹을 위해 저런식으로 사용자의 컴퓨터에 특정 데이터를 다운받게 하거나 하는것 같다.
좀더 iframe으로 해킹관련 내용을 읽어보니
iframe에서 즉시 실행되는 스크립트를 통해 사용자의 컴퓨터에 악성 프로그램을 설치하는 식인데
이번 테스트에서 정확하게 배운점이 있다면
이렇게 즉시 실행시키는 코드를 tostring메서드로 넣어서
동작시키는 부분과
- contentDocument 프로퍼티 : iframe에 의해 생성된 document 객체
- contentWindow 프로퍼티 : iframe에 의해 생성된 window객체
이렇게 iframe은 별도의 프로퍼티를 갖고있는데
이를 콘솔로 찍어보자면
이렇게 윈도우와 도큐먼트를 가지고 있다.
이게 조금 다른부분이 iframe 내에 존재하기 때문에
접근하는 방식이 독특하다는 점인데
iframe에 부모요소에 (html) 접근해서 파일을 주고받는 다던지 하는
방식으로 색다른 방시으로도 작성이 가능하다.
이런방식으로는 여태 사용해본적이 없는 방식인데요
기존 스타일이나 id 클래스에 영향이 받지 않도록 하면서 스타일을 적용시키는 방식인데
생각보다 재밌는 방식이네요
css 선택자에 특성선택자를 활용해서
원래 html이나 css에 없는 특성을 하나 만들어주고
해당 특성에 스타일을 적용시켜주는거죠
위 설명대로 스타일을 만들어서 해당 스타일에 특성을 하나 임의로 선택해서 넣고
해당 특성을 특정 태그에 속성으로 넣어주었습니다
콘솔 화면에서 찍어보면 매우 잘 적용되는걸 볼 수 있군요
정말 독특한 방식인데
이번 광고 필터 처리 코드를 보면서 많이 배운 기분입니다.
이번 테스트를 통해 배운점이 없지는 않아서
아쉽긴 하지만..ㅠㅠ
좀더 다양한 방식으로 코딩을 하는걸 알게되었네요
스테픈2km완료
