⚔️🔰JavaScript 보안🛡️⚔️

코드의 보안 세부 정보

누군가가 당신의 사이트를 방문할 때, 당신의 자바스크립트 코드는 그들의 브라우저에서 실행되며, 하루가 끝날 때, 그들은 당신의 자바스크립트 코드를 읽을 수 있습니다.따라서 민감한 데이터가 있다면, 코드는 누구나 볼 수 있는 데이터를 공개할 것입니다.
예:
코드에 관리자 비밀번호를 포함하는 것을 절대 허용하지 않습니다...또는 JS 코드의 암호입니다.
만약 누군가가 당신의 코드를 보고 싶다면, 그들이 해야 할 일은 브라우저에서 개발 도구를 열고 원본 코드를 클릭한 다음 JS 파일을 클릭하는 것이다.때때로, 만약 그들이 웹팩이나 유사한 도구를 사용한다면, 웹팩이 생성한 코드는 맨 위에 있고, 인류가 읽을 수 있는 코드는 밑에 있을 것이다.

어떤 경우, 그들은'한 줄'코드를 볼 수 있지만, 그것을 더욱 쉽게 읽을 수 있도록 하기 위해서, 사람들이 유일하게 해야 할 일은 자바스크립트 포맷 도구를 온라인으로 붙여서 팝업하는 것이다.읽기 쉽습니다!
다른 한편, 일부 API는 API 키가 노출되지 않도록 도와줍니다.이 중 일부 API는 IP, 도메인 이름 등을 기반으로 API 키 사용을 제한할 수 있습니다.또 다른 보안 인증서 공유를 피하는 방법은 environment variables 를 사용하는 것입니다. 만약 어떤 이유로든 코드에 민감한 데이터가 필요하다면 NodeJS와 같은 서버 측 코드에 저장하는 것을 권장합니다.

😨 사이트 간 스크립트 공격 일명 XSS😱

나는 너의 상황을 모르겠다. 단지 XSS 공격을 들었을 뿐이다!나는 이미 몹시 놀랐다.
이런 공격은 전단에만 적용된다.백엔드가 쉽게 공격받지 않을 수 없다는 것은 아니지만 XSS 공격에는 사용할 수 없습니다.
이번 습격은👹 악의적인 JavaScript를 주입하고 실행합니다.
따라서 기본적으로, 코드를 응용 프로그램에 주입할 수 있는 사람이 있다면, 많은 일을 할 수 있는 작업 방식이다.구글이나 항공사 페이지에 들어가면 로컬 저장소 방문 등을 통해 자바스크립트에서 대량의 정보를 수집한다고 상상해 보세요.
보안 전문가 덕분에 최신 브라우저는 innerHTML에서 실행되는 태그를 막아서 이 점을 실현하는 데 도움을 줍니다.그래, 너는 여전히 주사를 놓을 수 있지만, 운행하지는 않을 거야.
하지만!!하나쯤은 있겠지만innerHTML 주입을 통해 태그를 사용하는 경우 다음을 수행할 수 있습니다.

<img src="" onerror="alert('xss')/>

따라서 코드가 실행될 때 이미지 원본을 찾습니다.경고가 없으므로 alert () 를 표시합니다.
innerHTML을 사용하여 이러한 상황을 피할 수 있습니다.텍스트 내용을 사용합니다.하지만 때때로 innerHTML이 필요할 수도 있습니다.이런 상황이라면 코드를 보여주기 전에 정리해야 한다.sanitize-html라는 아주 멋진 NPM 패키지를 사용하면 됩니다.이 패키지는 텍스트를 정리하고 필요하지 않은 태그를 삭제하여 악성코드를 실행하지 않습니다.서버 쪽에서 청소도 해야 합니다.폼에 정보를 입력할 때, 나는 악성 코드를 쳐다볼 수 있으며, 이 코드는 데이터베이스에 저장될 것이다.일단 그것이 렌더링되면, 그것은 실행될 수 있다.서버에서 이 NPM 패키지를 사용하고 데이터베이스에 넣어야 합니다.

타사 라이브러리

