Dev/Frontend

머릿말 가끔 웹사이트를 만들거나 블로그를 운영할 때 유입된 사용자가 일반 사용자인지 크롤링 봇인지 확인해야할 때가 있습니다. 그럴 때는 간단하게 위에 이미지처럼 javascript 라이브러리를 하나 설치해서 손쉽게 해당 기능을 구현할 수 있습니다. 위에 소개된 라이브러리는 isbot 이라고 해서 현재 npm package list 기준으로 가장 다운로드 수가 많고 업데이트가 최근에 있던 라이브러리입니다. 자세한 건 아래 링크를 참고해주세요. https://www.npmjs.com/package/isbot isbot 🤖 detect bots/crawlers/spiders via the user agent.. Latest version: 3.4.3, last published: 20 days ago. Sta..

Dev/Frontend

들어가기 전 저는 Handlebars 모듈을 사용하는 웹 소스코드를 분석하고자 간단한 사용법을 익히기 위해서 포스팅에 정리하고자 합니다. Handlebars 와 다른 View Engine 간의 장단점 및 차이점에 대해서는 다루지 않습니다. Handlebars 란 무엇인가? Handlebars 는 간단한 템플릿 언어입니다. Client Side 에서 HTML 태그 또는 다른 문자열들 사이에 템플릿 기호와 입력값을 함께 사용하여 표현에 사용됩니다. {{firstname}} {{lastname}} 표현식은 {{ 로 시작해서 내용이 들어가고 }} 기호로 끝나는 형태입니다. 템플릿이 실행되면 이와 같은 표현식은 특정 값으로 대체됩니다. Handlebars 설치법 가장 빨리 Handlebars 을 테스트해볼 수 있..

Dev/Frontend

Uncaught SyntaxError: Function statements require a function name 위 오류는 오류 내용 그대로 함수 정의 코드에서 함수의 이름이 없어서 생겨나는 오류입니다. 만약 함수가 정의되어 있다면, 어떻게 정의되어 있는지, 혹시 이름이 없는 지, 아니면 오타가 난 건 아닌지 한번 확인해봐야 합니다. 일반적으로 아래와 같은 코드를 입력했을 때 오류가 발생합니다. function () { return "Domdom's World"; } // Uncaught SyntaxError: Function statements require a function name 그 이유는 함수에 이름이 없기 때문이죠. 혹시 익명 함수(anonymous function)를 사용하려고 했다면..

Dev/Frontend

웹 사이트를 개발하는 중에 이미지나 css 또는 javascript 파일의 내용을 수정해도 반영이 안되어 있을 경우를 가끔 보실 수 있습니다. 심지어 수정본을 배포하고 나서도 어떤 사용자가 이전에 사이트에 접속하고 나서 인터넷 사용 기록 및 캐시 지우기를 하지 않은 이상 배포 이전의 css, js, image 파일들이 그대로 사용되고 있어서 오류가 나거나 버그가 생기는 케이스가 생기곤 합니다. 이런 문제가 발생할 때마다 사용자보고 오래된 캐시(stale cache) 좀 지워주세요 라고 한다거나 새로고침 좀 해주세요 라고 한다거나 시크릿 브라우저로 한번 해보시겠어요 라고 하는 건 정말 어려운 일이겠죠. 기본적으로 캐쉬의 동작은 URL을 기준으로 기존에 동일한URL에 요청한 적이 있었는 지를 판단합니다. 그..

Dev/Frontend

딕셔너리에서 키만 리스트로 가져오는법, value만 리스트로 가져오는 법입니다 const object1 = { a: 'somestring', b: 42, c: false }; console.log(Object.keys(object1)); // expected output: Array ["a", "b", "c"] console.log(Object.values(object1)); // expected output: Array ["somestring", 42, false] 참고 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/values Object.values() - JavaScript | MDN Ob..

Security/Wargame

Web Preview 처음에 웹사이트를 들어가면 아래와 같이 보입니다. json 형태의 body data를 보내는 radio input form 이 존재했습니다. Code Review 소스코드가 제공되었기에 코드부터 먼저 분석해보았습니다. 디렉토리 구조는 위와 같습니다. 먼저 index.js 코드를 살펴보겠습니다. express 웹서버를 사용하고 있고 routes 폴더에 라우터들을 관리하고 있습니다. const express = require('express'); const app = express(); const bodyParser = require('body-parser'); const routes = require('./routes'); const path = require('path'); app...

