조쪼쪼와 김짹짹의 SW 교육 이야기

2020년 3월 16일 월요일

자바스크립트를 이용하여 마우스 오른쪽 클릭 금지, 드래그 금지, 블록 선택 금지 프로그래밍하기 VS 크롬 확장 프로그램 Disable JavaScript를 이용하여 자바스크립트 비활성화시키기

자바스크립트를 이용하여 마우스 오른쪽 클릭 금지, 드래그 금지, 블록 선택 금지 프로그래밍하기 VS 크롬 확장 프로그램 Disable JavaScript를 이용하여 자바스크립트 비활성화시키기

자바스크립트는 객체 기반의 스크립트 프로그래밍 언어입니다. 보통 자바스크립트를 이용하여 마우스 오른쪽 클릭 금지, 드래그 금지, 블록 선택 금지 등의 작업을 합니다.

oncontextmenu=’return false’ : 마우스 오른쪽 클릭 금지
ondragstart=return false : 드래그 금지
onselectstart=’return false’ : 블록 선택 금지

게시판의 html 소스에 아래의 내용을 추가하면 마우스 오른쪽 클릭 금지, 드래그 금지, 블록 선택이 금지됩니다.
<body oncontextmenu='return false' ondragstart='return false' onselectstart='return false'>

한편, 크롬 확장 프로그램 Disable JavaScript를 이용하면 특정 사이트에서 자바스크립트를 비활성화시킬 수 있습니다.

1. 크롬 웹 브라우저에서 아래의 주소 클릭
https://chrome.google.com/webstore/detail/disable-javascript/jfpdlihdedhlmhlbgooailmfhahieoem

2. [Chrome 에 추가] 클릭

3. [확장 프로그램 추가] 클릭

* 연습 페이지 주소 : https://21-edu.blogspot.com/2020/03/blog-post_31.html

2020년 3월 8일 일요일

http://fotoforensics.com 을 이용하여 이미지 포렌식하기(1) : 합성되었다고 의심되는 이미지를 이미지로 검색하여 해당 이미지가 인터넷에 있는지를 찾아보기

http://fotoforensics.com 을 이용하여 이미지 포렌식하기(1) : 합성되었다고 의심되는 이미지를 이미지로 검색하여 해당 이미지가 인터넷에 있는지를 찾아보기

이미지 검색 알고리즘을 설명하실 때, 출처가 불분명한 사진 또는 이미지의 출처를 찾을 때, 합성되었다고 의심되는 이미지의 원본을 찾을 때, 미디어 리터러시를 지도하실 때 활용하실 수 있습니다.

http://fotoforensics.com
여기에서는 https://tineye.com/ 검색 엔진을 이용하여 검색했습니다.

이 이미지는 아래의 방법으로 합성하였습니다.
https://21-edu.blogspot.com/2020/03/pixlr-pixlr.html

http://fotoforensics.com 을 이용하여 이미지 포렌식하기(2) : 합성되었다고 의심되는 이미지의 에러 레벨 분석(Error Level Analysis)하여 합성 여부 찾아내기

JPEG 는 Joint Photographic Experts Group의 약자로 그림 파일 형식의 하나입니다. 정지 화상을 구현하기 위해서 만들어진 손실 압축 방법 표준입니다. JEPG 포맷으로 하나의 이미지를 만들면 이미지 전체의 압축 레벨이 거의 같아야 합니다.
한 이미지에 다른 이미지를 합성하면 하나의 이미지 내에서 서로 다른 압축 레벨이 나타날 수 있습니다. 이를 활용하여 이미지의 합성 여부를 찾아내는 방법을 에러 레벨 분석(Error Level Analysis, ELA) 이라고 합니다.
에러 레벨 분석(Error Level Analysis, ELA) 은 학생들에게 JPEG 포맷을 설명하실 때, 합성되었다고 의심되는 이미지의 합성 여부를 검사할 때, 미디어 리터러시를 지도하실 때 활용하실 수 있습니다.

