질문의 프런트 엔드 표면 (예) (안전, 성능 최적화)

첫째, 당신이 알고있는 및 웹 보안 보호 조치 대해 이야기

일반적인 공격 : SQL 인젝션, XSS (크로스 사이트 스크립트), XSS, CSRF (크로스 사이트 요청 위조), 크로스 사이트 요청 위조

(1) XSS

XSS : XSS (크로스 사이트 스크립팅) 그래서 사용자가 웹을 탐색 할 때, 사용자의 브라우저를 제어하는 가장 일반적인 공격 웹 사이트, 불법 HTML 태그 나 자바 스크립트 코드를 주입하여 공격자의 기본 방법입니다.
(A) 종류 (삼가지)

DOM XSS :
- DOM 문서 객체 모델 것으로, DOM은 동적으로 액세스하는 프로그램과 스크립트의 내용, 구조와 스타일의 사용을 허용하고 문서를 업데이트 할 수 있습니다. 이러한 접근 방식은 완전히 클라이언트 것은 고려 될 수있는 XSS DOM 구문 분석 브라우저에 의해 트리거 직접 반응에 관여 해결하기 위해 서버를 필요로하지 않습니다.
반사 XSS :
- 또한 비 영구적 인 XSS로 알려진 반사 XSS는 스크립팅 (XSS) 취약점이 지금 가장 가능성이 발생하는 것입니다. 요청이 XSS 코드가 나타납니다 URL에 서버에 제출 마지막으로 입력되어, 서버는 브라우저가 마지막 실행을 구문 분석이 XSS 코드는 응답의 내용에 나타납니다 구문 분석합니다.
저장 형 XSS
- 또한 지속적인 XSS로 알려진 저장 형 XSS, 그것은 크로스 사이트 스크립팅의 가장 위험한 종류에 비해 반사 XSS이며, DOM XSS 유형은 높은 그래서 더 위험, 숨겨진, 그것은 수동으로 트리거로 사용자를 필요로하지 않습니다 있습니다. 일부 XSS 코드를 제출 공격자가 모든 서퍼가 페이지에 XSS, 가장 대표적인 예 중 하나가 될 것입니다 방문하는 서버 및 스토리지, 수신하면 메시지 보드입니다.

(B) XSS 피해

거짓 개인 정보 입력 양식을 이용하여 사기.
사용자를 훔치는 스크립트를 사용하여 쿠키 값은, 피해자가 모르는 사이에 악성 요청을 보낼 공격자 도움이됩니다.

(C)에 대한 해를 XSS

Http 만 : 쿠키에 Http 만 속성을 설정하면, 쿠키 JS 스크립트는 정보를 읽을 수 없습니다.
프론트 엔드 입력 검사 동일한 백엔드 검사 및 필터링을 수행한다.
어떤 경우에는, 사용자 데이터가 엄격한 필터링 할 수 없다, 레이블 변환 할 필요가

(B) CSRF

크로스 사이트 요청 위조 (크로스 사이트 요청 위조), 사용자 동수로 (사용자의 지식없이) 요청을 포즈, 사용자의 희망에 반하는 몇 가지의 완성 (예 수정 사용자 정보 등, 등, 주석의 시작 부분 삭제).
1, 그것은 해를 입힐 수 있습니다 :
1. 업데이트 된 설정 정보 인증 된 사용자 권한을 사용;
2. 사용자 권한 인증을 구매 한 제품의 사용;
3. 사용자 권한의 사용은 게시판에 댓글로 채택되었다.
2. 방어 :
1. 확인 코드, 사용자를 강제 최종 요청을 완료하기 위해 응용 프로그램과 상호 작용할 수 있습니다.
2. 너무 쉽게 CSRF 공격을 할 익숙해; 사용 제한을받을 포스트를 사용해보십시오;
3. 제한 요청 소스는,이 방법은 가장 낮은 비용이지만, 서버가 리퍼러를 취할 수있는 시간이 없기 때문에, 100 % 효과를 보장 할 수 없습니다, 브라우저의 버전이 낮은 리퍼러 위조의 위험이 있습니다.
4. CSRF 토큰 방어 메커니즘을 확인하는 가장 적합한 솔루션으로 인정 받고 있습니다.
토큰의 원리를 사용 :
1. 첫 번째 단계는 임의로 생성 된 토큰의 후단 세션 상태로 저장하는 토큰을 상기 일면의 후단에 마찬가지로;
2. 단계 2 : 페이지의 선단이 상기 요청 데이터를 요청을 제출하거나 토큰 후단을 따라 전달되는 헤더 정보에 부가되고;
3. 그렇지 않으면 불법 요청입니다, 같은 합법적 인 백엔드와 프론트 엔드 세션이 같은 토큰을했다 있는지 확인합니다.

