React 애플리케이션에 대한 보안 팁 7개🔐
14196 단어 reactsecuritywebdevjavascript
응용 프로그램이 안전하지 않으면 이러한 성능 지표, 사용자 체험 심사, 테스트 등은 중요하지 않습니다.오늘날 세계에서 데이터는 지구상에서 가장 귀중한 보석이다.no, I'm not joking!) 만약 응용 프로그램이 안전하지 않거나 12세의 해커가 탈옥하여 당신의 코드를 나쁜 사람에게 팔면 당신의 업무 전체가 붕괴될 수 있습니다.따라서 모든 응용 프로그램은 우선 안전해야 한다는 점이 매우 중요하다.React 개발자로서 JSX 코드를 보호하는 일반적인 팁은 다음과 같습니다.
어, 리액션 앱의 집주인이 되지 마...
1️⃣ HTTP 인증 보호
만약에 응용 프로그램이 사용자가 로그인하거나 계정을 만드는 인증 기능을 가지고 있다면 클라이언트 인증과 권한 수여는 보통 여러 개의 보안 빈틈에 노출되기 때문에 이러한 빈틈은 응용 프로그램의 이러한 프로토콜을 손상시킬 수 있다.
무엇보다 다음 방법 중 하나를 사용하여 인증을 추가할 수 있습니다.
✔ 주의 사항❌
❌ JWT 토큰을
localStorage 에 저장하지 마십시오.어떤 사람은 브라우저의 dev tools 콘솔을 쉽게 사용할 수 있으며, 이 영패를 쉽게 얻을 수 있도록 다음 코드를 작성할 수 있습니다.console.log(localStorage.getItem('token'))
✔ 반드시 기호화폐를
localStorage에서 HTTP cookie로 이동해야 한다.✔ 그렇지 않으면, 당신의 화폐를 당신의 것으로 옮겨 주십시오 React app's state.
❌ 브라우저에서 영패에 서명하는 키를 보류하지 마십시오.사이트를 방문하는 모든 사람들이 서로 다른 데이터, 쿠키, 영패 등을 볼 수 있습니다. 키를 보내면 새로운 영패에 서명할 수 있다는 것을 알아야 합니다.
✔ 반드시 그것들을 뒤에 두어야 한다.항상 백엔드에서 이 키들을 서명하고 검증합니다.
✔ 지루하고 쓸모없는 비밀을 반드시 사용해야 한다.계정을 만들 때 비밀번호 필드에서 강력한 비밀번호를 만드는 것을 알려주듯이 JWT 기밀도 마찬가지다.
❌ 클라이언트에서 영패를 디코딩하지 마십시오.특히 방문 영패는일반적으로 이러한 액세스 토큰은 애플리케이션에 전원을 공급하는 API에 사용됩니다.
✔ 반드시
expiresAt 열쇠를 localStorage 위에 놓아야 한다.Here's 유효기간을 어떻게 추가하여 참고하는지에 관한 간단한 방법.✔ 반드시 너의 기호화폐의 유효 하중을 줄여야 한다.페이로드가 클수록 > 토큰의 크기가 클수록 > 엔드포인트에 도달할 때 요청이 클수록 > 사용자의 대역폭 전력이 클수록 > 애플리케이션의 성능이 떨어집니다.
✔ 어떤 상황에서도 HTTP 대신 HTTPS를 사용해야 합니다.이것은 웹 응용 프로그램이 유효한 인증서를 가지고 있는지 확인하고 이 보안 SSL 연결을 통해 데이터를 보낼 것입니다.
나는 최근에 만난 적이 있어, 식견이 매우 넓다.
2️⃣ DDoS 공격 방지
일반적으로 응용 프로그램이 안전하지 않거나 서비스 IP를 차단하는 데 빈틈이 있을 때 이 안전 빈틈이 나타난다.따라서 서버와 상호작용을 할 수 없기 때문에 일부 서비스가 정지됩니다.다음은 이러한 상황을 막는 몇 가지 방법입니다.
Exploiting script injection flaws in ReactJS apps | by Bernhard Mueller | DailyJS | Medium
Bernhard Mueller ・ ・
Medium
Medium
셋️⃣ 사이트 간 스크립트(XSS) 공격 방지
XSS는 공격자가 주입한 코드가 합법적인 응용 프로그램 코드로 실행되기 때문에 공격자가 사용자 브라우저에서 실행되는 응용 프로그램을 완전히 제어할 수 있기 때문에 위험이 상당히 크다.이렇게 귀여워 보일 수 있다.
I'm just an innocent code!<script>alert("Unless I'm not 😈")</script>
I'm just an innocent code!<script>alert("Unless I'm not 😈")</script>
< 와 < 는 각각 < 과 > 로 해석되기 때문에 브라우저는 이번에 코드의 데이터를 혼동하지 않습니다.다음과 같은 몇 가지 보호 조치가 있습니다.createElement() 를 사용합니다.dangerouslySetInnerHTML 대신 리액트에서 HTML을 직접 설정합니다.아래 선 잘라내기: 
innerHTML 2016년 5월 20일.
설명: 1
답안: 5
요소를 설정하는 innerHTML과 요소를 설정하는 위험한 lysetInnerHTML 속성은 어떤'배후'차이가 있습니까?가령 간단하게 보기 위해서 나는 사물에 대해 적당한 소독을 하고 있다.
예:
var test = React.createClass({
render: function(){
return (
<div contentEditable='true' dangerouslySetInnerHTML={{ __html: "Hello" }}></div>
);
}
});
var
255
Open Full Question
4️⃣ 사이트 간 CSRF(위조 요청) 공격 방지
공격자가 응용 프로그램에 설치한 권한이 부여되지 않은 쿠키나 의외의 쿠키를 통해 발생한다.이것은 최종 사용자로 하여금 현재 인증된 웹 응용 프로그램에서 필요하지 않은 조작을 실행하게 한다.발생하지 않도록 몇 가지 중요한 요점을 얻다.
5️⃣ 인증 실패 방지
신분 검증에 대한 자세한 정보를 입력하시고...응용 프로그램이 붕괴되어 증빙 데이터가 이용되었다.다음 사항이 준비되어 있는지 확인합니다.
6️⃣ 라이브러리 및 구성 요소에 대한 보호
React 애플리케이션에서 타사 라이브러리, 모듈 또는 API를 사용할 때마다 위험이 있습니다.물론 그들은 기능의 신속한 개발에 많은 도움을 주었지만, 그들 자신의 일련의 안전 결함이 당신 자신의 응용을 망칠 수 있다는 것을 누가 알았겠는가!
7️⃣ 종단 간 암호화 추가
Whats App 채팅이 끝까지 암호화된다는 것을 처음 알았을 때 나는 매우 기뻤다.귀신이 곡할 노릇이다. 그들은 심지어 그들이 어떻게 이 점을 해냈는지 설명한다.
이런 암호화 유형은 공유된 데이터가 다른 어느 곳에서도 포함되지 않고 React 응용 프로그램에 포함될 수 있도록 보장한다.모든 제3자는 어떠한 기밀 데이터도 전송하는 것을 거절당할 것이다.DEV에서 이 글을 읽습니다. 이 글은 React에서 단말기부터 단말기까지 암호화하여 채팅 앱을 만드는 전체 과정을 설명합니다.
Building HIPAA Compliant End-to-End Encrypted Chat with Stream React Chat and Virgil Security
Nick Parsons ・ Oct 2 '19 ・ 9 min read
#encryption
#hipaa
#chat
#security
다음 단계는 어디로 가야 합니까?🤔
자세한 내용은 다음 에셋을 참조하십시오.
This is why programming is great. Happy and satisfying from the beginning! Was your first programme "Hello, World!" as well?
— Microsoft Developer UK (@msdevUK)
Image source: https://t.co/RLdQCMX7gC pic.twitter.com/DAEr5pHNyM
5 React Architecture Best Practices
📫 Subscribe to my weekly developer newsletter 📫
PS: 올해부터 저는 이곳에서 개발 커뮤니티에 관한 글을 쓰기로 했습니다.전에 나는'중'자를 썼다.만약 누군가가 나의 글을 보고 싶다면 이것은 나의 매체 자료이다.
Reference
이 문제에 관하여(React 애플리케이션에 대한 보안 팁 7개🔐), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/vaibhavkhulbe/7-security-tips-for-your-react-application-4e78텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