Dev/Frontend

1. javascript로 불러오기 document.querySelector('input[name="radioName"]:checked').value; 2. jquery로 불러오기 $("input[name='radioName']:checked").val();

Dev/Frontend

confirm으로 확인, 취소버튼을 누를지 체크하고 확인버튼을 눌렀을 때 (confirm == true)와 취소버튼을 눌렀을 때 (confirm == false)로 나누어 원하는 코드를 작성하면 됩니다 !! if (confirm("~~하시겠습니까?") == true){ //true는 확인버튼을 눌렀을 때 코드 작성 console.log("완료되었습니다."); }else{ // false는 취소버튼을 눌렀을 때, 취소됨 console.log("취소되었습니다"); }

Security/CTF

최근에 javascript prototype pollution 문제를 hackthebox 에서 풀어본 기억이 있습니다. web 문제 중에서 very easy 난이도에 해당하는 gunship 문제가 이에 해당하는데요. 이와 유사한 문제로 CCE Quals 에서 출제된 것을 확인해서 올려봅니다. 제목은 GS25 인데, prototypee pollution으로 javascript를 서버(관리자페이지)에 보내서 세션을 탈취해오는 것이 목적인 문제였습니다. GS25 (285점) Client 단에서 jquery 3.1.1 버전을 사용하고 있었고 해당 버전에는 Javascript Prototype Pollution 취약점이 존재했습니다. 참고 : https://snyk.io/vuln/SNYK-JS-JQUERY-174..

Dev/Frontend

Uncaught SyntaxError: Unexpected token ' in JSON at position 1 라는 오류를 혹시 보신적 있으신가요?? 저는 JSON.parse 함수를 사용할 때 자주보는 오류인 것 같아요! 코드가 한 줄이라면 바로 어떤 이유에서 오류가 난 것인지 해결하기 쉬울텐데, 긴 코드를 복사 붙여넣기 하였거나 한번에 코드를 작성하고 디버깅 해보려다가 오류가 날 경우에는 정말 어떤 이유에서 오류가 났는 지 파악하기가 어려운 것 같아요! 그래서 혹시 몰라서 이번에도 오류에 관련해서 정리를 해보려고 합니다! 우선 위 오류는 아래의 코드의 경우에 오류가 날 수 있어요! var num = JSON.parse("{'searchNum':1234}"); console.log(num.searchN..

Dev/Frontend

Uncaught ReferenceError: $ is not defined 라고 하는 오류를 혹시 보신 적 있으신가요? 사실 제 입장에서는 이 오류를 언제 자주 발견하게 되나면, Reflected XSS 취약점을 발굴할 때 발견하곤 합니다. 그리고 웹 개발 시에도 보곤 하죠. 우선 이 오류의 원인부터 파악해겠습니다. hello 가장 주된 원인은 script 태그에 $ 기호를 사용했지만 jquery를 상단에 정의해주지 않았기 때문입니다. 만약 위의 jquery 스크립트 태그의 주석을 풀면 동작하겠지요. 그리고 물론 아래와 같이 $ 기호를 먼저 사용하고 jquery 스크립트를 하단에 삽입하여 순서에 따라 아직 정의되지 않은 $ 라는 jquery 문법을 사용하려다가 오류가 나는 케이스도 있겠습니다. hello..

Dev/Frontend

이전 포스팅에서 예쁜 자바스크립트 차트로 amcharts를 소개했었는데요! https://domdom.tistory.com/2?category=970264 [javascript Chart] 예쁜 자바스크립트 차트 (javascript chart) 사이트 amcharts! 최근에 자주쓰고있는 차트 사이트 amcharts 개인적으로 기능성, 응용성, 디자인 세 가지 모두 괜찮은 차트다. 사용법도 너무 간단하고, 디자인도 예쁘고, 무엇보다 응용력이 쩌는 차트! 한 차트를 domdom.tistory.com amcharts를 사용하면서 불편했던 점은, 무료로 사용할 경우 amcharts의 로고가 그래프마다 계속 생긴다는 점이에요. 이번에는 무료로, 로고없이, 다양하게 커스텀이 가능한 echarts를 소개해드리려고..