인터넷이 발전하면서 다양한 웹 애플리케이션이 점점 더 복잡해지고 사용자의 다양한 요구를 충족하지만 그에 따라 다양한 네트워크 보안 문제도 발생합니다. 프론트엔드 개발 산업으로서 우리는 이 문제를 피할 수 없습니다. 그래서 오늘은 WEB 프론트엔드 보안과 이를 방지하는 방법에 대해 간략하게 말씀드리겠습니다.
먼저 프론트엔드 공격의 형태는 무엇이며 어떻게 예방할 수 있나요?
1. XSS 공격
XSS는 웹 애플리케이션에 자주 나타나는 컴퓨터 보안 취약점입니다. 웹 사용자는 다른 사용자가 사용할 수 있는 페이지에 코드를 심을 수 있습니다. 예를 들어 이러한 코드에는 HTML 코드와 클라이언트측 스크립트가 포함됩니다. 공격자는 동일 출처 정책(same origin policy)。这种类型 的漏洞由于被黑客用来编写危害性更大的网络钓鱼(Phishing) 공격과 같은 액세스 제어를 우회하기 위해 XSS 취약점을 악용하는 것으로 잘 알려져 있습니다.
XSS 공격의 위험성은 다음과 같습니다.
1. 기계 로그인 계정, 사용자 온라인 뱅킹 계정, 다양한 관리자 계정 등 다양한 사용자 계정 도용
2. 읽기, 변조, 추가, 삭제를 포함한 기업 데이터 제어 기업의 민감한 데이터 능력
3. 기업의 상업적 가치가 있는 중요한 정보를 훔치는 행위
4. 불법 전송
5. 이메일 강제 전송
6. 웹사이트 정지
7. 피해자의 컴퓨터를 제어하여 전송 다른 웹사이트 공격 시작
XSS 공격의 구체적인 징후:
1. JavaScript 코드 삽입
다음은 코드 페이지입니다.
이 코드의 기능은 첫 번째 입력 상자의 문자열을 출력하는 것입니다. 두 번째 입력 상자에 1을 입력하면 두 번째 입력의 값은 1입니다. 아래는 페이지 및 소스 코드의 스크린샷입니다(여기서는 테스트하기 위해 다음 코드를 입력합니다)
<SCRIPT>alert('xss')</SCRIPT>
분명히 보시다시피 팝업 대화 상자가 없습니다. 왜 팝업 창이 없는지 궁금할 것입니다. 소스 코드를 보면
우리가 입력한 문자열이 값 속성으로 출력되는 것을 볼 수 있습니다. 15번 줄의 input 태그입니다. 안에는 value에 값이 표시되기 때문에 팝업창이 뜨지 않습니다. 이때, 똑똑한 사람들은 앞에 ">"를 추가할 수 있다는 것을 알아냈습니다.
<SCRIPT>alert('xss')</SCRIPT>
로 입력 태그를 닫아야 합니다. 결과는
이번 페이지를 보면 성공적으로 창이 뜹니다
. 왜 이런 일이 발생하는 걸까요? 소스 코드를 살펴보겠습니다
해결 방법: 현재 가장 간단한 예방 방법은 프런트 엔드 출력 데이터를 탈출하는 것이며 가장 안전합니다. 스크립트 태그와 함께 표시되지만 실제로는 스크립트 태그의 왼쪽 및 오른쪽 꺾쇠괄호(><)가 HTML 문자 엔터티로 이스케이프되어 태그로 해석되지 않지만 실제로 표시되면 이 두 개는 꺾쇠 괄호는 여전히 정상적으로 표시되어 작동할 수 있습니다.
2.append의 활용
이전 섹션에서는 스크립트 태그의 왼쪽 및 오른쪽 꺾쇠괄호를 보호했지만 똑똑한 해커는 여전히 js 조각을 직접 할당하는 좋은 방법을 알아냈습니다. innerHTML을 크랙할 수 없습니다. 예를 들어
<br/>
하지만 jQuery의 추가가 가능합니다. 그 이유는 추가 요소를 프래그먼트로 변경할 때 jquery가 스크립트 태그를 찾은 다음 eval을 사용하여 다시 실행하기 때문입니다. jquery의 추가에 사용되는 메서드도 innerHTML입니다. InnerHTML은 유니코드 코드를 문자 엔터티로 변환합니다.
이 두 가지 지식의 조합을 사용하면 웹 사이트가 추가를 사용하여 DOM 작업을 수행한다는 결론을 내릴 수 있습니다. 추가를 결정할 수 있는 필드인 경우 다음을 사용하여 왼쪽 및 오른쪽 꺾쇠 괄호를 위장할 수 있습니다. 유니코드 코드(예: -"u003cscriptu003ealert('xss');"). 다음에 이스케이프하면 u003으로 위장한 u003cscriptu003ealert('xss');"。接下来转义的时候，伪装成u003的
3、img标签的再次利用
img标签，在加载图片失败的时候，会调用该元素上的onerror事件。我们正可以利用这种方式来进行攻击。
但是，如果这张图片的地址我们换种写法呢?
这时的源码已经变为--src为空，但是onerror的时候，执行注入代码。我们刷新查看页面，就会发现，代码注入已经成功，需要继续转义。
二、 CSRF攻击
什么是CSRF攻击?
CSRF(Cross-site request forgery跨站请求伪造，也被称为“One Click Attack”或者Session Riding
그런데 이 사진의 주소를 다르게 쓰면 어떨까요? 
지금 소스코드는 --src 로 바뀌었는데 비어있지만 onerror가 발생하면 삽입된 코드가 실행됩니다. 페이지를 새로 고치면 코드 삽입이 성공했으며 계속 이스케이프해야 함을 알 수 있습니다.
2. CSRF 공격
CSRF 공격이란 무엇인가요? 
>-사이트 code> <code>요청 위조교차 사이트 요청 위조, "원 클릭 code> <code>공격이라고도 함 code>" 또는 Session 일반적으로 CSRF 또는 XSRF로 축약되는 Riding은 웹사이트를 악의적으로 사용하는 것입니다. 실제로 해커는 일부 제출 동작을 악용합니다. 해커의 웹사이트를 방문하면 귀하가 수행하는 작업은 다른 웹사이트(예: 귀하가 사용하는 온라인 은행의 웹사이트)에서 수행됩니다. , 게시물을 사용하여 합리적으로 받으세요
일반적으로 문제를 해결하려면 get 요청에 제출해야 하는 일부 데이터를 만들겠습니다. 이는 http 표준을 위반할 뿐만 아니라
예를 들어 위반입니다. , 개발한 웹사이트에서 다음과 같이 개발했습니다:
그런 다음 해커의 웹사이트
# 🎜🎜#이 경우 사용자는 해커의 웹사이트를 한 번만 방문하면 됩니다. 실제로는 웹사이트를 한 번 운영하는 것과 같습니다. 그러나 사용자는 이를 인식하지 못합니다. 
해커 코드는 다음과 같습니다.
# 🎜🎜#
사용자가 이 상황을 인지하지 못한 채 제출했습니다. 가장 간단한 방법은 사용자와 별도로 인증 코드를 추가하는 것입니다. , 해커의 웹사이트는 사용자의 현재 세션에 대한 인증 코드를 얻을 수 없습니다. 그러나 이는 특히 일부 빈번한 작업의 경우 사용자에게 인증 코드를 입력하라는 메시지를 표시하는 경우 매우 짜증나는 일이 됩니다. , 모든 사용자 제출은 이 페이지에서 생성된 토큰을 가져와야 합니다. 이 방법의 본질은 인증 코드를 사용하는 것과 다르지 않지만 이 방법에서는 전체 페이지의 모든 세션에 동일한 토큰을 사용할 수 있습니다. , 개발자는 현재 페이지의 토큰을 자동으로 가져올 수 있습니다. 토큰 검증에 실패하면 제출이 이 사이트에서 전송되지 않았음을 증명하고 제출 프로세스가 종료됩니다. 이 웹사이트에 대해 토큰이 실제로 생성되면 통과할 수 있습니다.
코드는 다음과 같습니다
이 사이트의 웹사이트 양식은 이 사이트에서 생성된 토큰을 자동으로 전달합니다
#🎜🎜##🎜🎜##🎜🎜#이 사이트의 웹페이지를 다시 사용하세요 . #🎜🎜##🎜🎜#을 통해 제출하세요. 물론 위의 내용은 단지 예일 뿐입니다. 특정 토큰 생성은 세션 및 사용자 ID에 따라 변경되어야 합니다. 웹사이트에도 토큰을 추가해야 한다고 생각되면 Baidu를 사용하세요. 심층적인 연구. #🎜🎜##🎜🎜##🎜🎜#3. 네트워크 하이재킹 공격#🎜🎜##🎜🎜#당사 웹사이트는 당사 서버에 직접 액세스하지 않고 여러 계층의 프록시를 통과하는 경우가 많습니다. 특정 링크에서 중간 프록시 계층의 하이재커가 데이터를 가로채면 이러한 기밀 데이터를 얻을 수 있습니다. 웹사이트 사용자의 비밀번호로 사용됩니다. 예를 들어, 우리 사용자는 다양한 레스토랑에서 이상한 Wi-Fi에 연결하는 경우가 많습니다. 이 Wi-Fi가 해커가 설정한 핫스팟 Wi-Fi라면 해커는 사용자가 주고받는 모든 데이터에 액세스할 수 있습니다. 여기서는 웹마스터가 웹사이트 암호화에 https를 사용하는 것이 좋습니다. 이런 방식으로 웹사이트 데이터를 얻을 수 있더라도 해커는 이를 해독할 수 없습니다.
웹사이트가 https로 암호화되지 않은 경우 양식 제출 부분에서 비대칭 암호화, 즉 서버에서만 해독할 수 있는 클라이언트 측 암호화를 사용하는 것이 가장 좋습니다. 이러한 방식으로 중간에 있는 하이재커는 암호화된 콘텐츠의 실제 정보를 얻을 수 없습니다.
4. 콘솔 삽입 코드
그림 4.1과 같이 Tmall 공식 웹사이트 콘솔에 표시된 경고 메시지를 독자들이 눈치채셨는지 모르겠습니다. ? 일부 해커는 사용자를 속여 콘솔에 내용을 붙여넣기 때문입니다(코드를 이해하지 못하는 초보 사용자를 괴롭힙니다). 예를 들어 Moments에 다음과 같은 글을 게시할 수 있습니다. "Tmall을 방문하고 F12를 누르고 다음을 붙여넣으세요." 콘텐츠를 사용하면 xx위안 선물을 받을 수 있습니다' 등의 경우 일부 사용자는 실제로 이를 운영할 것이며 자신의 개인정보가 노출된 사실을 알지 못할 것입니다.
티몰의 이러한 접근 방식은 사용자들에게 이렇게 하지 말라고 경고하는 것이기도 합니다. 티몰의 프런트 엔드 보안도 매우 좋은 것 같습니다. 그러나 이런 종류의 공격은 결국 소수에 불과하므로, 실제로 일부 사용자가 이러한 방식으로 공격을 받을 것이라고 생각된다면 Tmall의 솔루션을 생각해 보십시오.
5. 낚시
낚시도 아주 오래된 공격 방식입니다. 사실 이는 실제로 프런트엔드 공격이 아닙니다. 하지만 결국은 페이지 수준의 공격이므로 함께 이야기해 보도록 하겠습니다. 많은 분들이 이런 경험을 해보셨을 거라 믿습니다. QQ 그룹에서 어떤 분이 아르바이트, 해외 진출, 집과 자동차 판매 등의 내용을 게시해 주셨는데요. 열어보니 QQ 로그인창이 보이더군요. 사실 도메인 이름을 보니 QQ가 아닌 줄 알겠는데, 무슨 일인지 모르는 유저들이 실제로는 자신의 아이디를 입력한 것과 매우 비슷했습니다. 비밀번호를 입력했는데 QQ에 로그인하지 않았습니다. 사용자 이름과 비밀번호가 누군가에게 전송되었습니다.
실제로 이 방법은 프론트엔드에서도 사용됩니다. 다음으로 프론트엔드를 활용하여 실감나는 낚시를 해보자.
1. 먼저 xx 공간에 글을 공유한 후, 다른 사람들의 클릭을 유도합니다.
2 다음으로 cheat.php 웹사이트에서 리디렉션된 소스 웹페이지 주소를 조용히 수정했습니다.
따라서 사용자가 당사의 사기성 웹사이트를 방문한 후 이전 탭이 조용히 변경되었으며, 사용자가 사용자 이름, 비밀번호 등을 입력하도록 속이기 위해 조용히 피싱 웹사이트로 교체했습니다.
3 저희 피싱사이트는 XX공간으로 위장되어 사용자가 아이디와 비밀번호를 입력할 수 있도록 되어있습니다
이 피싱 수법은 입니다 매우 흥미로운 점은 이러한 종류의 공격을 방지하기가 어렵다는 것입니다. js를 사용하여 모든 페이지 링크를 열 수는 없습니다. 따라서 외부 링크 점프 링크를 현재 페이지 점프로 변경하거나 페이지가 언로드될 때 사용자에게 프롬프트를 제공하거나 페이지의 모든 점프를 window.open으로 변경하고 열 때 대부분의 피싱 예방 및 제어 노력을 따르십시오. 같은 목표를 가지고 있습니다. 우리는 네티즌들의 보안 인식을 높여야 합니다.
6. 일상적인 개발 시 주의해야 할 사항은 무엇인가요? 레이어별로 입력 정보를 확인할 때 사용자의 출력 내용 필터링(escape 등)에 주의하세요. 전송을 위해 중요한 콘텐츠를 암호화합니다(https를 사용하든 직접 암호화하든)
가져오기 및 게시 요청은 사양을 엄격히 준수해야 하며, 혼합하지 말고 jsonp를 사용하여 일부 위험한 제출을 완료하지 마세요.
URL에 포함된 정보는 주의해서 사용하시기 바랍니다. 귀하의 웹사이트가 위험할 수 있는 위치를 항상 염두에 두십시오.
위 내용은 프런트 엔드 보안에 관한 것입니다. 더 많은 프런트 엔드 문제를 보려면 PHP 중국어 웹사이트를 방문하세요:
https://www.php.cn/
위 내용은 프런트 엔드 보안에 대한 자세한 소개 및 예방 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