둘째, 말했다 프런트 엔드 성능 최적화에 대한 이해에 대해 이야기?

내용 측면
- 병합 파일, CSS 스프라이트, 인라인 이미지 : HTTP 요청을 감소
- DNS 쿼리를 줄 : 브라우저는 모든 DNS 쿼리가 완료 이전에 호스트로부터 파일을 다운로드 할 수 없습니다. 방법 : DNS 캐시, 호스트 이름, 병렬 다운로드 및 균형 DNS 쿼리의 해당 번호로 자원의 분포
- 않도록 리디렉션 : 여분의 중간 액세스
- 아약스 캐시
- 비 필수 구성 요소 지연로드
- 미래의 조립 미리로드에 필요한
- DOM 요소의 수를 줄이고
- 서로 다른 도메인에 자원에서 : 도메인 다운로드 제한된 자원의 숫자에서 동시에 브라우저, 병렬 다운로드를 증가시킬 수있다 분야를 증가
- iframe 대응의 수를 줄이
- (404)를 수행
서버 측면
- 사용 CDN
- 추가 또는 캐시-Control 헤더 응답 만료
- 구성 요소가 사용 Gzip 압축
- 구성의 ETag
- 세척 버퍼 조기
- 사용 아약스 GET 요청
- 빈의 img src에 태그를 피하십시오
쿠키 측면
- 쿠키의 크기를 줄입니다
- 리소스 도메인 쿠키의 도입을 포함하지 마십시오
CSS의 측면
- 페이지 상단에 스타일 시트
- CSS 표현을 사용하지 마십시오
- IE의 사용하지 않는 필터
자바 스크립트 측면
- 페이지 하단에있는 스크립트
- 다음은 외부 CSS를 자바 스크립트에서 도입
- 자바 스크립트와 CSS를 압축
- 삭제 불필요한 스크립트
- DOM 액세스를 감소
- 합리적인 디자인 이벤트 리스너
사진 측면
- 이미지 최적화 : 색상이 실제 색상 수, 압축에 따라 선택
- CSS의 최적화 마법사
- HTML에서 사진 이미지를 늘리지 않습니다
- 확인 favicon.ico의 작은 캐시

(C) 프런트 엔드 성능 최적화 방법은 어떻게 사용됩니까?

HTTP 요청의 수를 줄이십시오 :
- CSS 스프라이트 JS, CSS 소스 코드를 압축, 이미지 크기 적절한 제어;
- 페이지 Gzip으로, CDN 호스팅, 데이터 캐싱, 이미지 서버.
JS + 프런트 엔드 템플릿 데이터는, 때문에 HTML 태그의 원인에 낭비되는 대역폭을 감소
저장 원위 AJAX 요청 결과는 요청의 수를 줄이기 위해 요청하지 않고, 변수, 각 작업의 로컬 변수였다
대신 최적화 성능 자바 스크립트로는 innerHTML을 DOM과 운영 작업의 DOM의 수를 감소.
직접 운영 스타일 대신 세트 클래스 이름에 많은 시간의 스타일을 설정해야하는 경우
글로벌 변수의 적은 사용, 결과 캐시 DOM 노드를 찾고 있습니다.
IO 작업을 읽을 줄
동적 특성이라고도 CSS 표현 (CSS 표현)을 사용하여 피 (동적 특성)
사진은 스타일 시트의 상단에로드
하단 스탬프에서 스크립트
피가 완료 다운로드 내용 테이블 후 표시됩니다, 표는 천천히, 페이지 레이아웃의 본문에 DIV + CSS의 레이아웃보다 디스플레이를 기다리는

