2016-12-29 6 views
3

노드/익스프레스 백엔드를 구축 중입니다. 내 reactjs 프론트 엔드 (개인 API)에서만 작동하는 API를 만들고 싶습니다.내 프런트 엔드에서만 작동하도록 API 보안하기

전자 상거래 웹 사이트 인 경우 내 사용자가 제품을 검색 한 다음 구매할 제품을 선택하고 주문할 때 로그인할지 여부를 결정하십시오.

API가 내 reactjs 프런트 엔드에서만 작동하는지 확인하는 가장 좋은 방법은 무엇입니까?

사용자가 로그인을 결정하거나 손님으로 남아있을 경우 어떻게됩니까?

+0

전에 익스프레스를 사용하지 않았습니까? 'app.get ('some/route/here', authHandlerHere, requestHandlerHere);'당신의 인증 핸들러는'req.isAuthenticated()와 같은 일을 할 수 있습니까? next() : res.sendStatus (401); ' –

+0

적어도 두 가지 질문이 있으며 어느 경우에도 너무 광범위합니다. Express, PassportJS의 문서를 읽고 라우팅 및 인증을 이해하고 크로스 사이트 요청 위조 보호를 찾으십시오. 그런 다음 여기에 코드를 게시하면 작동하지 않습니다. – Paul

답변

-1

하나의 방법 서버에서 AJAX 요청을 보내는 동안 apiKey : some key와 같은 somekey가 포함 된 헤더를 보내십시오. 서버를 수신하고 반응 애플리케이션이 제공되는 도메인을 인증 할 때마다 서버에서. 그렇지 않으면 응답 할 필요가 없습니다. 예 :

app.get('/route', function(req, res) { 
    if(req.headers.apiKey == "some key) // respond with success 
    // respond with 401 Forbidden 
}); 

그래서 서버에 도달하는 모든 요청에는 내가 작동하도록 apiKey가 있어야합니다.

+0

이것은 매우 가난하고 불완전한 예입니다. 또한 작성된대로 API 키를 쉽게 훔칠 수 있습니다. – Paul

2

적용 CORS - 서버는 API를 요청할 수있는 도메인을 지정합니다.

어떻게 작동합니까?

  1. 클라이언트는 도메인 요청의 출처가 허용 도메인인지 여부를 묻는 OPTIONS 메서드의 특수 "프리 플라이트"요청을 서버에 보냅니다. 또한 요청 방법이 OKAY인지 묻습니다 (GET을 허용 할 수 있지만 POST는 거부합니다 ...).
  2. 서버는 요청을 허용할지 거부 할지를 결정합니다. 그것은 "OK"응답으로 응답하고 허용되는 도메인/요청 방법을 알려주는 특수 헤더를 설정합니다. 클라이언트가 당신의 API를 조회 할 수있는 경우
  3. , 그것은 할 수있을 것입니다 (브라우저가 할) CORS를 존중 않습니다 (또는 거부하지 않을 경우) 요청, 또는 밖으로 보석금 ...

클라이언트를 구성 수행 잇다. 클라이언트가 CORS 무시하는 경우 (REST 클라이언트, CLI 도구를 ...)는 ... 아직

, 서명 요구 요청 (승인) 상관없이 연결할 수있을 것입니다

0

그래서,이 약간이 될 수 있습니다 오랜 대답 -하지만 당신은 다소 재미 있고 중요한 질문을 올렸습니다.

이런 종류의 일을 처리하기 위해 대부분의 시간을 노드와 파이썬에 쓰는 사람으로, 나는 여기에 뛰어들 것이라고 생각했다.

React 앱과 백엔드 API를 보호하기 위해 사용하려는 프로토콜은 OAuth2 암호 부여 플로우입니다. 이론적으로 작동하는 방식은 아주 간단합니다.

React 앱에서 사용자의 사용자 이름/비밀번호를 수집합니다. 이는 사용자의 애플리케이션을 구성한 방법 인 경우 이메일/비밀번호가 될 수도 있습니다.

POST api.myapp.com/oauth/token 

grant_type=password&username=USERNAME&password=PASSWORD 

은 서버에 게시 할 때 application/x-www-form-urlencoded 콘텐츠 형식을 사용하십시오 :

당신은 다음과 같은 형태 백엔드 API에 POST 요청을 보냅니다.

서버가이 요청을 받아서 OAuth2 라이브러리를 통해 실행하고 두 개의 토큰, 액세스 및 새로 고침 토큰을 생성합니다.

서버 측 API에서 토큰을 생성하면 쿠키에 토큰을 저장 한 다음 사용자 브라우저에 저장합니다.

이 시점부터 모든 것이 자동으로 이루어져야합니다. React 서버가 백엔드에 API 요청을하면 브라우저는 두 개의 토큰을 자동으로 포함하는 쿠키를 통해 사용자를 식별합니다.

당신이이 같은 일을 처리하므로, 서버 측에 대한 OAuth2를 라이브러리를 사용해야합니다

:

  • 생성 토큰.
  • 만료되면 새 액세스 토큰에 대한 새로 고침 토큰을 교환합니다.
  • 토큰을 기반으로 사용자를 식별합니다.
  • 해지 토큰 그들이 손상된 경우 등

거기에 꽤 많은 더 많은,하지만이 기본, 높은 수준의 생각이다.

알 수 있듯이 여기에는 API 키가 없습니다. 신뢰할 수없는 환경 (예 : 모바일 앱 또는 클라이언트 측 자바 스크립트 앱)을 사용하는 경우 영구 API 토큰을 저장하는 데 전혀 안전하지 않은입니다. 이유는 소스 코드 또는 자바 스크립트에서 쉽게 추출 할 수 있기 때문입니다. 안전하지 않은 위치에 저장

  • 영구 자격 증명 : 당신이 보호 많이 얻을로 대신 위에서 언급 한 흐름을 사용

    훨씬 안전합니다.

  • 수명이 짧은 토큰이 식별자로 사용됩니다. 이들은 시간이 지남에 따라 회전합니다.
  • 토큰은 Javascript에 액세스 할 수없는 쿠키에 저장됩니다. 이는 웹 노출의 위험이 적다는 것을 의미합니다. 희망이 도움이 : -
  • 암호는 세션의 기간 동안, 한 번 교환이 덜 중요한 정보

는 어쨌든) = 자주 와이어를 통해 것입니다 의미합니다!

