본문 바로가기

분류 전체보기34

[Web Security] X-Frame-Options 헤더 X-Frame-Options는 사이트가 iframe 내에서 프레임을 구성하는 방법을 제어할 수 있는 HTTP 헤더이다. Clickjacking은 악성 사이트가 사이트에 전혀 존재하지 않는 것처럼 보이지만, 사용자가 사이트에 있는 링크를 클릭하도록 속이는 실질적인 공격이다. 따라서, X-Frame-Options 헤더의 사용은 모든 새로운 웹 사이트에 필수이며, 모든 기존 웹 사이트는 가능한 빠르게 X-Frame-Options에 대한 지원을 추가할 것으로 예상된다. 매개변수 DENY: iframe 사이트 시도를 허용하거나 미허용(권장) SAMEORIGIN: 사이트에서 자체 iframe을 허용 ALLOW-FROM uri: deprecated; 예시 # X-Frame-Options와 CSP로 사이트가 프레인되지.. 2021. 10. 8.
Object Array에서 특정 value의 object를 맨 앞으로 옮기는 방법 Object로 이루어진 배열에서 특정 value가 포함되어있는 object를 배열의 맨 앞으로 옮기는 방법이다. 아래와 같은 데이터가 있다고 가정해보자. const data = [ { index: 1, id: "aaa", name: "aaa", }, { index: 2, id: "bbb", name: "bbb", }, { index: 3, id: "ccc", name: "ccc", } ]; 위 배열에서 name이 bbb인 데이터를 앞으로 하려면 어떻게 해야 할까? 여러 가지 방법이 있겠지만, 가장 간단한 방법으로 spread 연산자를 이용할 수 있다. const newArr = [ ...data.filter(d => d.name === `bbb`), ...data.filter(d => d.name !==.. 2021. 10. 8.
[CSS] 스크롤바 없애기 Content Content Content Content Content Content .... Content Content Content Content .container{ -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } .container::-webkit-scrollbar{ display: none; } 2021. 7. 21.
[Web Security] X-XSS-Protection 헤더 X-XSS-Protection은 Cross-Site Scripting(XSS) 공격이 감지되었을 때, 페이지 로딩을 멈추도록 하는 Internet Explorer와 Crome의 기능입니다. 이러한 보호는 사이트가 Inline Javascript(unsafe-inline)의 사용을 비활성화하도록 강력하게 Content Security Policy를 구현했을 때, 모던 브라우저에서는 거의 필요하지 않을 수는 있습니다. 그러나 아직 CSP를 지원하지 않는 이전 웹 브라우저의 사용자에게는 여전히 보호 기능을 제공할 수 있습니다. 새로운 웹 사이트는 이 헤더를 사용해야 하지만, 오탐지 위험이 적기 때문에, 기존 사이트에만 권장됩니다. 이 헤더는 API에 필요하지 않으며, 대신 제한적인 Content Securit.. 2021. 7. 15.
[React]내가 개발한 사이트의 보안점수 확인하는 방법 React로 개발된 어플리케이션을 서버에 배포하기 위해서 운영팀에서 제공하는 보안점검을 실시했습니다. 보안점검의 결과로 웹 서버의 HTTP 보안 헤더가 설정되어 있지 않다는 결과를 받았더라구요 ㅠㅠ 보안점검 결과만 받았을 때는 무슨 말인지 전혀 알지 못해서 하나씩 찾아보면서 보안 헤더를 적용했고, 그 방법을 차근차근 정리해보려고 합니다. 먼저, 첫 번째로 내가 개발한 사이트가 현재 보안설정이 잘 되어있는지 확인할 수 있는 사이트입니다. 이 사이트는 mozilla에서 개발자, 관리자, 보안 담당자에게 사이트가 안전하게 구성되어있는지 확인할 수 있게 도와주고, 구성되어있지 않으면 구성하는 방법도 설명해주는 좋은 사이트입니다. https://observatory.mozilla.org/ Mozilla Obser.. 2021. 6. 22.
[react-native] expo Error: EMFILE: too many open files, watch 에러 해결 방법 expo를 React Native를 사용해서 react-native를 공부하고 있는데, expo start를 입력했을 때, 아래와 같은 오류가 발생했습니다. Error: EMFILE: too many open files, watch 위와 같은 에러가 발생 할 경우, 다음과 같은 방법으로 해결하면 됩니다. brew update brew install watchman 2021. 6. 14.
useEffect의 cleanup 함수 내에서 DOM Ref 사용하기 React를 이용해 어플리케이션을 개발할 때, useRef 로 DOM에 접근해 이벤트를 설정하거나, DOM을 함수 파라미터로 사용하는 경우가 있습니다. 간단한 예시를 통해 먼저 살펴보겠습니다. App 컴포넌트가 마운트되면, useEffect에서 태그에 이벤트를 할당하고, unmount될 때, 이벤트를 제거하도록 설정했습니다. import { useEffect, useRef } from "react"; export default function App() { const divRef = useRef(null); const handleEvent = () => { alert("click"); }; useEffect(() => { if (!divRef.current) { return; } divRef.curren.. 2021. 5. 28.
이벤트 버블링과 캡처링 버블링 버블링(bubbling)의 원리는 한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작한다. 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작한다. 3개의 요소가 form > div > p 형태로 중첩된 구조일 경우 가장 안 쪽의 를 클릭하면 순서대로 다음과 같은 일이 벌어진다. 에 할당된 onclick 핸들러가 동작한다. 바깥의 에 할당된 핸들러가 동작한다. 그 바깥의 에 할당된 핸들러가 동작한다. document 객체를 만날 때까지 각 요소에 할당된 onclick 핸들러가 동작한다. 이런 흐름을 "이벤트 버블링"이라고 부른다. 이벤트가 제일 깊은 곳에 있는 요소에서 시작해 부모 요소를 거슬러 올라가며 .. 2021. 5. 27.
2021년에 배워야할 4가지 Javascript ES2021 기능 본 글은 아래 글을 번역한 글입니다. 부족해도 이해해 주세요😆 https://medium.com/dailyjs/4-javascript-es2021-es-12-features-that-you-should-learn-in-2021-d8cd6343bb12 4 JavaScript ES2021 (ES 12) Features That You Should Learn in 2021 The logical assignment operator, Promise.any, and more medium.com 매년 자바스크립에 추가되는 새로운 기능은 4단계 프로세스를 거친다. 살펴볼 새로운 기능은 현재 4단계이고, 마지막 단계이다. 2021년 중반에 출시될 것으로 예상된다. String.prototype.replaceAll Str.. 2021. 5. 27.