출처) http://fotoforensics.com/tutorial-ela.php

합성되었다고 의심되는 이미지를 예제 파일을 이용하여 에러 레벨 분석(Error Level Analysis)하는 방법을 소개드립니다.
분석 싸이트 : http://fotoforensics.com

이 이미지는 아래의 방법으로 온라인 상에서 합성하였습니다.
https://21-edu.blogspot.com/2020/03/pixlr-pixlr-2.html

2020년 2월 29일 토요일

웹 프로그래밍을 할 때 GET 방식과 POST 방식의 공통점과 차이점 설명 예시 : 크롬/오페라/파이어폭스 웹 브라우저 확장 기능을 이용하여 보이지 않는 게시판 게시물의 링크 주소 찾기

웹 프로그래밍을 할 때 GET 방식과 POST 방식의 공통점과 차이점 설명 예시 : 크롬/오페라/파이어폭스 웹 브라우저 확장 기능을 이용하여 보이지 않는 게시판 게시물의 링크 주소 찾기

웹 프로그래밍을 할 때 클라이언트가 서버로 요청을 보내는 방법에는 GET 방식과 POST 방식이 있습니다. 학생들에게 GET 방식과 POST 방식의 공통점과 차이점을 설명할 때 제가 예시로 사용하는 방법입니다.
1. POST 방식으로 짠 게시판 목록 열기 2. 게시판에서 게시물 하나 선택하여 보기 3. 주소창에서 선택한 게시물의 주소 찾아보기 4. 다시 게시판 목록으로 이동 5. 툴을 이용하여 POST 방식을 GET 방식으로 변환하기
6. 게시판에서 게시물 하나 선택하여 보기 7. 주소창에서 선택한 게시물의 주소 찾아보고 차이점 찾기
아래는 파이어폭스 웹 브라우저의 확장기능을 이용하여 POST 방식을 GET 방식으로 변환하는 방법입니다. 이 방법을 이용하면 보이지 않는 게시판 게시물의 링크 주소를 찾을 수 있습니다.
크롬 웹 브라우저를 사용하고 있다면 아래의 링크 주소를 클릭한 후 'Chrome 에 추가' 를 클릭하여 'Web Developer' 를 설치하시면 됩니다.
https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm
오페라 웹 브라우저를 사용하고 있다면 아래의 링크 주소를 클릭한 후 'Add to Opera' 를 클릭하여 'Web Developer' 를 설치하시면 됩니다.
https://addons.opera.com/en/extensions/details/web-developer

<파이어폭스 웹 브라우저 설치 및 'Web Developer' 사용 방법>
1. https://www.mozilla.org/ko/firefox 에서 Firefox 다운로드 클릭 2. Firefox Installer 설치 및 실행 3. 파이어폭스 주소 창에 https://addons.mozilla.org/en-US/firefox/ 입력 후 오른쪽 검색 창에 'Web Developer' 로 검색 - 또는 파이어폭스 주소 창에 https://addons.mozilla.org/en-US/firefox/addon/web-developer 입력 4. Add to Firefox 클릭 > 추가 클릭 5. POST 방식으로 짠 게시판 목록 열기
- 예) 한국교육과정평가원에서 운영하는 국가교육과정정보센터의 [2015 개정 교육과정] 공지사항 게시판 목록 주소
http://www.ncic.re.kr/mobile.revise.board.list.do?degreeCd=RVG01&boardNo=1001 6. 게시판에서 게시물 하나 선택하여 보기 7. 주소창에서 선택한 게시물의 주소 찾아보기 8. 다시 [2015 개정 교육과정] 공지사항 게시판 목록 주소로 이동 9. 파이어폭스 확장 기능을 이용하여 GET 방식으로 변환하기 - 주소창 오른쪽 끝에 있는 'Web Developer' 아이콘 클릭 > Forms 클릭 > Convert Form POSTs To GETs 클릭