일부 도구를 찾으려면 oauth 라이브러리 (서버 측)가이 정보를 제공해야합니다. 이 작업을 수행 할 수있는 서비스를 찾고 있다면 작업중인 제품을 확인하십시오 (Stormpath). 유료 서비스이지만 사용자를 대신하여 이러한 복잡성을 많이 처리합니다.

+0

OAuth는 귀하의 통제하에 있지 않은 도메인에서 API에 액세스하는 것을 어떻게 보호합니까? – Andreyco

+0

그렇지 않습니다. 그러나 많은 사람들이하는 일은 응용 프로그램 ID를 만들어 허용 목록별로 각 응용 프로그램에 할당하는 것입니다. 이렇게하면 매우 단순한 '보호'형식을 사용할 수 있지만 공격자가 쉽게이 번호를 찾을 수는 있지만 허용 목록에있는 응용 프로그램 ID의 요청 만 허용 할 수 있습니다. – rdegges

+0

위 정보를 제공해 주셔서 감사합니다. 매우 유용합니다. –

1

이 사용 사례는 흥미로운 사례이며 많은 전자 상거래 사이트에서 문제가된다고 생각합니다. 내가 작업하고있는 product은 실제로 모바일 공간에서 이런 종류의 것을 처리하려고하는 회사들과 대화를 나누었습니다. 사용자 로그인은 누가 API를 사용하고 있는지 알려주지 만 사람들에게 사용자 이름/로그인을 강요하지 않으려면 다른 솔루션을 검색해야합니다. 당신이 원하는 것 어떤 소프트웨어 귀하의 API를 사용하려고 식별하는 방법입니다.

일반적으로이 문제를 해결하는 데 사용되는 간단한 몇 가지 방법이 있습니다 : 비밀 임베디드

앱에 비밀 키를 추가 요구할 수

는 그 API 식별에 대한 액세스 그 자체가 열쇠를 사용합니다. 사람들은 열쇠를 추출하기가 쉽기 때문에 이것을하지 말라고 말할 것입니다. 이는 사실이지만 모든 보안 기능을 통해 API 보호에 필요한 작업량을 평가할 때 비용/이점 분석을 수행해야합니다. 자바 스크립트의 문제점은 모든 소스 코드가 바로 있기 때문에 비밀을 숨기거나 숨기기가 쉽지 않다는 것입니다.

언어 선택에 대한 다른 옵션이있는 환경을 생각한 경우, 예를 들어 안드로이드의 NDK 사용과 같이 앱의 비밀을 더 잘 모호하게 할 수 있습니다. Javascript는 어렵다.

API 키와 함께 기억해야 할 중요한 점은 API 키를 명확하게 전송해서는 안된다는 것입니다. 그렇게 쉽게 훔칠 수 있습니다. 대신 키를 사용하여 API 트래픽에 서명하여 서버가 요청을 키가있는 것으로부터 얻었고 서명하는 방법을 알고 있는지 확인할 수 있습니다.

속도

비록 제한 실제로이이 옵션 달성 하려는지에 따라 문제에 대한 해결책. 다수의 요청이 다른 응용 프로그램에서 오는 것에 대해 걱정이된다면 너무 많은 요청이 들어올 경우 실제 응용 프로그램이 수행 할 수있는 수준보다 높은 속도로 제한 할 수 있으며 너무 많은 요청이 들어 오면 IP 주소로 차단하거나 속도 제한을 설정할 수 있습니다.