반응형
구글 자동완성 API로 TEXT 자동완성 기능 사용하기
QuickSearch를 업데이트를 적용하면서 나름 유용한 기능같아 따로 포스트 작성합니다.
우리가 구글에 "아" 를 입력하면 이렇게 자동완성이 뜨는것을 확인할 수 있습니다.
이와 똑같은 기능을 구현하는 코드입니다.
기본적인 코드는 아래와 같습니다
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<title>Document</title>
</head>
<body>
<input type="text" id="input_text">
<table class="tables">
</table>
</body>
<script>
$('#input_text').keyup(function(){
$.ajax({
url: "https://suggestqueries.google.com/complete/search?output=chrome&hl=ko&q="+$('#input_text').val(),
dataType: "json",
method: "GET"
})
.done(function(json) {
$('.tables').empty();
for (var i = 0; i < json[1].length ; i++){
$('.tables').append('<th>'+json[1][i]+'</th>');
}
})
});
</script>id가 input_text에 keyup 할경우 url 맨 뒤에 id가 input_text의 value를 넣고 GET방식으로 호출하여 JSON 형식으로 받습니다.
성공할 경우 `받아온 데이터[1]의 길이만큼 반복` -> class가 tables 인 요소를 비우고 `받아온 데이터[1][i]번째` 요소를 추가시킵니다.
하지만 여기서 코드를 실행시키면 아마 오류가 날겁니다.
저는 아래와 같은 문제를 겪었습니다.
- SameSite 경고
- CORS Policy 문제
SameSite 경고
아래 코드를 JS에 추가하면 해결됩니다.
인용 출처
Cookie SameSite 설정하기 SameSite 관련 경고
프로젝트 개발을 하다 콘솔창위에 문제라는 탭을 발견했다,그곳에 빨간표시로 경고메지시가 있었다.살펴보니이런경고메시지가 떳다.구글번역에 돌려보니쿠키의 SameSite의 속석값을 바꾸라는
velog.io
SameSite는 말 그대로 쿠키 전송에 있어 '같은 사이트'인지 체크하는 것입니다. Cookie의 SameSite 속성은 서로 다른 도메인간의 쿠키 전송에 대한 보안을 설정한다. "None"은 동일 사이트과 크로스 사이트에 모두 쿠키 전송이 가능하다. 그리고 "Strict"로 설정할 경우 서로 다른 도메인에서는 아예 전송이 불가능해 지기 때문에 CSRF를 100% 방지할 수 있으나 사용자 편의성을 많이 해치게 된다.
document.cookie = "safeCookie1=foo; SameSite=Lax";
document.cookie = "safeCookie2=foo";
document.cookie = "crossCookie=bar; SameSite=None; Secure";로컬에서 작동 시 해결되지 않습니다.
CORS Policy 문제
dataType를 json 말고 jsonp 로 작성하면 해결됩니다.
인용 출처
교차 출처 리소스 공유 (CORS) - HTTP | MDN
교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라
developer.mozilla.org
교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제입니다.
웹 애플리케이션은 리소스가 자신의 출처(도메인, 프로토콜, 포트)와 다를 때 교차 출처 HTTP 요청을 실행합니다.
교차 출처 요청의 예시: https://domain-a.com의 프론트 엔드 JavaScript 코드가 XMLHttpRequest를 사용하여 https://domain-b.com/data.json을 요청하는 경우. 보안 상의 이유로, 브라우저는 스크립트에서 시작한 교차 출처 HTTP 요청을 제한합니다. 예를 들어, XMLHttpRequest와 Fetch API는 동일 출처 정책을 따릅니다.
즉, 이 API를 사용하는 웹 애플리케이션은 자신의 출처와 동일한 리소스만 불러올 수 있으며, 다른 출처의 리소스를 불러오려면 그 출처에서 올바른 CORS 헤더를 포함한 응답을 반환해야 합니다.
결과
수정된 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<title>Document</title>
</head>
<body>
<input type="text" id="input_text">
<table class="tables">
</table>
</body>
<script>
document.cookie = "safeCookie1=foo; SameSite=Lax";
document.cookie = "safeCookie2=foo";
document.cookie = "crossCookie=bar; SameSite=None; Secure";
$('#input_text').keyup(function(){
$.ajax({
url: "https://suggestqueries.google.com/complete/search?output=chrome&hl=ko&q="+$('#input_text').val(), // 클라이언트가 HTTP 요청을 보낼 서버의 URL 주소
dataType: "jsonp",
method: "GET"
})
.done(function(json) {
$('.tables').empty();
for (var i = 0; i < json[1].length ; i++){
$('.tables').append('<th>'+json[1][i]+'</th>');
}
})
});
</script>
</html>
반응형
'프로그래밍 > WEB' 카테고리의 다른 글
| [플러그인]QuickSearchWidget (2) | 2023.06.24 |
|---|---|
| 나만의 브라우저 시작페이지3.0 - 시작페이지 꾸미기 (0) | 2023.06.13 |
| 나만의 브라우저 시작페이지 (0) | 2023.05.29 |
