웹

해당되는 글 33건

웹/Chrome Extension 2023.08.13. 03:20

[크롬 확장프로그램] 타입스크립트로 개발하는 방법 (크롬 확장프로그램 + 타입스크립트 개발환경 구축) - manifest v3

안녕하세요 파일입니다. 기본적으로 크롬 확장프로그램이란 크롬 안에서 우리가 작성한 자바스크립트를 원하는 시점에 실행시킴으로써 사이트를 원하는대로 커스텀 하는 도구입니다. + 자바스크립트를 실행시키는 것 이외에도 웹 요청을 차단하거나, 응답을 조작하거나 CSS를 삽입하거나 매우 여러가지 행위의 것을 할 수 있습니다. 말 그대로 브라우저의 기능을 확장하는 것 입니다. 자바스크립트를 사이트에서 실행시켜야 하므로 크롬 확장프로그램 개발은 당연히 자바스크립트로 합니다. (사이트에서 실행할 자바스크립트를 작성해야 하기 때문에) 비슷한 종류로 유저 스크립트를 실행시켜주는 확장프로그램인 Tamper Monkey가 존재합니다. 하지만 훨씬 구조적인 기능을 제공하는게 크롬 확장프로그램이기 때문에 개인적으로 간단한 확장 개..

웹/Chrome Extension 2023.07.27. 06:05

[크롬 확장프로그램] declarativeNetRequest + manifest v3 이용하여 요청값 리다이렉트, 차단 방법

서론 저번글에서 요청에 대해 응답값을 마음대로 조작하는 방법을 다뤘습니다. 사실 크롬 확장 프로그램을 개발하면서 처음부터 응답값을 변조하려던건 아니였고, 요청 자체를 차단해서 응답데이터가 오지 않게 하거나 요청을 리다이렉트 시켜서 응답 데이터를 변조하려고 했었습니다. 어떻게든 삽질을 통해서 응답값 변조를 포함해, 응답 데이터 차단(Blocking) [각주*요청 자체를 차단하므로 응답은 오지 않고 오류 코드가 리턴되므로 응답 데이터 차단이라고 했지만, 엄밀히 따지면 요청 자체를 차단하는게 맞는 거 같습니다.*], 리다이렉트(Redirect) 하는 방법 전부를 알게 되었습니다. 이번 글에서는 크롬 확장프로그램으로 요청을 차단하거나 리다이렉트 시키는 방법을 다룹니다. 만약에 요청을 차단하거나 리다이렉션 해서 ..

웹/Chrome Extension 2023.07.23. 23:13

[크롬 확장프로그램] 응답값 변조하는 방법 - XMLHttpRequest 속이기

현재 크롬 확장프로그램을 개발중인데, 작업중인 사이트에서 XMLHttpRequest로 웹 요청을 보내고 있었고 이 응답값을 속여야만 제가 작성한 확장프로그램 자바스크립트가 정상작동하는 상황이였습니다. 사실 응답값을 속일수만 있으면 확장프로그램으로써 아주 많은 일들을 할 수 있습니다. 사실 처음에는 사이트에서 로딩하는 자바스크립트 자체를 변조하는 방법도 생각해봤는데, 생각보다 어렵더라구요.. 방법도 거의 없고 실제로 스크립트가 조금이라도 바뀌는 순간 기존 변조를 했던것도 깨져버리구요. 대신에 웹 요청은 바뀔일이 크게 없기 때문에 웹 응답값을 변조하기로 마음먹었습니다. 본 글에서는 웹 사이트에서 XMLHttpRequest 로 요청을 보낼때 들어오는 응답값을 속이는 방법을 소개합니다. 추가로 응답값 뿐만이 아..

웹/JS 2023.06.07. 01:24

[JS] 난독화 풀기 - Deobfuscate

최근 알아낸 사실인데 아래 2개 사이트 정도면 웬만한 난독화가 대부분 풀립니다. 당연하지만 다 풀리는건 아닌거 같구요 1. https://deobfuscate.relative.im/ JavaScript Deobfuscator synchrony ver. 2.2.0 A simple deobfuscator for mangled or obfuscated JavaScript files view on GitHub Deobfuscate Save output if there are any errors, open developer tools > console to see them in a better view deobfuscate.relative.im 일단 1차로 여기서 전체적으로 난독화 해제를 돌립니다. 여기서 결과물..