(IV) 어떤 SEO에주의를 기울 프론트 엔드 요구

합리적인 제목, 설명, 키워드 : 1 씩 감소이 세 가지 무게를 검색;
- 제목 값은 중요한 포인트는, 중요한 키워드는 더 이상 2 회 이상 표시하고, 다른 것, 전에 다른 페이지 제목에 의존 강조 없습니다;
- 고도로 요약 설명 페이지의 콘텐츠, 적당한 길이 너무 많이하지 키워드 스터핑, 다른 페이지의 설명은 다르다;
- 키워드 중요한 키워드를 포함 할 수 있습니다
시맨틱 HTML 코드는 W3C 규격을 준수합니다 : 의미 코드는 웹 검색 엔진을 이해하기 쉽게
전면에있는 HTML 코드의 가장 중요한 부분 : 크롤링 HTML 순서에 검색 엔진이 위에서 아래로입니다, 일부 검색 엔진에 대한 제한, 길이를 크롤링하는 중요 내용을 크롤링 할 수 있도록이있다
출력 JS의 중요한 부분을 사용하지 마십시오 파충류 콘텐츠 획득 JS를 수행하지 않습니다
적은 iframe에서 : 검색 엔진은 iframe 대응의 콘텐츠를 크롤링하지 않습니다
비 장식 그림은 고도를 추가해야합니다
사이트 속도 향상 : 사이트 속도가 순위 검색 엔진의 중요한 지표이다

(E)는 어떻게 SEO 최적화를 할까?

제목 및 키워드
- 현실적인 매력적인 제목, 제목은 키워드가 할 포함해야한다
웹 사이트의 디렉토리 구조
- 최저 없습니다 3 개 이상 금지, 모든 단계는 트리 구조 분배로 사이트를 만들기 위해 "이동 경로"가
페이지 요소
- "Alt 키"로 표시된 그림을 검색 엔진 친화적 인 포함을 만들 수 있습니다
사이트 콘텐츠
- 매달 업데이트 사이트를 정기적으로 매일 더 많은 검색 엔진과 같은 것이있다
링크
- 다른 하나는 일반 사이트, 전문 팀 또는 개인의 일상적인 유지 보수 업데이트를해야합니다
체인 내의 배열
- 웹 사이트는이 별도의 페이지 또는 링크에 연결되어 표시되지 않습니다, 거미줄과 유사한 구조를 형성
트래픽 분석
- 통계 도구에 의해 트래픽 소스의 분석 (바이두 통계, CNZZ), 다음 SEO 가이드
마지막 문제 프런트 엔드 자바 스크립트 인터뷰
과거 클래식 탐구 - 입력에서 페이지 URL로드의 과정을 완료 표시

매일 떠나는 같은 약간 + 축적 조금 아처럼 ~ === 성장

지속적으로 프런트 엔드 여행과 탐험 ~ 환영의 관심 업데이트

첫째, 당신이 알고있는 및 웹 보안 보호 조치 대해 이야기

(1) XSS

(B) CSRF

둘째, 말했다 프런트 엔드 성능 최적화에 대한 이해에 대해 이야기?

(C) 프런트 엔드 성능 최적화 방법은 어떻게 사용됩니까?

(IV) 어떤 SEO에주의를 기울 프론트 엔드 요구

(E)는 어떻게 SEO 최적화를 할까?

추천