# JSONP
SOP, JSONP(JSON with Padding), 그리고 CORS
SOP(Same Origin Policy) > 다른 출처(origin)의 리소스를 사용하는 것을 제한하는 보안 방식 Origin이란? URL의 protocol, host(domain), port를 통해 정함 https:// github.com :3000/howooking 이중 하나라도 다르면 다른 출처로 인식함 why? 예시 패캠 https://fastcampus.com은 로그인만 하여도 추가적인 인증절차없이 강의를 결제할 수 있다고 가정하자. 패캠에 로그인을 하면 패캠에서는 인증토큰을 보내주고 브라우저에 저장된다. 해커가 나에게 http://hacker.com로 접속을 유도한다. 해커가 만든 사이트의 html, css, js가 내 브라우저에 받아진다. 해커는 js에 나의 인증토큰을 담아 패캠에게 모든 강의를 결제하라는 코드를 심는다. 이 때 패캠은 `http://hacker.co

[혼공] Same Origin Policy 정책 실습해보자
공부하게 된 이유 dreamhack 에서 CS 기본 지식을 공부하게 되었다. Same Origin Policy(SOP)란? 우리가 브라우저 요청을 보낼 때 해당 웹 서비스에서 사용하는 인증 정보인 쿠키를 HTTP 요청에 포함시켜 전달한다. 또한, 웹 리소스를 통해 간접적으로 타 사이트에 접근할 때도 인증 정보인 쿠키를 함께 전송하기도 한다. 이 특징 때문에 악의적인 이용자가 이 쿠키를 가로채어 이용자 권한을 이용해 서버에 HTTP 요청을 보내고, HTTP 응답 정보를 획득하는 코드를 실행할 수 있다. 이와 같은 문제를 방지하기 위해 데이터를 악의적인 페이지에서 읽 수 없도록 하는 * 동일 출처 정책, SOP 보안메커니즘*이 탄생했다. Same Origin Policy의 오리진(Origin) 구분 방법 구성 요소가 모두 일치해야 올바른 오리진이라고 한다. 구성 요소 :

[에러 해결] Jquery JSONP
오류내용 Jquery를 사용하여 ajax 통신을 하던중 에러를 만났다. 문제 확인 ajax로 json 형식 데이터를 송신할때 발생한 에러였는데, 개발자도구에서 요청 바디를 보니 데이터가 아래와 같이 변경되어 발송되었다. jQuery2130971653587497908_1673324765685???? 해결 방법 간단하게 해결이 가능했다. ajax에서 jsonp 설정을 꺼주면 문제가 해결되었다. 추가 JSONP 은 JSON with Padding 이라는 뜻으로, CORS가 활성화 되기 이전에
JSONP
웹에서 axios 로 iTunes Search API 를 사용하니까 CORS 에러가 났다. 검색하다보니 Stackoverflow 에서 이런얘기가 있었다. > iTunes Search Api returns a file instead of the simple JSON. You can get the data with the help of JSONP request.You cannot ca
2021 Chrome deprecated
출처 https://ko.wikipedia.org/wiki/JSONP https://blog.kingbbode.com/26 https://webisfree.com/2015-01-08/[%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8]-%ED%81%AC%EB%A1%9C%EC%8A%A4%EB%8F%84%EB%A9%94%EC%9D%B8-%EC%84%9C%EB%B8%8C%EB%8F%84%EB%A9%94%EC%9D%B8-%EC%A0%91%EA%B7%BC%EB%B0%A9%EB%B2%95-document-domain https://intro0517.tistory.com/146 https://oybso.tistory.com/entry/documentdoma
.png)
SOP(Same-Origin Policy)
SOP? 동일 출처 정책(SOP, Same-Origin Policy)는 웹 브라우저 보안을 위해 Same-Origin(프로토콜, 호스트, 포트가 같은)의 서버로만 리소스를 주고 받도록 상호작용을 제한하는 보안 방식입니다. 이러한 SOP를 이용해 악의적인 리소스를 분리해서 공격의 경로를 줄일 수 있습니다. SOP 적용범위 기본적으로 HTTP Request는 Cross-Site HTTP Request(교차 출처 요청)이 가능하므로 모든 HTTP 요청에 SOP가 적용되는 것은 아닙니다. SOP 허용 SOP가 적용되지 않는 Cross-Origin의 예는 다음과 같습니다. `` 태그로 다른 도메인의 이미지 파일 요청 `` 태그로 다른 도메인의 CSS 요청 `` 태그로 다른 도메인의 js 파일 요청 특히 `` 태그가 SOP 정책에 속하지 않기 때문에, SOP 우회를 위해서

TIL 1월 26일 - jsonp
JSONP JSONP란? JSON with Padding same-origin policy를 우회하기 위해 쓰이는 기술 ` element는 cross-origin이 가능하나 ajax는 가능하지 않다. 이를 이용해서 `를 이용해 data를 요청하는 우회 기술이다. JSONP는 이제 과거의 유산이 돼버린 기술이라고 할 수 있다. 그리고 제한점이나 여러 보안이슈 때문에 사용하지 않는것도 권한다고 한다. 그렇지만 jQuery처럼 여전히 여기저기서 쓰이고 있기 때문에 어느정도 이해가 필요하다고 생각한다. 사용법 기본적으로는 client측에서 ``의 src로 요청 주소와 callback의 이름을 명시해주고 서버측에서는 데이터를 callback의 이름으로 감싸서 text로 응답을 보낸다. 해당 callback은 client측에 존재해야하고, window에 바인드되어 있다. 정해진 형식

JSONP란?
이 글을 작성하게 된 이유 코드스피츠 스터디의 2회차 강의를 복습하던 중 수업 예제에서 발생한 에러를 해결하다가 공부하게된 내용을 정리하게되었습니다. JSONP란? JSONP란 CORS가 활성화 되기 이전의 데이터 요청 방법으로, 다른 도메인으로부터 데이터를 가져오기 위해 사용하는 방법입니다. 자바스크립트는 서로 다른 도메인에 대한 요청을 보안상 제한하는데, 이 정책은 Same-Origin Policy, SOP라고 합니다. SOP 정책으로 인해 생기는 이슈를 Cross-domain issue라고 하는데 JSONP는 이 이슈를 우회해서 데이터 공유를 가능하게 하였습니다. JSONP 동작방식 JSONP는 HTML 문서의 script 태그로 다른 도메인을 요청 할 시 SOP 정책이 적용되지 않는 방식을 이용하여 동작합니다. script 태그는 src 속성 값을 호출한 결과를 javascript로 불러와서 즉시 실행시키는 기능입니