프로그래밍/웹개발(WEB) 반응형 58 렌더링 이란? 렌더링 이란? 렌더링이란 서버로부터 HTML 파일을 받아 브라우저에 보여주는 과정입니다. 브라우저는 서버로부터 HTML 문서를 받습니다. 그리고 브라우저의 렌더링 엔진은 HTML문서를 파싱 해서 DOM트리를 만들어 줍니다. 그다음 외부 CSS 파일과 함께 포함된 스타일 요소를 파싱 하여 CSSOM(CSS Object Model) 트리를 만들어 줍니다. 그 결과 인라인으로 들어가 있는 스타일 속성이 우선순위를 가지게 됩니다. 다음으로 DOM트리와 CSSOM을 결합하여 렌더링 트리를 형성합니다. 이때 화면에 드러나지 않는 head 태그나 display 속성에 none 값이 할당된 요소는 렌더 트리에 포함되지 않습니다. 다음은 기기의 뷰포트 내에서 노드들의 정확한 위치와 크기를 계산하는 과정이 진행됩니다. 이.. 2021. 8. 23. CSRF(Cross-Site Request Forgery)는 무엇일까요? CSRF(Cross-Site Request Forgery)란? CSRF는 크로스 사이트 리퀘스트 변조라고 하며 한 문장으로 정리하면 '웹 애플리케이션 유저인 자신이 의도하지 않은 처리가 실행되는 취약성 또는 공격 수법'이라고 할 수 있다. 즉, 사용자가 자신의 의지와는 무관하게 공격자의 의도한 행위를 특정 웹사이트에 요청하게 하는 공격이라고 할 수 있습니다. CSRF에 의한 피해 이용자가 의도하지 않은 처리 실행: 로그인한 이용자만 허가되어 있는 페이지가 로그인 안 한 유저에게도 노출되는 현상 등 CSRF를 방지하는 방법 Form 페이지의 반환 시에 토큰을 부여 1. 예를 들어 처음 게시판에 글을 쓰는 화면을 표시할 때 서버가 클라이언트에 대해 특정한 문자열인 토큰을 발급합니다. 2. 실제로 글을 쓸 때.. 2021. 8. 12. XSS(Cross-Site Scripting)는 무엇일까요? XSS(Cross-Site Scripting)란? 먼저, XSS란 '유저가 웹 페이지에 접속하는 것으로 올바르지 않은 스크립트가 실행되는 취약점 또는 공격 방법'을 말합니다. 사이트 간 스크립팅으로 웹 앱에서 많이 나타나는 취약점의 하나이며, 웹 사이트의 관리자가 아닌 일반 유저가 웹 페이지에 악성 스크립트를 삽입할 수 있는 취약점입니다. 출처: https://www.nascenia.com/why-cross-site-scripting-is-detrimental-and-how-to-prevent/ XSS에 의한 피해 공격자에 의해 올바르지 않은 로그인 유저의 Cookie가 공격자에 손에 넘어가는 것으로 Cookie 내에 있는 유저의 세션 정보가 공격자에 의해 사용되는 것으로, 유저를 사칭하여 서비스를 이용.. 2021. 8. 11. 스프링(Spring)에서 크로스도메인(CORS) 이슈 해결 크로스 도메인(CORS)이란? 웹 브라우저에서 Ajax 등을 통해 다른 도메인의 서버에 url(data)를 호출할 경우에 나타나는 보안 문제를 말합니다. 예시로 들자면 A라는 도메인이 있는데 브라우저 상에서 다른 B라는 도메인을 호출하게 된다면 크로스 도메인(CORS) 이슈가 발생할 수 있습니다. CORS에 대해서 자세한 내용이 알고 싶으시면 CORS 확인하기 이 글도 한번 참고 부탁드립니다. 크로스 도메인 해결방법 1. 서버 측에서 크로스 도메인을 허용하여 문제를 해결하는 방식이 있습니다. 2. 클라이언트 측에서 크로스 도메인을 해결하는 방식이 있습니다. (기본적으로 표준화된 방식은 서버 측에서 크로스 도메인을 설정하여 문제를 해결하는 방식입니다.) 스프링에서 크로스 도메인(CORS) 해결 방법 스프링.. 2021. 8. 10. CORS(Cross-Origin Resource Sharing)이란? Origin 이란? 오리진(Origin)이라는 단어가 CORS에 나와서 간단하게 먼저 정리를 해보려고 합니다. 오리진과 비슷한 개념으로는 도메인(domain)이라는게 있습니다. 간단하게 둘사이의 차이에 대해서 예시로 설명을 하자면 · 도메인(doamin): itworldyo.tistory.com · 오리진(origin): https://itworldyo.tistory.com:80 이와 같이 도메인과 오리진 둘 사이의 차이는 프로토콜(https://)과 포트번호(80)의 포함 여부입니다. CORS(Cross-Origin Resource Sharing)이란? CORS(Cross-Origin Resource Sharing)는 영문으로 해석하면 교차 출처 리소스 공유의 줄임말로 어떠한 오리진에서 작동하고 있는 .. 2021. 8. 9. submit 중복 클릭 막기 submit 중복 클릭 막기 중복 클릭으로 인해 가장 많이 발생하는 문제가 있습니다. 폼을 전송할 때 클릭이 2번 이상 발생하면서 폼이 2번 전송되어 2중으로 저장되는 경우입니다. 이러한 경우에 발생되는 submit 중복 클릭을 막는 방법을 소개해 드리겠습니다. 중복 클릭을 막는 방법에는 여러 가지가 있습니다. 1. disabled 처리 방법 자바스크립트 방법: var saveBtn = document.querySelector("#savebtn"); saveBtn.addEventListener("click", function (e) { this.setAttribute("disabled", "disabled"); //폼 서밋 }); jquery 방법: $("#saveBtn").on("click",funct.. 2021. 7. 9. 이전 1 2 3 4 5 6 ··· 10 다음
