프론트엔드
-
Querystring프론트엔드/javascript 2024. 12. 29. 13:26
QueryString QueryString(쿼리 문자열) 개념**QueryString(쿼리 문자열)**은 URL에서 데이터를 전달하기 위해 사용되는 문자열입니다. 이는 일반적으로 URL의 끝에 붙으며, ?로 시작하고, 여러 개의 키-값 쌍이 &로 연결되어 있습니다. 웹 애플리케이션은 QueryString을 사용하여 서버와 클라이언트 간 데이터를 주고받거나 특정 페이지를 동적으로 구성합니다.QueryString의 구조URL에서 QueryString은 다음과 같은 구조를 가집니다:https://example.com/page?key1=value1&key2=value2?: QueryString의 시작을 나타냄.key1=value1: 첫 번째 키-값 쌍.&: 여러 키-값 쌍을 구분.key2=value2: 두 번째..
-
[HTTP 보안]CORS프론트엔드/HTTP 2024. 12. 29. 12:42
[HTTP 보안]CORS CORS(Cross-Origin Resource Sharing)**CORS(Cross-Origin Resource Sharing)**는 웹 브라우저에서 한 출처(origin)의 애플리케이션이 다른 출처의 리소스에 접근할 수 있도록 제어하는 메커니즘입니다. 기본적으로 브라우저는 **Same-Origin Policy(SOP)**라는 보안 정책을 따르는데, SOP는 다른 출처 간의 리소스 요청을 제한합니다. CORS는 이 제한을 완화할 수 있도록 설계된 표준입니다.CORS가 필요한 이유웹 애플리케이션은 종종 다른 출처의 API나 리소스(이미지, 글꼴, 데이터 등)에 접근해야 합니다. 예를 들어:클라이언트가 http://example.com에서 실행 중인데, 서버가 https://api..
-
[HTTP 보안]CSP vs SOP프론트엔드/HTTP 2024. 12. 29. 12:41
[HTTP 보안]CSP vs SOP **CSP(Content Security Policy)**와 **SOP(Same-Origin Policy)**는 웹 보안을 강화하기 위한 두 가지 중요한 개념으로, 각각 다른 방식으로 애플리케이션을 보호합니다. 아래에서 이 둘을 비교하며 설명하겠습니다.1. 정의CSP (Content Security Policy)웹 애플리케이션에서 실행 가능한 리소스의 출처를 명시적으로 제한하여, 악성 스크립트 실행(XSS), 데이터 유출 등의 보안 위협을 방지하는 보안 메커니즘.개발자가 HTTP 응답 헤더 또는 태그를 사용해 정책을 설정.SOP (Same-Origin Policy)웹 브라우저가 한 출처(origin)의 리소스가 다른 출처의 리소스에 접근하는 것을 제한하여, 크로스사이..
-
[HTTP 보안]escape프론트엔드/HTTP 2024. 12. 29. 12:38
[HTTP 보안]escape HTTP 보안 기법 중 하나인 **escape(이스케이프 처리)**는, 입력값에 포함된 특수 문자를 다른 문자나 표현으로 변환하여 웹 애플리케이션이 입력값을 안전하게 처리할 수 있도록 하는 보안 기술입니다. 주로 크로스 사이트 스크립팅(XSS), SQL 인젝션, 경로 조작 등과 같은 보안 취약점으로부터 보호하기 위해 사용됩니다.Escape의 목적특수 문자가 의도치 않은 명령으로 실행되지 않도록 방지.사용자 입력값을 안전하게 처리하여 애플리케이션과 데이터의 무결성을 유지.코드 실행, 데이터베이스 명령어 삽입, 경로 조작 등의 보안 위협을 차단.Escape 처리의 작동 방식특정 특수 문자나 태그를 해당 플랫폼이나 문맥에서 무해한 문자로 변환합니다.1. HTML Escape (XS..
-
[HTTP 보안]sanitize프론트엔드/HTTP 2024. 12. 29. 12:37
[HTTP 보안]sanitizeHTTP 보안 기법 중 하나인 **sanitize(입력값 정화)**는, 사용자가 제공한 입력 데이터를 검증하고 정리하여 웹 애플리케이션이 이를 안전하게 처리할 수 있도록 하는 보안 기법입니다. 이는 주로 SQL 인젝션, 크로스 사이트 스크립팅(XSS), 경로 조작 등 다양한 공격 벡터로부터 애플리케이션을 보호하기 위해 사용됩니다.Sanitize의 주요 목적사용자 입력에 포함될 수 있는 악성 코드나 예상치 못한 데이터를 제거하거나 수정.애플리케이션에서 사용되는 데이터의 무결성과 보안을 유지.악성 입력값을 사용하여 시스템을 공격하는 것을 방지.Sanitize가 적용되는 주요 영역HTML 및 JavaScript (XSS 방지)HTML 코드나 JavaScript 코드에서 악성 스크..
-
[HTTP 기본]curl프론트엔드/HTTP 2024. 12. 28. 18:59
[HTTP 기본]curl curl은 데이터를 서버와 주고받기 위한 명령줄 기반의 도구이자 라이브러리입니다. 다양한 프로토콜을 지원하며, 파일 다운로드, API 호출, 데이터 전송 등 네트워크와 관련된 작업을 간단히 수행할 수 있습니다. "Client URL"의 약자로, 주로 HTTP 요청을 테스트하거나 API와 상호작용하는 데 사용됩니다.주요 특징다양한 프로토콜 지원:HTTP, HTTPS, FTP, FTPS, SCP, SFTP, SMB, TFTP, TELNET, LDAP 등 다양한 네트워크 프로토콜을 지원합니다.플랫폼 독립적:Windows, macOS, Linux 등 대부분의 운영체제에서 사용 가능합니다.라이브러리 지원:libcurl이라는 C 기반 라이브러리를 제공하여, 애플리케이션 내에서 네트워크 통..
-
[HTTP 추가 프로토콜]WebSocket프론트엔드/HTTP 2024. 12. 28. 18:41
[HTTP 추가 프로토콜]WebSocketWebSocket은 서버와 클라이언트 간의 양방향 통신을 지원하는 통신 프로토콜입니다.일반적인 HTTP 요청/응답 방식과 달리, 하나의 연결을 유지한 상태에서 양방향 데이터 교환을 실시간으로 수행할 수 있습니다. WebSocket은 HTML5 표준의 일부로 정의되었으며, 웹 애플리케이션에서 실시간 데이터 전송을 필요로 하는 다양한 경우에 활용됩니다.주요 특징양방향 통신:서버와 클라이언트가 모두 데이터를 주고받을 수 있습니다. 클라이언트의 요청 없이도 서버는 데이터를 푸시(push)할 수 있습니다.지속적인 연결:초기 연결 이후, 클라이언트와 서버 간의 연결이 유지되며, 재연결 없이 데이터를 주고받을 수 있습니다.저지연 및 효율성:HTTP 프로토콜처럼 요청/응답 과정..
-
[HTTP 추가 프로토콜]Server-Sent Events(SSE)프론트엔드/HTTP 2024. 12. 28. 18:24
[HTTP 추가 프로토콜]Server-Sent Events(SSE) Server-Sent Events(SSE)는 서버가 클라이언트로 실시간 데이터를 푸시(push) 하는 방법을 제공하는 HTML5 표준 기술입니다. 이는 주로 브라우저와 서버 간의 단방향 통신을 위해 사용되며, 클라이언트는 서버에서 전송하는 이벤트를 수신합니다.주요 특징단방향 통신:서버 → 클라이언트 방향으로만 데이터를 보냅니다. 클라이언트는 데이터를 받을 수 있지만, 서버로 데이터를 보낼 수는 없습니다. (클라이언트에서 서버로 데이터를 보내려면 AJAX, WebSocket 등을 추가로 사용해야 함)HTTP 기반:기존 HTTP 프로토콜을 사용하여 쉽게 구현 가능하며, 브라우저에서 기본적으로 지원됩니다.텍스트 기반 전송:서버는 일반 텍스트 ..