안녕하세요. 세션 6, 19강의 CORS와 Drive-by Download 설명 관련해서 궁금한 점이 있어 질문드립니다. 강의에서 CORS 정책을 설명하시면서, Drive-by Download와 같은 공격에 구조적으로 대응할 수 있다는 취지로 말씀해주신 것으로 이해했습니다. 제가 이해한 바로는 CORS는 기본적으로 허용되지 않은 다른 출처의 JavaScript가 특정 서버의 응답을 읽지 못하도록 제어하는 브라우저 정책 에 가깝다고 알고 있습니다. 즉, cross-origin 요청 자체를 항상 막는다기보다는, 서버가 허용하지 않은 출처에서 응답 데이터에 접근하지 못하게 하는 정책으로 이해하고 있습니다. 반면 Drive-by Download는 사용자가 악성 사이트나 감염된 정상 사이트에 방문했을 때, 악성 JavaScript, iframe, 광고, redirect 등을 통해 브라우저 취약점을 공격하거나 악성 파일 다운로드/실행을 유도하는 공격으로 알고 있습니다. 그래서 이 부분에서 조금 헷갈리는 점이 있습니다. 여러 도메인의 리소스가 연결된다는 점에서는 Drive-by Download도 브라우저의 출처 정책과 관련이 있다고 볼 수 있지만, CORS가 Drive-by Download를 직접적으로 막는 방어책이라고 보기는 어렵지 않은가 하는 생각이 들었습니다. 예를 들어 외부 JavaScript 로드 자체는 일반적으로 CORS가 아니라 <script src="..."> 형태로도 가능하고, 이를 통제하려면 CORS보다는 CSP, XSS 방어, iframe sandbox, 외부 스크립트 제한, 브라우저/OS 패치 등이 더 직접적인 방어책이라고 이해했습니다. 제가 이해한 내용을 정리하면 다음과 같습니다. CORS: 다른 출처의 API 응답을 JavaScript가 읽을 수 있는지 통제 Drive-by Download: 악성 스크립트, iframe, 광고, 취약점 exploit 등을 통해 악성코드 다운로드/실행 유도 Drive-by Download 방어: CORS보다는 CSP, XSS 방어, iframe 제한, 브라우저 취약점 패치 등이 더 직접적 혹시 강의에서 말씀하신 “CORS를 통해 Drive-by Download에 대응할 수 있다”는 의미가, CORS 자체가 직접 방어책이라는 뜻이라기보다는 브라우저의 출처 기반 보안 모델 전반을 설명하는 맥락 으로 이해하면 될까요? 제가 잘못 이해한 부분이 있다면 정정 부탁드립니다. 감사합니다.
실무 환경에서는 웹 개발자들이 이런 브라우저 보안 정책들(CSP, CORS, SRI, 쿠키 속성, Referrer-Policy 등)을 어느 정도 수준까지 직접 명시적으로 선언하고 관리하는지가 궁금합니다. 예를 들어, 어떤 정책들은 코드나 미들웨어에서 직접 작성하고, 어떤 정책들은 서버나 CDN 레벨에서 일괄 설정되는지 그 구분의 현실적 기준이 있다면 듣고 싶습니다. 또한 이런 보안 헤더들을 설정할 때 자주 사용하는 라이브러리나 프레임워크 추천 도 부탁드립니다. (예: Express helmet , Next.js next-safe , Nginx 보안 헤더 설정 등)
CSP, CORS, SRI, 쿠키 속성, Referrer-Policy 같은 HTTP 기반 보안정책들은 서버가 응답 헤더로 내려주면 브라우저의 내부 policy layer에서 관리된다고 알고 있습니다. 그런데 이때 브라우저가 이런 보안 정책들을 저장하고 적용하는 단위가 Origin 단위(정확히 scheme + host + port )로 관리되는지 , 아니면 Site 단위(예: eTLD+1 기반, 쿠키 격리처럼 더 넓은 범위) 로 관리되는지도 궁금합니다. 즉, 브라우저의 보안 정책(policy layer)은 어떤 기준 단위로 정책을 식별·적용하며, 개발자가 설정한 CSP나 CORS 같은 정책들이 브라우저 내부에서 어떤 스코프로 캐싱·격리되어 동작하는지 알고 싶습니다.
react (client) + node.js (backend) 와 같은 구성에서는 SOP 에서 설명해주신 '동일 출처 정책' 으로 인해 'fetch' 등을 사용할때 막히는 경우가 종종 있었는데요. 그래서, 이전에는 fe 팀과 be 팀이 개발을 할때 CORS 작업을 항상 했었던걸로 기억합니다. 최근에 많이 사용하는 next.js 는 bff (backend for frontend) 가 중간에 있어서 SOP 로 인한 문제가 거의 없는것 같은데요. (SOP 는 설명해주신것처럼 브라우저 자체의 보안이기 때문에) 이렇게 이해하는게 맞을까요?
put, patch, delete 메서드의 경우 options (사전 요청) 을 보내게 된다고 하셨는데요. 물론, 설명 주신것처럼 "Access-Control-Max-Age" 를 통해서 캐싱을 하는 방법도 있겠지만, get 과 post 요청만 사용하는게 (사전 요청을 하지 않으니) 좀 더 효율적인 방법이 될수 있을까요?
서버 구성해서 직접 만들고 있는데, 입력폼에서 스크립트가 안먹히더라고요. 쭉 강의 보고 실습필요한 부분 다시 보는데 일전에 브라우져 설정을 변경 했었었나요. 기억이 가물합니다! Content-Security-Policy-Report-Only 이 옵션 때문에 가능했던가요.
"[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스강의" 를 수강하고 배포 부분을 이 강의를 수강하고 있는 수강생입니다. 고농축 강의에서 만든 포트폴리오를 aws에서 배포했을때에, CORS 에러가 다음과 같이 나는 문제가 있는데 어떻게 해결해야할까요? 찾아보니 백엔드에서 CORS 를 허용해야하거나 프론트에서 프록시를 사용하라고 되어있는데 어떻게 해결해야할지 모르겠네요
JS파일이 서버에 저장되지만 실행은 클라이언트에서 된다는 부분에서 CORS와 정확히 어떤 연관이 있다는 건가요? CORS는 서버가 다른 출처로부터의 액세스를 허용하거나 제한할 수 있게 하는 HTTP 헤더 기반의 메커니즘이라고 알고 있는데 JS파일 저장 실행 위치만 어떤 관련이 있는지 모르겠어요
우선 좋은강의 감사드립니다. 타사이트나 *투브에서도 강의 들었는데 좋아서 인프런에서도 구매하게 됐습니다. CORS 강의를 들으면서 질문이 있어서 문의드립니다. 아래와 같이 api 서버나 dev 서버 도메인을 다르게 구성하려고 하는데, 도메인이 다르기 때문에 CORS 이슈가 하위도메인의 경우에도 적용되나요? www.domain.com : 프론트엔드 애플리케이션(프론트엔드), port : 3000 api.domain.com : 백엔드 api 애플리케이션 , port : 8080 dev-api.domain.com : 개발 테스트용 서버, port : 8081 실제 현업에서는 백엔드의 api, auth 등을 도메인을 어떻게 구성하는지 궁금하고 어떻게 조치하는지도 궁금합니다. 감사합니다.
cors, gitignore, env가 모두 작동하지 않습니다. 1) cors와 env에 대하여 'npm install cors, npm install dotenv'를 통해 설치를 완료했고 up to date, audited 599 packages in 2s 122 packages are looking for funding run npm fund for details found 0 vulnerabilities 라고 잘 설치된 것을 확인했습니다. 그리고 //server.js const express = require('express'); const app = express(); const test = require('./Router/test'); const cors = require('cors'); app.use(cors()); require('dotenv').config(); console.log("테스트: "+process.env.NEXT_PUBLIC_TEST); 라고 코드를 작성했는데, 플러그인 덕분인지 코드를 작성했을 때는 제대로 NEXT_PUBLIC_TEST에 해당하는 값이 미리보기로 뜨다가(사진 첨부), 막상 실행하면 "테스트: undefined"라고 뜹니다. 마찬가지로 cors도 제대로 설치하고 react의 response = await fetch('/backEndProc', { method: 'POST', body: formData, }); 라는 코드에 알맞게 app.post('/backEndProc', 라고 코드를 작성했음에도 " POST http://localhost:3000/backEndProc 404 (Not Found) MakePage.jsx:130 Error: Syntax" 오류가 발생했습니다. 2) gitignore에 대하여 깃이그노어에는 다음 코드가 들어있습니다. "node_modules .env" 원래 node_modules에 대하여 gitignore가 잘 작동했는데, npm install cors 이후로 갑자기 node_modules가 gitignore되지 않고, 또 .env에 대해서도 gitignore되지 않습니다. (.env와 gitignore은 같은 디렉터리에 있습니다) 도움을 주시면 정말정말 감사하겠습니다...........ㅠㅠㅠㅠㅠ 며칠째 골머리만 앓고 있습니다...
안녕하세요. 과제로 공공데이터 오픈API를 사용해서 웹을 하나 만들게 되었습니다. api에서 자료를 받아오는 과정에서 cors에러가 발생해 해결하려다가 결국 혼자서 해결이 안되어 질문 드립니다. package.json에 { ... "proxy": "http://openapi.molit.go.kr" ... }를 작성하고 실행했을 때 이런 에러코드가 발생하며 npm start가 진행되지 않습니다. 터미널에서 npm install http-proxy-middleware 설치 후 /src/setupProxy.js file 생성, 다음과 같이 코드 작성 npm start 시 접속이 불가능 도대체 어떻게 해야 cors에러를 해결가능할까요... 아무리 찾아봐도 이 두가지 방법밖에 안나오는데 두가지 다 적용이 안되니 답답해 죽겠습니다..
안녕하세요 이번에 강의를 다 듣고 또 게시판도 여러번 수행해서 정말 잘 되는것을 확인을 하였습니다 하지만 이번에 react와 함께 연동을 해서 view는 react를 사용하고 또 api 설계는 php로 한번 해보자 하고 도전을 해 보았는데요 laravel에서는 굳이 cors를 지정하지 않아도 잘 연동이 되더라고요 하지만 이번 프로젝트는 어떻게 react를 사용해야하지.. 라고 막혔습니다 제가 생각했던 아이디어는 -frontend 폴더 -backend 폴더 를 따로 두고 proxy를 두어서 php 쪽에서 그냥 header로 cors를 넘겨주면 되지 않을까.. 라고 생각하고 들었는데요 https://github.com/DevelopJKong/php_react_project 일단 문제점은.. 제가 아직 실력이 부족해서 npm 으로 프로그램을 돌리는것이 아니기 때문에 되는게 아닐까? 라는 생각이 들었습니다 그래서 이번에는 상위 폴더에서 돌리는것이 아닌 따로따로서버를 켜서 해놨는데요 그래도.. 안되더라고요 혹시나 싶어서 CorsMiddleware를 만들어서 아래와 같이 만들어보고 post 로 보낼때 Route::add(x,y,[CorsMiddleware::class]) 도 입력해봤는데요 코드는 아래와 같습니다 <?php namespace App\Middlewares; use Eclair\Routing\Middleware; class CorsMiddleware extends Middleware { public static function process() { header("Content-type: application/x-javascript;charset=utf-8"); Header("Access-Control-Allow-Origin: *"); Header("Access-Control-Allow-Methods: POST, GET, OPTIONS"); Header("Access-Control-Allow-Headers:orgin, x-requested-with"); } } <?php use Eclair\Routing\Route; use App\Middlewares\RequireMiddleware; use App\Middlewares\CsrfTokenMiddleware; use App\Middlewares\CorsMiddleware; Route::add('post', '/api/auth', '\App\Controllers\AuthController::login', [CorsMiddleware::class] ); 조금 조언을 얻고자 이렇게 글을 쓰게 되었습니다 laravel에서는 그래도 해봤는데 laravel에서는 되더라고요 근데 왜이 프로젝트에서는 안될까? 라는 생각이 들었습니다 감사합니다 :)
질문은 아니지만 간단히 해결할 수 있어 글 남기고 갑니다. 저의 경우 상품등록 페이지를 만들다 localhost:5000/${file} 이 cors 이슈가 있어 이미지 미리보기 기능이 구현이 안되었습니다. 아래와 같이 백엔드 서버에 cors를 해결하는 access control 부분을 추가 해보시길 바랍니다. app . get ( '*' , ( req , res ) => { res . header ( "Access-Control-Allow-Origin" , "*" ); res . sendFile ( path . join ( __dirname , '/public/index.html' )); });
