# Google Safe Browsing Lookup API를 사용해 모든 외부 링크의 보안 상태 표시
**URL:** https://meta.discourse.org/t/showing-the-security-status-in-all-external-link-using-google-safe-browsing-lookup-api/313015
**Category:** Development
**Created:** [6월 21, 2024, 6:39오전 UTC](https://meta.discourse.org/t/showing-the-security-status-in-all-external-link-using-google-safe-browsing-lookup-api/313015 "2024-06-21T06:39:43Z")
**Posts on this page:** 14
**Page:** 1
### Author:  [@kokoloman001](https://meta.discourse.org/u/kokoloman001)
#### Post date: [6월 21, 2024, 6:39오전 UTC](https://meta.discourse.org/t/showing-the-security-status-in-all-external-link-using-google-safe-browsing-lookup-api/313015/1 "2024-06-21T06:39:43Z")
며칠 전, 포럼 회원들이 제공한 외부 링크로부터 내 웹사이트를 보호하는 전략을 찾고 있었습니다. 유해 URL에 대한 자체 데이터베이스를 구축해 보려 했지만, 생각보다 훨씬 어려웠습니다. 링크의 양이 워낙 방대해서 분류하기가 쉽지 않았죠. 그래서 제 요구사항에 맞는 API 서비스를 찾아보다가 구글이 제공하는 무료 서비스인 Google Safe Browsing API를 발견했고, 이를 Discourse 포럼에 추가해 보기로 했습니다.
제 포럼에서의 결과
\*마우스를 올렸을 때
**다음과 같이 진행했습니다.**
Discourse에서 모든 외부 링크 뒤에 아이콘을 추가하고, Google Safe Browsing Lookup API(v4)를 사용하여 링크의 보안 상태를 표시하는 툴팁을 보이려면 다음 단계를 따르세요:
1. **Google Safe Browsing용 API 키 생성** :
2. **Discourse 관리자 로그인** :
3. **테마 사용자 정의 접근** :
4. **CSS 추가** :
5. **JavaScript 추가** :
6. **테마 저장 및 적용** :
이 단계를 따르면 Discourse 인스턴스의 모든 외부 링크 뒤에 아이콘이 표시되고, Google Safe Browsing API를 사용하여 링크의 보안 상태를 보여주는 툴팁이 나타납니다.
**보안을 위한 수정 사항**
**Google API 사용에 대한 웹사이트 제한(Website limits) 섹션에 웹사이트를 추가해야 합니다.**
**옵션**
> **Font Awesome 아이콘 사용**
>
> Font Awesome 아이콘을 사용하려면 아래는 업데이트된 CSS입니다:
>
> ### Font Awesome 아이콘이 포함된 업데이트된 CSS
>
> ```css
> /* Font Awesome이 포함되었는지 확인 */
> @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css');
>
> /* 외부 링크 뒤에 Font Awesome 아이콘 추가 */
> a[target="_blank"]:after {
> content: "\f35d"; /* Font Awesome 외부 링크 아이콘의 유니코드 */
> font-family: 'Font Awesome 5 Free'; /* Font Awesome 패밀리 */
> font-weight: 900; /* Font Awesome 솔리드 가중치 */
> margin-left: 5px; /* 링크와 아이콘 사이의 간격 */
> display: inline-block;
> }
>
> ```
>
> ### 설명:
>
> 1. **Font Awesome 가져오기** :
>
> 2. **아이콘 추가** :
이 글이 저와 같은 것을 찾고 있는 분들에게 도움이 되기를 바랍니다.
---
### Author:  [@RGJ](https://meta.discourse.org/u/RGJ)
#### Post date: [6월 21, 2024, 7:07오전 UTC](https://meta.discourse.org/t/showing-the-security-status-in-all-external-link-using-google-safe-browsing-lookup-api/313015/2 "2024-06-21T07:07:28Z")
정말 멋진 아이디어네요!!
⚠ 테마 컴포넌트에 Google Cloud API 키를 포함하면 해당 키가 외부에 노출됩니다. 타인이 API 키에 접근할 경우, 매우 큰 비용 청구서가 나올 수 있습니다. ⚠
API 키의 범위를 적절히 제한하는 것(예: Safe Browsing API에만 접근 가능하도록 설정) 또는 서버 측 프록시를 추가하여 API 키를 서버에서 안전하게 관리하는 방법을 권장합니다.
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [6월 21, 2024, 7:09오전 UTC](https://meta.discourse.org/t/showing-the-security-status-in-all-external-link-using-google-safe-browsing-lookup-api/313015/3 "2024-06-21T07:09:39Z")
아니면 … 이걸 플러그인으로 만들어서 아무도 볼 수 없는 배경에서 API 통신을 계속 진행하세요.
---
### Author:  [@RGJ](https://meta.discourse.org/u/RGJ)
#### Post date: [6월 21, 2024, 7:09오전 UTC](https://meta.discourse.org/t/showing-the-security-status-in-all-external-link-using-google-safe-browsing-lookup-api/313015/4 "2024-06-21T07:09:57Z")
> [@RGJ](#):
>
> 아니면 서버 측 프록시를 추가하여 API 키를 서버에서 안전하게 보관할 수 있도록 해야 합니다.
제가 말하려던 게 바로 그거였어요 😉
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [6월 21, 2024, 7:10오전 UTC](https://meta.discourse.org/t/showing-the-security-status-in-all-external-link-using-google-safe-browsing-lookup-api/313015/5 "2024-06-21T07:10:40Z")
프록시는 일종의 특별한 중개자이기도 하며, 좋은 아이디어이기도 합니다.
확실히 OR이었습니다.
---
### Author:  [@kokoloman001](https://meta.discourse.org/u/kokoloman001)
#### Post date: [6월 21, 2024, 7:21오전 UTC](https://meta.discourse.org/t/showing-the-security-status-in-all-external-link-using-google-safe-browsing-lookup-api/313015/6 "2024-06-21T07:21:41Z")
> [@RGJ](#):
>
> 정말 멋진 아이디어입니다!!
>
> ⚠ 테마 컴포넌트에 Google Cloud API 키를 포함하면 전 세계에 노출됩니다. 사람들이 API 키에 접근할 수 있게 되면 매우 큰 요금이 청구될 수 있습니다. ⚠
>
> API 키가 충분히 제한된 범위(예: Safe Browsing API에만 접근 가능)로 설정되어 있는지 확인하거나, 서버 측 프록시를 추가하여 API 키를 서버에서 안전하게 유지해야 합니다.
훌륭한 조언 감사합니다. 😊 Google Cloud Console에서 API 접근을 차단하는 메커니즘이 있는 것 같습니다. 해당 웹사이트를那里에 추가하세요.
---
### Author:  [@kokoloman001](https://meta.discourse.org/u/kokoloman001)
#### Post date: [6월 21, 2024, 7:23오전 UTC](https://meta.discourse.org/t/showing-the-security-status-in-all-external-link-using-google-safe-browsing-lookup-api/313015/7 "2024-06-21T07:23:56Z")
> [@merefield](#):
>
> 아니면… 이걸 플러그인으로 만들어서 API 통신은 아무도 볼 수 없는 백그라운드에서 진행하게 하면 어떨까요.
플러그인을 작성할 수 있는 기술이 부족해서요. 제 생각에 이 전략은 기본적이고 직관적인 방법입니다. 하지만 플러그인을 만들려는 분들이 있다면, 제 방식보다 훨씬 낫다고 생각합니다. 그리고 그렇게 된다면 정말 기쁠 것 같아요.
---
### Author:  [@Jagster](https://meta.discourse.org/u/Jagster)
#### Post date: [6월 21, 2024, 8:11오전 UTC](https://meta.discourse.org/t/showing-the-security-status-in-all-external-link-using-google-safe-browsing-lookup-api/313015/8 "2024-06-21T08:11:44Z")
그리고 그 사이에, 이 건이 기능 요청으로 가치가 있다고 제안하고 싶습니다.
(해당 서비스가 책임이 있는지는 제가 알지 못합니다)
---
### Author:  [@RGJ](https://meta.discourse.org/u/RGJ)
#### Post date: [6월 21, 2024, 8:26오전 UTC](https://meta.discourse.org/t/showing-the-security-status-in-all-external-link-using-google-safe-browsing-lookup-api/313015/9 "2024-06-21T08:26:54Z")
> [@kokoloman001](#):
>
> 플러그인을 작성할 수 있는 기술이 부족하기 때문입니다. 이 전략은 기본적이고 직관적이라고 생각합니다. 하지만 직접 만들어 보고 싶은 분들이 계신다면, 제 방식보다 더 나은 방법일 거라고 믿습니다. 그리고 그럴 경우 정말 기쁠 것입니다.
무엇을 약속하진 못하지만, 앞으로 몇 달 안에 시간이 나면 이 제안을 반드시 검토해 보겠습니다.
---
### Author:  [@kokoloman001](https://meta.discourse.org/u/kokoloman001)
#### Post date: [6월 21, 2024, 10:56오전 UTC](https://meta.discourse.org/t/showing-the-security-status-in-all-external-link-using-google-safe-browsing-lookup-api/313015/10 "2024-06-21T10:56:16Z")
관심을 가져주셔서 정말 기쁩니다. 그리고 이 플러그인을 만들겠다는 의사를 보여준 점도 감사드립니다.
---
### Author:  [@kokoloman001](https://meta.discourse.org/u/kokoloman001)
#### Post date: [6월 21, 2024, 10:59오전 UTC](https://meta.discourse.org/t/showing-the-security-status-in-all-external-link-using-google-safe-browsing-lookup-api/313015/11 "2024-06-21T10:59:29Z")
> [@Jagster](#):
>
> 그리고 저는 이것이 기능 요청으로 가치가 있을 수 있다고 제안하고 싶습니다.
>
> (해당 서비스가 책임이 있는지 여부는 제가 알지 못합니다)
이것이 해당 기능에 포함되기를 바라며, 그렇게 되어 기쁩니다.
---
### Author:  [@Westcan](https://meta.discourse.org/u/Westcan)
#### Post date: [7월 23, 2024, 7:29오후 UTC](https://meta.discourse.org/t/showing-the-security-status-in-all-external-link-using-google-safe-browsing-lookup-api/313015/12 "2024-07-23T19:29:28Z")
이 기능이 Discourse의 셀프 호스팅 버전에서도 작동하는지 아시는 분 계신가요? 관리자 화면에서 테마 설정을 "사용자 정의"할 수 있는 옵션이 보이지 않습니다.
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [7월 23, 2024, 7:34오후 UTC](https://meta.discourse.org/t/showing-the-security-status-in-all-external-link-using-google-safe-browsing-lookup-api/313015/13 "2024-07-23T19:34:41Z")
해당 테마에는 테마 설정이 없으며, 설정 파일이 비어 있습니다:
>
또한, GitHub에서 다운로드한 테마를 변경하려면 포크를 생성한 후 해당 포크를 수정하고, 그 포크를 사용해야 합니다.
---
### Author:  [@Moin](https://meta.discourse.org/u/Moin)
#### Post date: [7월 23, 2024, 7:39오후 UTC](https://meta.discourse.org/t/showing-the-security-status-in-all-external-link-using-google-safe-browsing-lookup-api/313015/14 "2024-07-23T19:39:57Z")
새로운 테마 컴포넌트를 생성하여 테마에 추가할 수 있습니다.