JS - eval 함수 보안 취약점

https://watchout31337.tistory.com/150 eval 함수 eval() 함수 eval() 함수는 문자열을 받아 자바스크립트로 실행을 시키는 함수이다. eval(string) 형태로 사용한다. ex) eval('2+2') //4 eval()함수는 이런 점을 이용해 악의적인 실행을 할수 있다. 예를들어 watchout31337.tistory.com 자바스크립트에서 사용되고 있는 eval 함수의 보안 취약점에 대해서 이해하기 쉽게 작성된 글

• format_list_bulleted JavaScript
• · 2022. 4. 29.
• textsms

JS - 생성자 함수

- 객체 리터럴 let user = { name : Mike, age : 30, } Javascript에서는 위와 같이 name, age를 갖는 객체를 선언하여 만들어 줄 수 있다. 그런데 개발을 하다보면 이러한 객체 리터럴을 여러개 생성해야하는 경우가 있는데 이럴 때 생성자 함수를 통해서 간편하게 생성할 수 있다. function User(name, age) { this.name = name; this.age = age; this.sayName = function () { console.log(this.name); }; } let user1 = new User("Kim", 20); let user2 = new User("Han", 40); let user3 = new User("Park", 30); c..

• format_list_bulleted JavaScript
• · 2022. 4. 27.
• textsms

JS - 자바스크립트 호이스팅과 변수의 생성과정에 대해

들어가며 ES6의 대표적인 Keyword를 뽑으라고 한다면 아마 자바스크립트에서 변수를 선언할 때 사용하는 3가지 Keyword인 var, let, const를 생각해볼 수 있다. 이번 포스팅에서는 이러한 var, let, const에 차이에 대해서 자세하게 정리하고자한다. let과 var의 차이점 var와 let은 크게 다르지 않기에 대부분의 경우에는 둘을 바꿔서 사용해도 문제가 생기지 않는다. 그렇다면 다른점은 무엇일까? 1. var는 한번 선언된 변수를 다시 선언할 수 있다. var name = 'Mike'; console.log(name); var name = 'Jane'; console.log(name); 하지만 let은 한번 선언된 변수를 다시 선언할 수 없다. let name = 'Mina'..

• format_list_bulleted JavaScript
• · 2022. 4. 27.
• textsms

JS - toggle

자바스크립트에서 toggle() 메소드는 on/offf 할 수 있도록 즉 스위치를 켰다 껐다 하는 기능을 한줄로 구현할 수 있다. 예를 들면 아래와 같이 click 이벤트에 classList()를 사용하여 css style을 on/off 방식으로 추가/제거 할 수 있게된다. 아래의 예제코드를 확인해보자. function handleh1Clicked(){ const clickedClass = "clicked"; if( h1.classList.contains(clickedClass)){ h1.classList.remove(clickedClass); }else{ h1.classList.add(clickedClass); } } 위와 같이 원하는 HTML문서내의 태그가 classList에서 clicked 클래스를..

• format_list_bulleted JavaScript
• · 2021. 11. 20.
• textsms

JS - Event listener

HTML문서 내의 특정 DOM에서 특정 이벤트가 발생하면 우리는 그것을 이벤트 객체에서 확인 할 수 있다. 이때 이벤트 리스너(Event listner)는 DOM 객체에서 이벤트가 발생할 경우 그 해당 이벤트에 대한 처리 핸들러를 추가할 수 있는 오브젝트이다. 이러한 이벤트 리스너를 사용하여 사용자로부가 마우스클릭이나 키보드 입력 등에 대한 행동을 할 때 특정 함수를 호출해줘서 기능을 구현할 수 있다. 아래는 샘플 코드이다. first second! 3rd const h1 = document.querySelector(".hello:first-child h1"); //h1 태그를 가져옴 function handleh1Clicked(){ // 마우스클릭시에 대한 기능구현 if(h1.style.color ==..

• format_list_bulleted JavaScript
• · 2021. 11. 16.
• textsms

JS - localStorage 다루기 와 preventDefault()

1. Web Storage Web Storage에는 localStorage와 session storage가 존재한다. 이 두개의 메커니즘의 차이점은 데이터가 어떤 범위내에서 얼마나 오래 보존되는가의 차이인데 session storage는 웹페이지의 세션이 끝날 때 까지 저장된 데이터가 지워지는 반면 localStorage는 웹페이지의 세션이 끝나더라도 데이터가 지워지지 않는다. 하지만 어찌되었던 localStorage와 sessionStorage 모두 데이터를 브라우저 상에 저장한다는 것은 같으며 자바스크립트 API가 완전히 동일한 형태이다. 2. preventDefalut() HTML에서 태그는 고유의 동작이 있다. 예를들면 form 태그안에 있는 input 을 전송한다던가 그러한 동작이 있는데 pre..

• format_list_bulleted JavaScript
• · 2021. 4. 4.
• textsms