실무 환경에서는 웹 개발자들이 이런 브라우저 보안 정책들(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 같은 정책들이 브라우저 내부에서어떤 스코프로 캐싱·격리되어 동작하는지 알고 싶습니다.

서버에서는 캐싱의 유무와 상관없이 매번 리소스에 대해 digest 를 하게 되는것 같은데요.그러면, 브라우저가 리소스를 캐싱한다고 해서 '서버성능에 도움이 되기보다는 네트워크 대역폭을 아낄수 있다' 정도의 이점이 있다고 보면 될까요?

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 요청만 사용하는게 (사전 요청을 하지 않으니) 좀 더 효율적인 방법이 될수 있을까요?

예제에서 처럼 html 을 response 하지 않고 rest api 를 통해 fe 와 통신하는 경우에도 csrf 를 사용하는 경우가 있을까요? 만약 있다면 어떻게 사용하는지도 알고 싶습니다.

변경된 API 주소를 사용하려 하니CORS 오류가 있어서 데이터를 가져오지 못합니다.해결 방법이 있을까요?

서버 구성해서 직접 만들고 있는데, 입력폼에서 스크립트가 안먹히더라고요. 쭉 강의 보고 실습필요한 부분 다시 보는데 일전에 브라우져 설정을 변경 했었었나요. 기억이 가물합니다! Content-Security-Policy-Report-Only 이 옵션 때문에 가능했던가요.   

수업에서 브라우저 인스펙터의 옵션에서 [캐시 사용안함] 를 off 후 테스트 하셨는데 캐시 사용 안함은 헤더와 상관없이 캐시를 아예 사용안하는 옵션인가요

querystring.decode(body)로 하시면 해결 가능합니다

"[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스강의" 를 수강하고 배포 부분을 이 강의를 수강하고 있는 수강생입니다. 고농축 강의에서 만든 포트폴리오를 aws에서 배포했을때에, CORS 에러가 다음과 같이 나는 문제가 있는데 어떻게 해결해야할까요? 찾아보니 백엔드에서 CORS 를 허용해야하거나 프론트에서 프록시를 사용하라고 되어있는데 어떻게 해결해야할지 모르겠네요 

완강 후 책도 한번 읽어보려고 합니다추가로 강의자료 링크를 강의 아래에 달아주시면 좋을 것 같습니다.

JS파일이 서버에 저장되지만 실행은 클라이언트에서 된다는 부분에서 CORS와 정확히 어떤 연관이 있다는 건가요? CORS는 서버가 다른 출처로부터의 액세스를 허용하거나 제한할 수 있게 하는 HTTP 헤더 기반의 메커니즘이라고 알고 있는데 JS파일 저장 실행 위치만 어떤 관련이 있는지 모르겠어요

우선 좋은강의 감사드립니다. 타사이트나 *투브에서도 강의 들었는데 좋아서 인프런에서도 구매하게 됐습니다. CORS 강의를 들으면서 질문이 있어서 문의드립니다. 아래와 같이 api 서버나 dev 서버 도메인을 다르게 구성하려고 하는데, 도메인이 다르기 때문에 CORS 이슈가 하위도메인의 경우에도 적용되나요? www.domain.com : 프론트엔드 애플리케이션(프론트엔드), port : 3000api.domain.com : 백엔드 api 애플리케이션 , port : 8080dev-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 2s122 packages are looking for fundingrun npm fund for detailsfound 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에서는 되더라고요 근데 왜이 프로젝트에서는 안될까? 라는 생각이 들었습니다 감사합니다 :)              

바꾼게 하나도 없이 선생님께서 알려주신 대로 똑같이 했는데 cors 에러가 나요... 서버 쪽에서 Access-control-Allow-origin 헤더 설정하라는데 어떻게 해야 해결할 수 있나요?

질문은 아니지만 간단히 해결할 수 있어 글 남기고 갑니다. 저의 경우 상품등록 페이지를 만들다 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')); });

프론트엔드는 localhost:3000 에서 next.js 로, 백엔드는 localhost:4000 에서 node.js 로 만들고 있습니다. 쿠키를 다루기 위해서 'Access-Control-Allow-Credentials' 를 true로 만들고 싶어서 cors 미들웨어에 credential: true 를 옵션으로 주었습니다.     그런데 이렇게 해봐도 'Access-Control-Allow-Credentials' 가 true 로 되지 않습니다.     구글에 검색해봐도 cors 옵션으로 credential: true 를 하면 된다고 하는데 아무리해도 되지 않습니다... 뭐가 문제일까요?