무단 JavaScript 실행으로부터 웹 앱을 보호하는 주요 기술
TL;DR: 입력 유효성 검사 및 삭제, 콘텐츠 보안 정책 구현, 하위 리소스 무결성 사용, 보안 준수 등 5가지 필수 기술로 웹 앱을 안전하게 유지하세요. JavaScript를 실천하고 정기적인 보안 감사를 실시합니다. 승인되지 않은 JavaScript 실행으로부터 웹 앱을 보호하고 사용자를 보호하세요.
2024년 초, WP Statistics, WP Meta SEO, LiteSpeed Cache와 같은 인기 WordPress 플러그인에 저장된 XSS(교차 사이트 스크립팅) 취약점을 악용한 일련의 사이버 공격이 발생했습니다. 이러한 공격을 통해 공격자는 악성 JavaScript를 주입하여 5백만 개가 넘는 활성 설치를 손상시킬 수 있었습니다.
보시다시피 이러한 공격은 오늘날 웹 애플리케이션에 상당한 위협이 됩니다. 이로 인해 데이터 유출, 신원 도용, 궁극적으로 고객 신뢰 상실이 발생할 수 있습니다. HackerOne Research에 따르면 XSS 공격은 2020년에 보고된 모든 보안 위협의 23%를 차지하여 가장 빈번하게 발생했습니다.
이 문서에서는 승인되지 않은 JavaScript 실행으로부터 앱을 보호하는 5가지 기술을 설명합니다.
1. 입력 검증 및 정리
여기에는 주로 사용자의 입력이 예상 형식 내에 있는지 확인하는 작업이 포함됩니다. 예를 들어 이메일 텍스트 필드의 데이터는 유효한 이메일 주소여야 하며 사용자 이름 텍스트 필드의 데이터는 예상되는 사용자 이름 구조를 따라야 합니다.
삭제 작업은 XSS 및 SQL 삽입과 같은 공격에 사용될 수 있는 모든 악성 데이터를 제거하여 이 입력을 정리합니다. 이 두 가지는 모든 웹 앱에 대한 중요한 보안 조치이며 사용자가 입력할 수 있는 악성 데이터에 대한 첫 번째 방어선 역할을 합니다.
입력 유효성 검사 및 삭제를 구현하는 방법
에이. 클라이언트측 양식 유효성 검사
클라이언트측 양식 유효성 검사는 데이터 유효성 검사 프로세스의 초기 확인입니다. 그러나 JavaScript는 비활성화되거나 조작되어 클라이언트 측 검사를 쉽게 우회할 수 있으므로 보안 목적으로만 이에 의존해서는 안 됩니다.
HTML 5를 사용한 기본 클라이언트측 유효성 검사에 대한 다음 코드 예제를 참조하세요.
<form> <label for="email">Email:</label> <input type="email" id="email" name="email" required> <input type="submit" value="Submit"> </form>
클라이언트측 양식 유효성 검사에 대해 더 포괄적으로 살펴보려면 이 세부 가이드를 살펴보세요.
비. 서버측 검증
서버측 검증은 클라이언트측 검증 상태에 관계없이 모든 입력의 검증을 보장합니다. 악성 데이터가 서버의 핵심 앱 논리 또는 데이터베이스 유효성 검사에 도달하지 않도록 보장하여 보안을 강화합니다. 변조에도 덜 취약합니다.
Express와 함께 Node.js를 사용하는 기본 서버측 유효성 검사에 대한 다음 코드 예제를 참조하세요.
const express = require('express');
const app = express();
const bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({ extended: true }));
app.post('/submit', (req, res) => {
const email = req.body.email;
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(email)) {
return res.status(400).send('Invalid email format.');
}
// Process the valid email.
res.send('Email is valid!');
});
app.listen(3000, () => {
console.log('Server is running on port 3000');
});
기음. 살균
위생 처리를 통해 잠재적으로 유해한 데이터가 제거되거나 안전한 형식으로 변경됩니다. 다음 코드 예제는 Node.js의 유효성 검사기 라이브러리를 사용하여 입력을 삭제합니다.
const express = require('express');
const app = express();
const bodyParser = require('body-parser');
const validator = require('validator');
app.use(bodyParser.urlencoded({ extended: true }));
app.post('/submit', (req, res) => {
let email = req.body.email;
if (!validator.isEmail(email)) {
return res.status(400).send('Invalid email format.');
}
email = validator.normalizeEmail(email);
// Process the sanitized email
res.send('Email is valid and sanitized!');
});
app.listen(3000, () => {
console.log('Server is running on port 3000');
});
2. 콘텐츠 보안 정책(CSP)
XSS, 데이터 주입 등의 위협으로부터 웹앱을 보호하는 강력한 보안 솔루션입니다. CSP를 구현하면 승인된 특정 소스의 스크립트만 웹 페이지에서 실행할 수 있습니다. 이로써 악성코드 실행 가능성이 대폭 줄어듭니다.
간단히 말하면 CSP를 웹 앱의 경비원이라고 생각하세요. 스크립트의 출처를 확인하고 신뢰할 수 있는 소스의 스크립트만 허용하여 잘못된 스크립트는 차단합니다.
CSP 구현 방법
CSP를 구현하려면 웹 서버의 HTTP 응답 헤더에 CSP 지시문을 추가해야 합니다. CSP 지시문은 웹페이지에서 콘텐츠를 로드하고 실행하도록 허용된 소스를 브라우저에 알려주는 지침입니다. 이러한 지시어는 다양한 유형의 리소스에 대한 세부적인 제어를 제공합니다.
주요 지침은 다음과 같습니다.
- default-src: 모든 콘텐츠 유형에 대한 기본 정책을 설정합니다.
- script-src: JavaScript에 허용되는 소스를 지정합니다.
- style-src: 스타일시트에 허용되는 소스를 지정합니다.
- img-src: 허용되는 이미지 소스를 지정합니다.
- object-src: 플러그인에 허용되는 소스를 지정합니다.
HTTP 응답 헤더에 CSP를 추가하는 방법
웹 서버 구성을 통해 HTTP 응답 헤더에 CSP를 추가할 수 있습니다. Apache 서버에서 CSP를 설정하려면 다음 코드 예제를 참조하세요.
Header set Content-Security-Policy "default-src 'self'; img-src *"
Nginx의 경우 CSP를 다음과 같이 구성할 수 있습니다.
add_header Content-Security-Policy "default-src 'self'; img-src *"
메타 태그를 통해 CSP를 추가하는 방법
웹 서버 구성에 액세스할 수 없는 경우 태그를 사용하여 HTML 파일에 CSP를 직접 포함할 수 있습니다. 하지만 이는 권장되는 방법은 아닙니다.
<head> <meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src *""> </head>
3. Sub-resource integrity (SRI)
This security feature helps browsers check if the resources obtained from a third party (for instance, a CDN) have been modified. It allows you to provide a cryptographic hash for these resources.
When the browser gets the resource, it compares its hash to the given hash. If the hash does not match, the resources will not be loaded, thereby protecting your app from malicious modifications.
How to implement SRI
Implementing SRI involves adding a cryptographic hash to the integrity attribute of your or tags. Here’s a step-by-step guide to setting up SRI:
Step 1: Generating the hash
You must generate a hash for the resource you want to include in your webpage. This can be done using a tool or online service like the Subresource Integrity Generator tool.
Step 2: Adding the hash to your resource
Once you have the hash, add it to the integrity attribute of the or < link> tag.
Refer to the following code example.
<script src="https://example.com/script.js" integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxqAtD6x48V2aB1xzA7e2h53sF2aAuM" crossorigin="anonymous"></script>
In this example, the integrity attribute contains the hash, and the crossorigin=”anonymous” attribute ensures the resource is fetched with CORS (cross-origin resource sharing).
You can use SRI for stylesheets, as well.
<link rel="stylesheet" href="https://example.com/styles.css" integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxqAtD6x48V2aB1xzA7e2h53sF2aAuM" crossorigin="anonymous">
4. Secure JavaScript coding practices
Secure JavaScript coding practices are crucial for developing web apps robust against various attacks, XSS, and other malicious exploits. By following these best practices, developers can ensure their code is secure, maintainable, and less vulnerable to unauthorized execution.
Avoid using eval()
The eval() function is a significant security risk, as it executes a string of code, potentially allowing attackers to inject malicious scripts. Always avoid using eval() and similar functions like setTimeout(string) and setInterval(string).
Why these functions are dangerous:
- Arbitrary code execution: These functions can execute any code passed to them as a string. If an attacker successfully inserts a malicious string, it will operate in the same way as the remaining code of your script.
- Difficulty in code analysis: Using these functions makes it harder to analyze the code for security vulnerabilities. Static analysis tools cannot examine the strings that are passed through such functions.
- Dynamic code injection: Attackers can use these functions to inject and execute code dynamically that was not originally part of the app, bypassing traditional security measures.
Use strict mode
Enabling strict mode in JavaScript helps catch common coding mistakes and unsafe actions, such as assigning values to undeclared variables. This improves the security and stability of your code. To enable strict mode, add “use strict”; at the beginning of a script or a function.
"use strict";
function safeFunction() {
// Code in strict mode.
let secureVariable = "Secure";
console.log(secureVariable);
}
safeFunction();
Advantages and implications of enabling strict mode:
- In strict mode, this is undefined in functions that are not called methods.
- Strict mode will throw an error if a function has duplicate parameter names or an object literal has duplicate property names.
- A with statement is not allowed in the strict mode because it makes code difficult to predict and optimize.
Refer to the following code example.
"use strict";
// Eliminates this coercion.
function showThis() {
console.log(this); // In non-strict mode, this would be the global object; in strict mode, it's undefined.
}
showThis();
// Disallows duplicate property names or parameter values.
// This will throw an error in strict mode.
const obj = {
prop: 1,
prop: 2
};
// Prevents the use of with statement.
// This will throw an error in strict mode.
with (Math) {
let x = cos(3.14);
}
Avoid inline JavaScript
Inline JavaScript can be significantly vulnerable to XSS attacks because it allows attackers to inject malicious scripts directly into your HTML. Instead, use external scripts to ensure all JavaScript is properly vetted and sanitized.
Avoid inline JavaScript because of:
- Ease of injection: Inline JavaScript is more susceptible to injection attacks because it is part of the HTML content.
- CSP compliance: Content security policies (CSP) can be more effectively enforced when JavaScript is kept in external files. Inline scripts often require the use of the unsafe-inline directive, which weakens CSP’s effectiveness.
- Maintainability: Keeping JavaScript in separate files makes the codebase easier to manage and maintain.
Refer to the following code example.
<!-- Insecure Inline JavaScript -->
<!-- <button onclick="alert('Clicked!')">Click Me</button> -->
<!-- Secure External JavaScript -->
<button id="secureButton">Click Me</button>
<script>
document.getElementById('secureButton').addEventListener('click', function() {
alert('Clicked!');
});
</script>
5. Regular Security Audits and Updates
Regular audits are essential for maintaining the integrity and security of web apps. By continuously assessing your app’s security, you can identify and fix vulnerabilities that could be exploited to execute unauthorized JavaScript or other malicious actions.
정기적인 보안 감사를 수행하는 방법
자동화된 보안 검색
OWASP ZAP 또는 Burp Suite와 같은 도구를 사용하여 알려진 취약점을 검색합니다. 자동 검사는 일반적인 보안 문제를 신속하게 식별하는 방법을 제공합니다.
수동 코드 검토
자동화된 도구가 놓칠 수 있는 문제를 파악하려면 정기적으로 코드베이스를 수동으로 검토하세요. 이를 위해서는 숙련된 개발자와 보안 전문가를 활용하는 것이 좋습니다.
침투 테스트
침투 테스터를 고용하여 앱에 대한 공격을 시뮬레이션하고 다른 방법으로는 감지할 수 없는 취약점을 찾아보세요.
종속성 업데이트
라이브러리 및 프레임워크의 알려진 취약점을 수정하려면 종속성을 계속 업데이트하세요. NPM 또는 pip와 같은 패키지 관리자를 사용하여 업데이트를 관리하세요.
보안 교육
최신 보안 관행과 일반적인 취약점에 대해 개발팀을 지속적으로 교육하세요. 이렇게 하면 팀이 보안 코드를 작성할 수 있는 능력을 갖추게 됩니다.
결론적 생각
이 글을 읽어주셔서 감사합니다. 이 5가지 기술이 승인되지 않은 JavaScript 실행에 대한 앱의 방어력을 강화하기를 바랍니다. 이러한 전략을 구현하면 공격 위험을 줄이고 사용자에게 더욱 안전한 웹 앱을 제공할 수 있습니다. 디지털 자산을 보호하려면 보안 조치에 적극적이고 주의를 기울이는 것이 중요합니다.
Syncfusion JavaScript UI 컨트롤 라이브러리는 단일 패키지에 85개 이상의 고성능, 경량, 모듈식 및 반응형 UI 구성 요소가 포함되어 있으므로 앱을 구축하는 데 필요한 유일한 제품군입니다.
현재 고객의 경우 라이선스 및 다운로드 페이지에서 최신 버전의 Essential Studio를 다운로드할 수 있습니다. Syncfusion 고객이 아닌 경우 언제든지 무료 평가판을 다운로드하여 모든 컨트롤을 확인할 수 있습니다.
지원 포럼, 지원 포털 또는 피드백 포털을 통해 문의하실 수도 있습니다. 우리는 언제나 기꺼이 당신을 도와드리겠습니다!
관련 블로그
- JavaScript 파일 관리자에서 플랫 JSON 데이터를 쉽게 렌더링
- DataManager를 사용하여 JavaScript 컨트롤을 손쉽게 동기화
- 생산성 최적화: Salesforce와 JavaScript 스케줄러 통합
- 데이터 통찰력 강화: JavaScript Gantt Chart를 Power BI에 통합
위 내용은 무단 JavaScript 실행으로부터 웹 앱을 보호하는 주요 기술의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
JavaScript 엔진 : 구현 비교
Apr 13, 2025 am 12:05 AM
각각의 엔진의 구현 원리 및 최적화 전략이 다르기 때문에 JavaScript 엔진은 JavaScript 코드를 구문 분석하고 실행할 때 다른 영향을 미칩니다. 1. 어휘 분석 : 소스 코드를 어휘 단위로 변환합니다. 2. 문법 분석 : 추상 구문 트리를 생성합니다. 3. 최적화 및 컴파일 : JIT 컴파일러를 통해 기계 코드를 생성합니다. 4. 실행 : 기계 코드를 실행하십시오. V8 엔진은 즉각적인 컴파일 및 숨겨진 클래스를 통해 최적화하여 Spidermonkey는 유형 추론 시스템을 사용하여 동일한 코드에서 성능이 다른 성능을 제공합니다.
Python vs. JavaScript : 학습 곡선 및 사용 편의성
Apr 16, 2025 am 12:12 AM
Python은 부드러운 학습 곡선과 간결한 구문으로 초보자에게 더 적합합니다. JavaScript는 가파른 학습 곡선과 유연한 구문으로 프론트 엔드 개발에 적합합니다. 1. Python Syntax는 직관적이며 데이터 과학 및 백엔드 개발에 적합합니다. 2. JavaScript는 유연하며 프론트 엔드 및 서버 측 프로그래밍에서 널리 사용됩니다.
C/C에서 JavaScript까지 : 모든 것이 어떻게 작동하는지
Apr 14, 2025 am 12:05 AM
C/C에서 JavaScript로 전환하려면 동적 타이핑, 쓰레기 수집 및 비동기 프로그래밍으로 적응해야합니다. 1) C/C는 수동 메모리 관리가 필요한 정적으로 입력 한 언어이며 JavaScript는 동적으로 입력하고 쓰레기 수집이 자동으로 처리됩니다. 2) C/C를 기계 코드로 컴파일 해야하는 반면 JavaScript는 해석 된 언어입니다. 3) JavaScript는 폐쇄, 프로토 타입 체인 및 약속과 같은 개념을 소개하여 유연성과 비동기 프로그래밍 기능을 향상시킵니다.
JavaScript 및 웹 : 핵심 기능 및 사용 사례
Apr 18, 2025 am 12:19 AM
웹 개발에서 JavaScript의 주요 용도에는 클라이언트 상호 작용, 양식 검증 및 비동기 통신이 포함됩니다. 1) DOM 운영을 통한 동적 컨텐츠 업데이트 및 사용자 상호 작용; 2) 사용자가 사용자 경험을 향상시키기 위해 데이터를 제출하기 전에 클라이언트 확인이 수행됩니다. 3) 서버와의 진실한 통신은 Ajax 기술을 통해 달성됩니다.
자바 스크립트 행동 : 실제 예제 및 프로젝트
Apr 19, 2025 am 12:13 AM
실제 세계에서 JavaScript의 응용 프로그램에는 프론트 엔드 및 백엔드 개발이 포함됩니다. 1) DOM 운영 및 이벤트 처리와 관련된 TODO 목록 응용 프로그램을 구축하여 프론트 엔드 애플리케이션을 표시합니다. 2) Node.js를 통해 RESTFULAPI를 구축하고 Express를 통해 백엔드 응용 프로그램을 시연하십시오.
JavaScript 엔진 이해 : 구현 세부 사항
Apr 17, 2025 am 12:05 AM
보다 효율적인 코드를 작성하고 성능 병목 현상 및 최적화 전략을 이해하는 데 도움이되기 때문에 JavaScript 엔진이 내부적으로 작동하는 방식을 이해하는 것은 개발자에게 중요합니다. 1) 엔진의 워크 플로에는 구문 분석, 컴파일 및 실행; 2) 실행 프로세스 중에 엔진은 인라인 캐시 및 숨겨진 클래스와 같은 동적 최적화를 수행합니다. 3) 모범 사례에는 글로벌 변수를 피하고 루프 최적화, Const 및 Lets 사용 및 과도한 폐쇄 사용을 피하는 것이 포함됩니다.
Python vs. JavaScript : 커뮤니티, 라이브러리 및 리소스
Apr 15, 2025 am 12:16 AM
Python과 JavaScript는 커뮤니티, 라이브러리 및 리소스 측면에서 고유 한 장점과 단점이 있습니다. 1) Python 커뮤니티는 친절하고 초보자에게 적합하지만 프론트 엔드 개발 리소스는 JavaScript만큼 풍부하지 않습니다. 2) Python은 데이터 과학 및 기계 학습 라이브러리에서 강력하며 JavaScript는 프론트 엔드 개발 라이브러리 및 프레임 워크에서 더 좋습니다. 3) 둘 다 풍부한 학습 리소스를 가지고 있지만 Python은 공식 문서로 시작하는 데 적합하지만 JavaScript는 MDNWebDocs에서 더 좋습니다. 선택은 프로젝트 요구와 개인적인 이익을 기반으로해야합니다.
Python vs. JavaScript : 개발 환경 및 도구
Apr 26, 2025 am 12:09 AM
개발 환경에서 Python과 JavaScript의 선택이 모두 중요합니다. 1) Python의 개발 환경에는 Pycharm, Jupyternotebook 및 Anaconda가 포함되어 있으며 데이터 과학 및 빠른 프로토 타이핑에 적합합니다. 2) JavaScript의 개발 환경에는 Node.js, VScode 및 Webpack이 포함되어 있으며 프론트 엔드 및 백엔드 개발에 적합합니다. 프로젝트 요구에 따라 올바른 도구를 선택하면 개발 효율성과 프로젝트 성공률이 향상 될 수 있습니다.