제3자 라이브러리를 사용할 때, 당신은 반드시 그것들이 안전하다는 것을 확보해야 합니다.때때로github의 다운로드 수나 스타 수는 안전한 라이브러리가 아니라는 것을 의미하지 않는다.
this 아주 재미있는 이야기에 관한 글을 보십시오. 이 이야기는 누군가가 NPM 가방을 사용하여 비밀번호를 훔치는 방법을 설명합니다.
NPM은 소프트웨어 패키지를 설치할 때 빈틈 스캔을 실행함으로써 도움이 됩니다.주의: 모든 빈틈이 나쁜 것은 아니다!미치기 전에 연구를 좀 해라.

사이트 간 CSRF 요청

이런 공격은 사람들이 당신을 속여서 링크를 클릭하는 것을 가리킨다. 이 링크는 준비된 페이지를 가리킨다. 그들은 당신의 로컬 쿠키를 남용하고 통상적으로 대화를 나누는 페이지에 요청을 보낸다.
이것은 서비스 방면의 문제 같지만, 언급할 만하다.상상:
예를 들어, 당신은 "x"사이트에 갈 수 있습니다. 그들은 당신의 로컬 저장소에서 당신의 정보를 훔칠 것입니다.그리고 그들은 너를 허위 사이트로 인도할 것이다.예를 들어paypal처럼 보이는 사이트를 가정한다.그들은 당신의 로컬 저장소에서 얻은 정보를 이용하여 보내고 싶지 않은 사람에게 돈을 보낼 수 있다.이것은 해커에게 긴 과정일 수도 있지만, 그것은 할 수 있다.
이러한 공격은 NodeJS나 JavaScript 기술뿐만 아니라 웹 개발에도 보편적으로 적용된다.
CSRF는 예방할 수 있습니까?맞다
CSRF 공격을 방지하는 3가지 기술이 있습니다.

동일한 사이트 쿠키 사용 방법: 이것은 새로 개발된 속성으로 귀하의 쿠키에 추가하여 브라우저에서 제3자가 특정한 쿠키를 사용할 수 없도록 지시할 수 있습니다.이 속성은 서버에서 설정하고 쿠키 자체를 설정합니다.

질문 응답: 추가 보호층으로서 폼을 제출할 때 사용자에게 질문 응답을 요구할 수 있습니다.도전 응답의 예는 다음과 같습니다.

- 인증번호 인증(매우 유행)
- 암호 또는 개인 정보 확인 요청
- 일회용 토큰 발행
주의: 높은 안전성이 필요한 응용 프로그램은 영패와 질문 응답을 사용하여 안전성을 확보해야 한다.
3. 반CSRF 영패: 사용자가 정보를 제출하고 사이트와 상호작용을 하거나 다른 쿠키를 생성하는 작업을 수행할 때 반CSRF 영패도 쿠키 요청에 포함되어야 한다.그리고 이 요청은 검증 과정을 통해 실행되며, 그 중에서 이 요청을 처리하기 전에 이 영패의 진실성, 심지어 존재성을 검증한다.영패가 부족하거나 정확하지 않으면 요청을 거절할 수 있습니다.

소스 간 공유를 통한 번거로운 CORS😅

브라우저 측 응용 프로그램에서 온 요청은 같은 서버에서 실행되는 백엔드에만 보낼 수 있다는 개념이다.
어떤 이유로든 프런트엔드와 백엔드를 다른 서버에 호스팅하면 이 문제가 발생하지만 응답에 헤더를 지정하여 이 문제를 해결할 수 있습니다.이 개념에서 기본적으로 브라우저는 다른 서버와'대화'를 허용하지 않지만, 정확한 서버 끝을 사용하면 덮어쓸 수 있습니다.Cors NPM 패키지를 사용하거나 다음과 같이 수동으로 수행할 수 있습니다.
노드JS 코드

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  res.json({data: [1,2,3,4]})
});

참고: CORS 개념은 프런트엔드와 백엔드의 상호작용을 시도하는 코드가 있는 모든 웹 응용 프로그램에 적용됩니다.nodejs, php든 뭐든