웹/Node.js 2022.10.11. 20:42

[Node.js] 간편하게 URL 인코딩 & 디코딩 하기

console.log(encodeURIComponent("hello@world.com")); console.log(decodeURIComponent("hello%40world.com")); hello%40world.com hello@world.com Node.js 에서 URL 인코딩을 처리하는 방법은 매우 간단한데 encodeURIComponent() 함수와 decodeURIComponent() 함수를 이용하시면 됩니다. 기본적으로 console.log(); 처럼 기본적으로 Node.js 사용시 소스에 포함이 되어서 사용할 수 있는듯 합니다. 따로 패키지 설치나 import (require) 구문도 필요 없습니다. 함수 원형을 보시면 알겠지만 encodeURIComponent("인코딩하고 싶은 문자열")..

웹/JS 2022.08.28. 21:08

[JS] async & await란? - 제대로 알고 사용해보자!

본 글을 읽기 전에 Promise 에 대해 미리 알고 계셔야 합니다. 안녕하세요 파일입니다. 이전에 Promise를 통해 CallBack 지옥을 .then() 과 .catch() 를 이용해 개선시킬 수 있었습니다. 이제는 조금 더 나아가서 async await를 통해 Promise로 작성된 코드들을 한번 더 개선시켜 보겠습니다. * 여기서 개선되는 것은 대부분 가독성 입니다. Async & Await이란? async 와 await은 Promise를 조금 더 간편하게 사용 할 수 있도록 도와주며 동기적으로 실행되는 것 처럼 보이게 하는 문법입니다. async와 await은 새로운 것이 추가된 것이 아니며 기존에 존재하는 Promise를 쉽게 사용할 수 있게 해줄뿐인, 즉 Promise의 Syntatic s..

웹/JS 2022.08.23. 02:42

[JS] "==" 와 "===" 연산자의 차이점

프로그래밍을 하면서 값들의 같음을 비교하려면 == 연산자를 이용해서 같음을 비교할 수 있습니다. 대부분의 언어에서 사용하는 것이기도 하구요. 그런데 JS는 다른 프로그래밍 언어들과 다르게 "==" 도 있고 "==="도 있습니다. == 은 알겠는데 ===은 뭘까요? 인터넷에 관련글을 찾아보면 글이 빼곡히 쌓여있는데 그만큼 JS를 접한 개발자들을 당황시킨 내용이라고 할 수 있습니다 당연히 저도 당황을 해서 글을 쓰는것이구요 -.- 저는 난잡한 특성이 많은 JS를 싫어하는 편인데 웹 개발을 하면 현재로썬 대체제가 없어서 어쩔 수 없이 사용을 하고 있습니다. 잡담은 여기까지 하고 == 와 ===에 대해 알아봅시다. 용어 정리 연산자, 피연산자라는 용어를 잘 모르실 수 있으므로 미리 설명하고 넘어갑니다. 3 + ..

웹/NoSQL 2022.08.22. 03:34

[MongoDB] Connection String에 DB이름 적을시 접속안되는 문제 해결

이번에 Node.js로 예약 작업을 구현하기 위해서 Agenda 라는 라이브러리를 사용하게 되었습니다. Agenda는 다른 예약 라이브러리들과 다르게 예약 작업을 DB에 직접 저장해둬서 서버를 껐다 켜도 예약 작업 들이 날라가지 않습니다. 여기서 저장할때 사용하는 DB가 MongoDB라서 진행하는 프로젝트는 강제로 MongoDB를 사용하게 되었습니다. 어쨌던 MongoDB 연결을 위해서 MongoDB 연결주소(?) Connection String URI 란 것을 제공해줘야 MongoDB 서버에 접속 가능합니다. mongodb://your_id:password@server_ip:27017/ 다음과 같은 주소를 이용하면 쉽게 데이터베이스에 접속할 수 있었습니다. 그러나 저렇게 접속하는 것은 특정 DB에 접속..